Jquery 친구 선택기 V2.0_jquery 기반
- WBOY원래의
- 2016-05-16 18:52:121036검색
个人觉得好友选择器是一个比较复杂的组件，涉及到前端和后端的整合。在这里我主要是介绍端段如何实现，后端的数据，我用了几个简单的ASP页面来提供。 
1.代码风格
我的组件是作为一个Jquery 的插件来做的。把整个组件做为一个类来处理。这样也方便在一个页面上多个好友选择器共存而不相互影响。
所有需要写的参数都在最下面的giant.ui.friendsuggest.defaults 中给了默认值。在未传入参数时，会调用默认值。另外，在以下划线开头的方法，我约定为私有方法，理论上不允许外部调用它们。
2.Dom结构
我的DOM结构没有在JS里面构造出来，而是预先下载xhtml页面里面。主要考虑当JS不可用时，至少能保证基本的搜索功能。这也符合“渐进增强”的思想。
3.数据格式
请求了3种不同的数据，首先是好友类别数据，在刚初始化组件的时候去获取，JSON 格式，格式为
[{name:'以前的同事',id:'1'},{name:'现在的同事',id:'2'}]
然后是对应好友类别的好友总数，用来在点击弹出所有好友时做分页使用。数据格式为Int型，直接输出一个数字就行了。获取数据时使用的参数为typeId,即好友类别的ID，为-1时获取所有好友的总数。
最后是好友列表数据，也是JSON格式。格式为：
[{fUid:1,friendUserName:'karry',friendHeadPic:'images/1.jpg'},{fUid:2,friendUserName:'kaliy',friendHeadPic:'images/2.jpg'}]
数据的获取分两种情况。
一种是输入框中输入字符时获取的数据，用name参数来存放输入框中输入的内容。
第二种是点击右侧按钮出现的所有好友的情况，由于涉及到分页、下拉列表框的过滤等，所以参数比较多，有三个参数：typeId、p、pageSize typeId代表当前的类别，p代表当前的页码，pageSize 代表每页显示的人数。
4 功能简介
组件支持多选和单选两种模式，在初始化组件时通过传入参数来控制。默认是多选。在单选模式下可以传入一个回调函数，即当选中某一好友时触发。
整个组件最核心的部分是对事件的监听和对数据的异步获取，组件涉及到了focus、blur、click、keyup，change 五个事件。我在代码里面是把这五类事件分开放在不同的私有方法里面去绑定的。分别是： _clickBind();_focusBind();_blurBind(); _keyUpBind(); _selectChangeBind();
其中对input进行键盘事件的监听是最复杂的，要考虑到多种情况。通常没输入一个键都要去后台请求一次数据，但需要对上下左右方向键和回车键做不同的处理，大家可以直接看源代码来了解。
另外一个比较重要的处理就是重复选择的好友会通过闪动颜色来提示。这里主要是通过setInterval()来实现
var i = 0;
var $obj = $($this.opts.resultContainer).find("[name='" + fUid + "']");
$obj.css("background-color", "#fff");
//变色
var interval = setInterval(function() {
//IE和FF颜色输出不一样
if ($obj.css("background-color") == "#ffffff" || $obj.css("background-color") == "rgb(255, 255, 255)") {
$obj.css("background-color", "#6699cc");
$obj.css("color", "#fff");
} else {
$obj.css("background-color", "#ffffff");
$obj.css("color", "#666666");
}
i++;
if (i == 4) {
$obj.attr("style", "");
clearInterval(interval);
}
}, 300);
다중 선택 모드에서 선택된 친구는 친구 ID가 저장된 배열을 반환하는 getResult() 메서드를 통해 얻을 수 있습니다.
5.기본 매개변수:
이전 매개변수의 대부분은 DOM에서 해당 버튼과 컨테이너를 지정하는 데 주로 사용됩니다. DOM 구조를 변경하지 않는 한 이러한 매개변수를 변경할 필요가 없습니다.
/**
* 기본 매개변수
*
<br> * totalSelectNum 다중 선택 모드에서 선택할 최대 인원 수, 기본값은 30<br> * selectType 선택 모드, 기본값은 "multiple" ", 싱글인 경우 선택하면 싱글 사용<br> * selectCallBack 싱글 선택 모드에서는 선택 후 콜백 기능. <br> *
**/
Giant.ui.friendsuggest.defaults = {
btnAll:"#ui-fs .ui-fs-icon",
btnCloseAllFriend:"#ui- fs .ui-fs-all .close",
btnNextPage:"#ui-fs .ui-fs-all .next",
btnPrevPage:"#ui-fs .ui-fs-all .prev" ,
selectFriendType:"#ui-fs-friendtype",
allFriendContainer:"#ui-fs .ui-fs-all",
allFriendListContainer:"#ui-fs .ui-fs-all. ui-fs-allinner div.list",
frinedNumberContainer:"#ui-fs .ui-fs-allinner .page b",
resultContainer:"#ui-fs .ui-fs-result",
입력:"#ui-fs .ui-fs-input 입력",
inputContainer:"#ui-fs .ui-fs-input",
dropDownListContainer:"#ui-fs .ui-fs -list",
inputDefaultTip:"친구 이름을 입력하세요(전체 철자 입력 지원)",
noDataTip: "이 친구는 친구 목록에 존재하지 않습니다.",
ajaxUrl: "ajax.asp",
ajaxLoadAllUrl:"ajax.asp",
ajaxGetCountUrl:"ajaxcount.asp",
ajaxGetFriendTypeUrl:"ajaxFriendType.asp",
totalSelectNum:30,
ajaxBefore:null,
ajaxError:null,
selectType:"multiple",
selectCallBack:null
};
6. 호출 방법:
DOM 구조가 변경되지 않는 한 호출은 매우 간단합니다.
var test = new Giant.ui.friendsuggest();
물론 $(document).ready(function(){}) 안에 배치해야 합니다. 그렇지 않으면 해당 DOM을 찾을 수 없습니다.
매개변수를 수정해야 하는 경우 위의 기본 매개변수를 확인하고 변경해야 하는 매개변수를 전달하세요.