上次说数据库表的设计；今天我主要介绍主要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 + " ¤tWidgetID= " + 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/
posted on 2010-07-17 00:01 管宇 阅读( ...) 评论( ...) 编辑 收藏转载于:https://www.cnblogs.com/winner2009/archive/2010/07/17/1779301.html
相关资源：JAVA上百实例源码以及开源项目