当前位置:编程学习 > JS >>

jquery sortbale cookie保存排序

Js代码 
<div class="demo">   
   
<div class="column">   
   
 <div class="portlet">   
  <div class="portlet-header">Feeds</div>   
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>   
 </div>   
    
 <div class="portlet">   
  <div class="portlet-header">News</div>   
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>   
 </div>   
   
</div>   
   
<div class="column">   
   
 <div class="portlet">   
  <div class="portlet-header">Shopping</div>   
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>   
 </div>   
   
</div>   
   
<div class="column">   
   
 <div class="portlet">   
  <div class="portlet-header">Links</div>   
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>   
 </div>   
    
 <div class="portlet">   
  <div class="portlet-header">Images</div>   
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>   
 </div>   
   
</div>   
   
</div>   
   
js代码:   
   
 <mce:script type="text/javascript"><!--   
 $(function() {   
  $(".column").sortable({   
   connectWith: '.column'   
  });   
   
  $(".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-minusthick ui-icon"></span>')   
    .end()   
   .find(".portlet-content");   
   
  $(".portlet-header .ui-icon").click(function() {   
   $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");   
   $(this).parents(".portlet:first").find(".portlet-content").toggle();   
  });   
   
  $(".column").disableSelection();   
 });   
    
// --></mce:script>   
   
下面是保存代码   
  
    <mce:script type="text/javascript"><!--   
function MadeDiv()   
{   
if (!$.cookie("dao_list")) {   
                $.cookie("dao_list", "c1:0@1@2@3@4@|c2:5@6@7@8@9@");    
            }   
            var list = $.cookie("dao_list");    
            var arrColumn = list.split('|');   
             $.each(arrColumn, function(m, n) {   
                var elemId = n.split(':')[0];    
                var arrRow = n.split(':')[1] ? n.split(':')[1].split('@') : "";    
                $.each(arrRow, function(m, n) {   
                    if (n) {   
                        $("#" + elemId).append($("#dao_hang" + n).attr('id', n))   
                    }   
                });   
             })   
                
  $(".column").sortable({   
   connectWith: '.column',   
   handle:'.portlet-header',   
   cursor: 'move',   
   stop:saveLayout   
  });   
          
      
  $(".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-closethick" title=\"点击删除导航\"></span>')   
    .end()   
   .find(".portlet-content");   
   
  $(".portlet-header .ui-icon").click(function() {   
            var this_box=$(this).parent().parent().closest("div").remove();   
            saveLayout();&nbs

补充:Web开发 , Jsp ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,