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/