程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> JSP編程 >> 關於JSP >> jquery sortbale cookie保存排序

jquery sortbale cookie保存排序

編輯:關於JSP

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();   
  });   
    $(".column").disableSelection();   
       $( ".column" ).sortable( { forcePlaceholderSize: true } );   
}   
function saveLayout() {   
                var list = "";   
                $.each($(".column"), function(m) {   
                    list += $(this).attr('id') + ":";   
                    $.each($(this).children(".portlet"), function(d) {   
                        list += $(this).attr('id') + "@";   
                    })   
                    list += "|";   
                })   
                $.cookie("dao_list",list, {expires: 300});   
}   
function moren()   
{   
                $.cookie("dao_list","c1:0@1@2@3@4@|c2:5@6@7@8@9@", {expires: 300});   
                window.location.reload();   
}   

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved