JQuery实现个性化，可以拖拽 自定义自己的界面（三）

上次说数据库表的设计；今天我主要介绍主要js函数；共感兴趣的读者参考。

 

1.GetUser函数; 获取用户信息；在这里我想说的是匿名用户的处理；正常登陆网站的用户，我们可以从库里读取到信息，主要及时显示几个Tab; 至于有多少个

widget，呵呵，我认为那不是GetUser应该做的，每一个Tab应该知道自己有几个Widget,以及显示在什么位置；呵呵扯远了。 回正题匿名用户的处理，很简单那就是

cookie,我想igoogle以及其他的一些著名网站也是这么做的。把匿名用户在首页上做的设置存放到cookie里，也就是说打开首页，首先检查是不是登陆用户，如果是显示我们存放到库里的信息，如果不是看看有没有cookie信息，如果还没有那就给他个默认信息好了；

 

代码

 1  function  GetUser() {
 2 
 3      $.ajax({
 4 
 5          url:  " Service/GetUser.ashx " ,
 6          type:  " POST " ,
 7          success:  function (returnValue) {
 8 
 9               if  (returnValue  ==   " 0 " ) {
10              }
11               else  {
12              }
13          }
14      });
15  }
16 

 

2.GetTabByUser()函数； 获取登录用户的Tab个数；该函数用到了一个ChangTab 在下面解释；

代码

 1  /* *
 2  *每一个li记录着该页的 列数、给页面的唯一ID,名称Title
 3  */
 4  function  GetTabByUser()
 5  {
 6      $.ajax({
 7      
 8          url :  " Service/GetTabs.ashx " ,
 9          cache :  false ,
10          success :  function (returnValue){            
11              RemoveLoading();            
12              $( ' .default_AddNewPages ' ).before(returnValue);            
13              $( ' .GetTabs_Ll_Title ' ).bind( ' click ' ,ChangTab);                        
14               if ($( ' .GetTabs_Ll_Title ' ).size()  >   0 ){            
15                  $( ' .GetTabs_Ll_Title ' ).eq( 0 ).click();                
16              }
17          },
18          beforeSend :  function (){        
19              AddLoading();        
20          }
21      });
22  }

 

 

3.ChangTab();该函数的触发是发生在用户点击了tab的title时候。一个简单的切换。

 

代码

 1  function  ChangTab()
 2  {
 3       var  t  =  $( this ).parent( ' .default_Tabs_Checked ' ).html();
 4      
 5       if (t != null )
 6      {
 7           // 如果选择了该页面则 点击的时候不加载数据！
 8      }
 9       else
10      {
11           var  page_li  =  $( this ).parent( ' .GetTabs_Ll ' );
12      
13          PageCheck(page_li);
14          
15           var  columsCount  =  page_li.attr( ' clsCount ' );
16          
17          SetLayOut(columsCount);  // 根据tab的列，定义页面的布局。
18          
19           var  tabID  =  page_li.attr( ' tabID ' ); 
20          
21          AddMoudles(tabID);  // 根据tabid,查找widget
22      }
23  }

 

 

4. 如注释

代码

 1  /*
 2  该函数很简单，就是把其他tab样式去掉，把点击当前的tab添加样式。
 3  */
 4  function  PageCheck(page_li)
 5  {
 6      $( ' .GetTabs_Ll ' ).removeClass( ' default_Tabs_Checked ' );
 7      $( ' .GetTabs_Ll_Down ' ).hide();
 8      $( ' .GetTabs_Ll_Down_Area ' ).hide();
 9      
10      page_li.addClass( ' default_Tabs_Checked ' );
11  }
12 

 

 

5. SetLayOut 定义tab的布局。同时引用了Jquery的拖拽功能。在整个自定义页面中拖拽是主要的功能，需要保存住用户的自定义设置信息；

代码中：update: function(event,ui){SortAction(event,ui,"update")}  ，这个是jqeruy ui sortable中的事件；

SortAction是一个我们定义的函数，意思是说widget更新位置的时候执行SortAction函数；

 

