portlets-jquery拖曳插件

发布于，归属于jquery插件。 前2个座位已被强势霸占！ 共有523人围观    

portlets

拖曳、拆合等功能都已经具备。但说起拖曳插件，个人觉得，jquery的拖曳UI才是王道。
这里需要提一下的是：该插件的初始化JS是写在config.js的文件里面。

这里简要说明下插件的初始化过程：

  1. $(document).ready(
  2.     function()
  3.     {
  4.         // Toggle Single Portlet
  5.         $('a.toggle').click(function()
  6.             {
  7.                 $(this).parent('div').next('div').toggle();
  8.                 return false;
  9.             }
  10.         );
  11.  
  12.         // Invert All Portlets
  13.         $('a#all_invert').click(function()
  14.             {
  15.                 $('div.portlet_content').toggle();
  16.                 return false;
  17.             }
  18.         );
  19.  
  20.         // Expand All Portlets
  21.         $('a#all_expand').click(function()
  22.             {
  23.                 $('div.portlet_content:hidden').show();
  24.                 return false;
  25.             }
  26.         );
  27.  
  28.         // Collapse All Portlets
  29.         $('a#all_collapse').click(function()
  30.             {
  31.                 $('div.portlet_content:visible').hide();
  32.                 return false;
  33.             }
  34.         );
  35.  
  36.         // Open All Portlets
  37.         $('a#all_open').click(function()
  38.             {
  39.                 $('div.portlet:hidden').show();
  40.                 $('a#all_open:visible').hide();
  41.                 $('a#all_close:hidden').show();
  42.                 return false;
  43.             }
  44.         );
  45.  
  46.         // Close All Portlets
  47.         $('a#all_close').click(function()
  48.             {
  49.                 $('div.portlet:visible').hide();
  50.                 $('a#all_close:visible').hide();
  51.                 $('a#all_open:hidden').show();
  52.                 return false;
  53.             }
  54.         );
  55.  
  56.         // Controls Drag + Drop
  57.         $('#columns td').Sortable(
  58.             {
  59.                 accept: 'portlet',
  60.                 helperclass: 'sort_placeholder',
  61.                 opacity: 0.7,
  62.                 tolerance: 'intersect'
  63.             }
  64.         );
  65.     }
  66. );
（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

2个座位已被强势霸占！

  1. wxfans

    这个下载地址失效了哦
    网站很不错 我学到很多！！同时我觉得这个没jpolite强大哦

    明河共影回复于 2010年03月21日 5:03

    谢谢提醒。

同类