Jquery插件之选择器的设计

      这段时间折腾了下公司内部的一个投票系统，添加了一个投票选择的功能，也有点有趣的事情在，遂补博文一篇，老规矩，那就先有图有一下真相啊哈哈。

 

 

      这个选择器的设计思路其实是参考人人网的学校的选择器的（不是说数据和应用面），在操作上应该是差不多的，本人无才，仿照人家，小内疚一下，呵呵。选择器的顶部是标题，顶部右上为分类选择和关闭按钮。主画面上用垂直的选项卡展现。底部为功能按钮和选择确认的按键。

      选择器是作为Jquery的插件来实现的，所以自己封装了一个选择器插件（selector.js,还没想好名字呵呵）。

      设计的思路就是从载入，事件绑定，数据、缓存等等方面展开，下面详细说下

1.请求和初始化数据 

       本例中使用Ajax完成对用户列表和部门信息的数据请求，在页面中的表现是异步的。接口数据自定义了一个JSON的字符序列。

      { "UserList":[ { "GroupName":"ｼｽﾃﾑ部", "GroupId":"1", "GroupMember":[ { "UserId":"110195", "UserName":"周XX", "Selection":"NO" }， ... ] }, { "GroupName":"制御部", "GroupId":"2", "GroupMember":[ { "UserId":"106096 ", "UserName":"陳XX", "Selection":"NO" }, ... }, ... ] }

      请求一次完成，选择器载入后，后面的操作，都是针对缓存到本地的数据进行操作，不再另行请求数据库。

2.事件绑定

       选择器里面有许多的操作，都需要把相应的事件一一绑定上去。比如选项的单击事件，选项卡的单击事件等等，下面举下选项卡初始化的例子。

        //绑定选项卡初始化及事件 var BindTabClick=function() { var ContentDoc=$(SelectorID+" .content");//content var TabDoc=$(SelectorID+" .tab");//tab var Confirm=$(SelectorID+" .Confirm");//Confirm ContentDoc.find("div.UserList:gt(0)").hide(); TabDoc.find("li:first").addClass("active"); TabDoc.find("li").click(function(){ $(this).addClass("active").siblings().removeClass("active"); ContentDoc.find("div.UserList").eq($(this).index()).siblings().hide().end().show(); }); Confirm.find(".AllMember").colorTip({color:'yellow'}); Confirm.find(".AllMember").toggle(function(){ UserSelDataAllAdd(); },function(){ UserSelDataAllRemove(); } ); Confirm.find(".GroupAdd").colorTip({color:'yellow'}); Confirm.find(".GroupAdd").click(function(){ var GroupOrderNum=TabDoc.find(".active").index(); UserSelDataGroupAdd(GroupOrderNum); }); Confirm.find(".GroupDel").colorTip({color:'yellow'}); Confirm.find(".GroupDel").click(function(){ var GroupOrderNum=TabDoc.find(".active").index(); UserSelDataGroupRemove(GroupOrderNum); }); }; var RunCallBack=function(){ if(CallBack!=null){CallBack();} } this.RunCallBack=RunCallBack;

3.数据访问

        选择器必须提供一个可供访问的属性来取得当前选中的项，除此之外，还增加了GetValue的方法来访问选择器的值：

       Selector.prototype.GetValue=function(){ return this.GetSelectorValue(); }

 

      

 4.关于callback

         没有找到一个很好的回调策略适应选择器作为编辑或者是添加状态下的定制需求，期待改进。