Jquery フレンド セレクター V2.0_jquery に基づく

个人觉得好友选择器是一个比较复杂的组件，涉及到前端和后端的整合。在这里我主要是介绍端段如何实现，后端的数据，我用了几个简单的ASP页面来提供。

1.代码风格

        我的组件是作为一个Jquery 的插件来做的。把整个组件做为一个类来处理。这样也方便在一个页面上多个好友选择器共存而不相互影响。

        所有需要写的参数都在最下面的giant.ui.friendsuggest.defaults 中给了默认值。在未传入参数时，会调用默认值。另外，在以下划线开头的方法，我约定为私有方法，理论上不允许外部调用它们。

2.Dom结构

      我的DOM结构没有在JS里面构造出来，而是预先下载xhtml页面里面。主要考虑当JS不可用时，至少能保证基本的搜索功能。这也符合“渐进增强”的思想。

   

   

   

       
        查看所有好友
   

   

       数据加载中....
   

   

       

            所有好友
           

关闭

       

       

           

               

还有30人可选

上一页下一页

           

           

                数据加载中...
           

       

   

       

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);
 

複数選択モードで選択された友達は、getResult() メソッドを通じて取得できます。このメソッドは、友達 ID を格納する配列を返します。

5.デフォルトパラメータ:

前述のパラメータのほとんどは、主に DOM 内の対応するボタンとコンテナを指定するために使用されます。DOM 構造を変更しない限り、これらのパラメータを変更する必要はありません。

/**
* デフォルトのパラメータ
*

<br> * totalSelectNum 複数選択モードでは、選択する人の最大数、デフォルトは 30 です<br> * selectType 選択モード、デフォルトは「複数」 "、単一の場合、選択されている場合は、single<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",
fredNumberContainer:"#ui-fs .ui-fs-allinner .page b",
resultContainer:"#ui-fs .ui-fs-result",
input:"#ui-fs .ui-fs-input 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 が見つかりません。
パラメータを変更する必要がある場合は、上記のデフォルトのパラメータを確認し、変更する必要があるパラメータを渡します。

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title>