代码

 1  function  SetLayOut(num)
 2  {
 3       switch  (parseInt(num))
 4      {
 5           case   1  : $( " #default_columns " ).html( ' <ul id="column1" style="width:98%;"></ul> ' ); break ;
 6           case   2  : $( " #default_columns " ).html( ' <ul id="column1" style="width:45%;"></ul><ul id="column2" style="width:45%;"></ul> ' ); break ;
 7           case   3  : $( " #default_columns " ).html( ' <ul id="column1" style="width:31%;"></ul><ul id="column2" style="width:31%;"></ul><ul id="column3" style="width:31%;"></ul> ' ); break ;
 8           default  :  $( " #default_columns " ).html( ' <ul id="column1" style="width:32%"></ul><ul id="column2" style="width:32%"></ul><ul id="column3" style="width:32%"></ul> ' ); break ;
 9      }
10      
11      $( function () {
12          $( " #column1,#column2, #column3 " ).sortable({
13          placeholder:  ' sortHelper '  ,  // 样式
14          handle :  " .Widget_Head " ,
15          connectWith:  ' .ui-sortable ' , // 多列可以拖动
16          helper:  ' clone ' ,  // 必须添加该属性 否则ie8以下的浏览器不支持
17          opacity:  0.8 ,
18          scroll:  false  ,    
19          update:  function (event,ui){SortAction(event,ui, " update " )}
20          }).disableSelection();
21      });    
22  }

 

 

6.持久化；需要注意的是我们不仅需要知道当前widget的位置，还需要知道要拖拽到那一列；

比如从第一列拖拽到第二列，那么第二列需要重新排序；因为要记录在地二列的位置；

代码

 1  function  SortAction(event,ui,eventName)
 2  {    
 3       switch (eventName)
 4      {                    
 5           case   " update " :
 6              WidgetUpdate(event,ui);
 7               break ;
 8      }
 9  }
10 
11  /* *
12  更新widget的列和该列的位置
13  */
14  function  WidgetUpdate(event,ui)
15  {
16       var  widgetIndex  =  [];
17      
18       var  currentWidgetID  =  ui.item.find( ' .Widget_Head ' ).attr( ' widgetid ' ); // 获得当前的widgetID
19      
20       var  targetColumnID  =  event.target.id; // 获得当前的列ID
21      
22       var  columnID  =  targetColumnID.substring(targetColumnID.length - 1 ,targetColumnID.length); // 去掉#column 保留整数1
23      
24       var  liQuery  =  $( " # "   +  targetColumnID  +   "  li " ).filter( ' .Widget_Main ' ); // 获得该列的所有li 包括父级元素ul
25      
26       var  tabID  =  $( " .default_Tabs_Checked " ).attr( " tabid " );
27 
28      liQuery.each( function (){    
29 
30           var  widget  =  {};
31          
32          widget.ID  =  $( this ).find( ' .Widget_Head ' ).attr( ' widgetid ' );
33          
34          widgetIndex.push(widget);
35      });
36      
37       var  obj  =   "" ;
38      
39       for ( var  m = widgetIndex.length - 1 ;m >= 0 ;m -- )
40      {
41          obj  =  widgetIndex[m].ID  +   " | "   +  obj;
42      }
43      
44       if (obj  !=   "" )
45      {
46           var  parms  =   " allWidgetID= " + obj + " &columnID= " + columnID + " &currentWidgetID= " + currentWidgetID + " &tabID= " + tabID;
47                  
48          $.ajax({
49          
50              url :  " Service/DropWidget.ashx " ,
51              
52              type :  " POST " ,
53              
54              data : parms,
55              
56              success: function (returnXml){}
57          
58          }); // end ajax
59      } // end if
60  }
61 

 

不贴了，这只是部分函数，算是主要的吧；其他根据我们的需要还可能会添加很多；主要是理清思路吧。呵呵使用jquery可以很方便的帮我们实现一些功能。

 

如果大家有不清楚的地方，欢迎和我沟通。呵呵  谢谢你抽出时间看这篇文章。

 

Demo:http://xiaoguan1985.36jhw.dnscnc.com/