maryam_272
سه شنبه 22 آذر 1390, 14:18 عصر
با سلام
من چند وقت پیش یک صفحه طراحی کردم که بخشهای مختلفی در اون را بصورت widget قرار دادم و امکان جابجایی حذف و باز و بسته کردن دارد همچنین برای کلیک راست کردن امکان اضافه کردن widget و Refresh را قرار دادم
اون موقع همه چی درست جواب میداد اما الان که می خواهم یک ویجت اضافه کنم 2 تا ویجت اضافه می کنه که یکی را میشه جاجا کرد اما حذف و بسته نمیشه و یکی دیگه کاملا فیکس و جابجا نمیشه
این هم عکسهاش
http://www.pic.iran-forum.ir/images/ejj3e9towjo5ed0w8mz8.gif
http://www.pic.iran-forum.ir/images/8okldl5f7l1zrymdnx.gif
واین هم کدهاش در head
<head runat="server">
<title></title>
<link rel="stylesheet" href="Scripts/jquery-ui-1.8.11.custom.css" type="text/css"
media="all" />
<link href="Scripts/ContextMenu/contextmenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.11.custom.min.js"></script>
<script src="Scripts/ContextMenu/jquery.contextmenu.js" type="text/javascript"></script>
<style>
BODY
{
font-family: Tahoma, Verdana, Helvetica, sans-serif;
font-size: 9pt;
color: #2f373d;
}
.column
{
width: 100%;
float: none;
padding-bottom: 10px;
}
.portlet
{
margin: 5px 5px 5px 5px;
}
.portlet-header
{
margin: 0.3em;
padding-bottom: 4px;
padding-left: 0.2em;
font-family: Tahoma;
font-size:small;
}
.portlet-header .ui-icon
{
float: right;
}
.portlet-content
{
padding: 0.4em;
font-family: Tahoma;
font-size:small;
}
.ui-sortable-placeholder
{
border: 2px dashed #575757;
margin: 5px 5px 5px 5px;
}
.auto-style1
{
border: 1px solid #000080;
}
.auto-style2
{
background-color: #3576A8;
}
.auto-style3
{
text-align: center;
}
</style>
<script>
$.fn.myCustomShow = function (speed, callback) { // First position it up and to the left so we can fly in
var top = parseInt(this.css('top')) - 500;
var left = parseInt(this.css('left')) - 500;
this.css({ 'top': top, 'left': left, opacity: 0.0 });
this.show(); this.animate({ 'top': '+=500', 'left': '+=500', 'opacity': 1 }, speed, null, callback);
};
$.fn.myCustomHide = function (speed, callback) {
this.animate({left:'-=500',top:'-=500',opacity:0.0},speed,null,callback); };
$.fx.speeds._default = 500;
$(function () {
//$("#dialog").visible = false;
$(".column").sortable({
connectWith: ".column",
cursor: 'move',
placeholder: 'ui-sortable-placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function (event, ui) {
$(ui.item).find('h2').click();
/*Pass sortorder variable to server using ajax to save state*/
}
});
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick'></span>")
.prepend("<span class='ui-icon ui-icon-closethick'></span>")
.end()
.find(".portlet-content");
$(".portlet-header .ui-icon-minusthick").click(function () {
$(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".portlet-header .ui-icon-closethick").click(function () {
$(this).parents(".portlet:first").remove();
});
$(".column").disableSelection();
$("#dialog").dialog({
autoOpen: false,
hide: "explode"
});
$("a.jQueryBookmark").click(function (e) {
e.preventDefault(); // this will prevent the anchor tag from going the user off to the link
var bookmarkId = this.name;
var bookmarkTitle = this.title;
$("<div class='portlet' id='" + bookmarkId + "'> <div class='portlet-header'><span class='ui-icon ui-icon-closethick'></span><span class='ui-icon ui-icon-minusthick'></span>" + bookmarkTitle + "</div><div class='portlet-content'>در این بخش " + bookmarkTitle + " نمایش داده می شود.</div></div>").appendTo("div#rightcolumn");
$(".column").sortable({
connectWith: ".column",
cursor: 'move',
placeholder: 'ui-sortable-placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function (event, ui) {
$(ui.item).find('h2').click();
/*Pass sortorder variable to server using ajax to save state*/
}
});
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
("<span class='ui-icon ui-icon-minusthick'></span>").replacewith("")
.prepend("<span class='ui-icon ui-icon-minusthick'></span>")
("<span class='ui-icon ui-icon-closethick'></span>").replacewith("")
.prepend("<span class='ui-icon ui-icon-closethick'></span>")
.end()
.find(".portlet-content");
$(".portlet-header .ui-icon-minusthick").click(function () {
$(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".portlet-header .ui-icon-closethick").click(function () {
$(this).parents(".portlet:first").remove();
});
$(".column").disableSelection();
var sortorder = '';
$('.column').each(function () {
var itemorder = $(this).sortable('toArray');
var columnId = $(this).attr('id');
sortorder += columnId + '=' + itemorder.toString() + '&';
});
});
// right click
var option = { items: [
{ text: "Save", icon: "Scripts/ContextMenu/save.jpg", alias: "Save", action: menuAction },
{ type: "splitLine" },
{ text: "Refresh", icon: "Scripts/ContextMenu/refresh.jpg", alias: "Refresh", action: menuAction},
{ type: "splitLine" },
{ text: "Add Widjet", icon: "Scripts/ContextMenu/widjet.jpg", alias: "Add Widjet", action: menuAction },
// { text: "Group Three", icon: "sample-css/wi0062-16.gif", alias: "1-6", type: "group", width: 180, items: [
// { text: "Item One", icon: "sample-css/wi0096-16.gif", alias: "4-1", action: menuAction },
// { text: "Item Two", icon: "sample-css/wi0122-16.gif", alias: "4-2", action: menuAction }
// ]
// }
]
};
function menuAction() {
if (this.data.alias == "Save") {
var sortorder = '';
$('.column').each(function () {
var itemorder = $(this).sortable('toArray');
var columnId = $(this).attr('id');
sortorder += columnId + '=' + itemorder.toString() + '&';
});
$.ajax({
type: "POST",
url: "WebServisesPage.aspx/InsertChidemanSiteToDataBase",
data: "{'ChidemanSite': '" + sortorder + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json"
});
};
if (this.data.alias == "Refresh") {
location.reload();
};
if (this.data.alias == "Add Widjet") {
$("#dialog").dialog("open");
return false;
};
}
$("#target2").contextmenu(option);
});
</script>
</head>
من چند وقت پیش یک صفحه طراحی کردم که بخشهای مختلفی در اون را بصورت widget قرار دادم و امکان جابجایی حذف و باز و بسته کردن دارد همچنین برای کلیک راست کردن امکان اضافه کردن widget و Refresh را قرار دادم
اون موقع همه چی درست جواب میداد اما الان که می خواهم یک ویجت اضافه کنم 2 تا ویجت اضافه می کنه که یکی را میشه جاجا کرد اما حذف و بسته نمیشه و یکی دیگه کاملا فیکس و جابجا نمیشه
این هم عکسهاش
http://www.pic.iran-forum.ir/images/ejj3e9towjo5ed0w8mz8.gif
http://www.pic.iran-forum.ir/images/8okldl5f7l1zrymdnx.gif
واین هم کدهاش در head
<head runat="server">
<title></title>
<link rel="stylesheet" href="Scripts/jquery-ui-1.8.11.custom.css" type="text/css"
media="all" />
<link href="Scripts/ContextMenu/contextmenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.11.custom.min.js"></script>
<script src="Scripts/ContextMenu/jquery.contextmenu.js" type="text/javascript"></script>
<style>
BODY
{
font-family: Tahoma, Verdana, Helvetica, sans-serif;
font-size: 9pt;
color: #2f373d;
}
.column
{
width: 100%;
float: none;
padding-bottom: 10px;
}
.portlet
{
margin: 5px 5px 5px 5px;
}
.portlet-header
{
margin: 0.3em;
padding-bottom: 4px;
padding-left: 0.2em;
font-family: Tahoma;
font-size:small;
}
.portlet-header .ui-icon
{
float: right;
}
.portlet-content
{
padding: 0.4em;
font-family: Tahoma;
font-size:small;
}
.ui-sortable-placeholder
{
border: 2px dashed #575757;
margin: 5px 5px 5px 5px;
}
.auto-style1
{
border: 1px solid #000080;
}
.auto-style2
{
background-color: #3576A8;
}
.auto-style3
{
text-align: center;
}
</style>
<script>
$.fn.myCustomShow = function (speed, callback) { // First position it up and to the left so we can fly in
var top = parseInt(this.css('top')) - 500;
var left = parseInt(this.css('left')) - 500;
this.css({ 'top': top, 'left': left, opacity: 0.0 });
this.show(); this.animate({ 'top': '+=500', 'left': '+=500', 'opacity': 1 }, speed, null, callback);
};
$.fn.myCustomHide = function (speed, callback) {
this.animate({left:'-=500',top:'-=500',opacity:0.0},speed,null,callback); };
$.fx.speeds._default = 500;
$(function () {
//$("#dialog").visible = false;
$(".column").sortable({
connectWith: ".column",
cursor: 'move',
placeholder: 'ui-sortable-placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function (event, ui) {
$(ui.item).find('h2').click();
/*Pass sortorder variable to server using ajax to save state*/
}
});
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick'></span>")
.prepend("<span class='ui-icon ui-icon-closethick'></span>")
.end()
.find(".portlet-content");
$(".portlet-header .ui-icon-minusthick").click(function () {
$(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".portlet-header .ui-icon-closethick").click(function () {
$(this).parents(".portlet:first").remove();
});
$(".column").disableSelection();
$("#dialog").dialog({
autoOpen: false,
hide: "explode"
});
$("a.jQueryBookmark").click(function (e) {
e.preventDefault(); // this will prevent the anchor tag from going the user off to the link
var bookmarkId = this.name;
var bookmarkTitle = this.title;
$("<div class='portlet' id='" + bookmarkId + "'> <div class='portlet-header'><span class='ui-icon ui-icon-closethick'></span><span class='ui-icon ui-icon-minusthick'></span>" + bookmarkTitle + "</div><div class='portlet-content'>در این بخش " + bookmarkTitle + " نمایش داده می شود.</div></div>").appendTo("div#rightcolumn");
$(".column").sortable({
connectWith: ".column",
cursor: 'move',
placeholder: 'ui-sortable-placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function (event, ui) {
$(ui.item).find('h2').click();
/*Pass sortorder variable to server using ajax to save state*/
}
});
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
("<span class='ui-icon ui-icon-minusthick'></span>").replacewith("")
.prepend("<span class='ui-icon ui-icon-minusthick'></span>")
("<span class='ui-icon ui-icon-closethick'></span>").replacewith("")
.prepend("<span class='ui-icon ui-icon-closethick'></span>")
.end()
.find(".portlet-content");
$(".portlet-header .ui-icon-minusthick").click(function () {
$(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".portlet-header .ui-icon-closethick").click(function () {
$(this).parents(".portlet:first").remove();
});
$(".column").disableSelection();
var sortorder = '';
$('.column').each(function () {
var itemorder = $(this).sortable('toArray');
var columnId = $(this).attr('id');
sortorder += columnId + '=' + itemorder.toString() + '&';
});
});
// right click
var option = { items: [
{ text: "Save", icon: "Scripts/ContextMenu/save.jpg", alias: "Save", action: menuAction },
{ type: "splitLine" },
{ text: "Refresh", icon: "Scripts/ContextMenu/refresh.jpg", alias: "Refresh", action: menuAction},
{ type: "splitLine" },
{ text: "Add Widjet", icon: "Scripts/ContextMenu/widjet.jpg", alias: "Add Widjet", action: menuAction },
// { text: "Group Three", icon: "sample-css/wi0062-16.gif", alias: "1-6", type: "group", width: 180, items: [
// { text: "Item One", icon: "sample-css/wi0096-16.gif", alias: "4-1", action: menuAction },
// { text: "Item Two", icon: "sample-css/wi0122-16.gif", alias: "4-2", action: menuAction }
// ]
// }
]
};
function menuAction() {
if (this.data.alias == "Save") {
var sortorder = '';
$('.column').each(function () {
var itemorder = $(this).sortable('toArray');
var columnId = $(this).attr('id');
sortorder += columnId + '=' + itemorder.toString() + '&';
});
$.ajax({
type: "POST",
url: "WebServisesPage.aspx/InsertChidemanSiteToDataBase",
data: "{'ChidemanSite': '" + sortorder + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json"
});
};
if (this.data.alias == "Refresh") {
location.reload();
};
if (this.data.alias == "Add Widjet") {
$("#dialog").dialog("open");
return false;
};
}
$("#target2").contextmenu(option);
});
</script>
</head>