Friend Selector Based on Jquery V2.0

I personally think the friend selector is a complicated component that involves front-end and back-end integration. Here I will mainly introduce how to implement the client segment and back-end data. I use several simple ASP pages to provide it.

1. Code style

My components are implemented as Jquery plug-ins. Treat the entire component as a class. This also facilitates the coexistence of multiple friend selectors on a page without mutual influence.

All parameters to be written are given the default value in the bottom giant. ui. friendsuggest. defaults. When no parameter is input, the default value is called. In addition, for methods starting with an underscore, I agree to be private methods. In theory, external calls are not allowed.

2. Dom Structure

My DOM structure is not constructed in JS, but is pre-downloaded from the xhtml page. It is mainly considered that when Javascript is unavailable, at least basic search functions can be guaranteed. This is also in line with the idea of "gradual enhancement.

<Div id = "ui-fs" class = "ui-fs">
<Div class = "ui-fs-result clearfix">
</Div>
<Div class = "ui-fs-input">
<Input type = "text" value = "input friend name (full join is supported)" maxlength = "30"/>
<A class = "ui-fs-icon" href = "javascript: void (0)" title = "view all friends"> View All friends </a>
</Div>
<Div class = "ui-fs-list">
Loading data ....
</Div>
<Div class = "ui-fs-all">
<Div class = "top">
<Select id = "ui-fs-friendtype"> <option value = "-1"> all friends </option> </select>
<Div class = "close" title = "close"> close </div>
</Div>
<Div class = "ui-fs-allinner">
<Div class = "page clearfix">
<Div class = "llight1"> and <B> 30 </B> </div> <div class = "button"> <span class = "prev"> Previous Page </span> <span class = "next"> next page </span> </div>
</Div>
<Div class = "list clearfix">
Loading data...
</Div>
</Div>
</Div>
</Div>

3. Data Format

Three different types of data are requested. First, the data of the friend category is obtained when the component is initialized. The JSON format is

[{Name: 'previous colleagues', id: '1'}, {name: 'Current colleagues', id: '2'}]

The total number of friends corresponding to the friend category is used for paging when all friends are clicked. The data format is Int type. You can simply output a number. The parameter used to obtain data is typeId, that is, the ID of the friend category. If it is-1, the total number of all friends is obtained.

The last is the Friends List data, which is also in JSON format. Format:

[{FUid: 1, friendUserName: 'karry', friendHeadPic: 'images/1.jpg '}, {fUid: 2, friendUserName: 'kaliy', friendHeadPic: 'images/2.jpg '}]

Data can be obtained in two ways.

One is the data obtained when a character is input in the input box. The name parameter is used to store the input content in the input box.

The second is the case where all the friends appear when you click the button on the right. Because it involves filtering pages and drop-down lists, there are many parameters. There are three parameters: typeId, p, and pageSize typeId represent the current category, p represents the current page number, and pageSize represents the number of people displayed on each page.

4. Features

The component supports multiple choice and single choice modes, which are controlled by passing in parameters when initializing the component. By default, multiple options are selected. In single-choice mode, you can pass in a callback function, which is triggered when a friend is selected.

The core of the entire component is event listening and asynchronous data acquisition. The component involves five events: focus, blur, click, keyup, and change. In the code, I separate these five types of events and bind them to different private methods. They are: _ clickBind (); _ focusBind (); _ blurBind (); _ keyUpBind (); _ selectChangeBind ();

Listening for Keyboard Events on input is the most complex and requires consideration of multiple situations. Generally, if you do not enter a key, you need to request data at the backend. However, you need to process the up and down arrow keys and the return keys differently. You can check the source code to find out.

Another important thing to do is that the repeatedly selected friends will be indicated by flashing colors. This is mainly implemented through setInterval ().

Var I = 0;
Var $ obj = $ ($ this. opts. resultContainer). find ("[name = '" + fUid + "']");
Export obj.css ("background-color", "# fff ");
// Color change
Var interval = setInterval (function (){
// The color output of IE and FF is different.
If (export obj.css ("background-color") = "# ffffff" | export obj.css ("background-color") = "rgb (255,255,255 )"){
Export obj.css ("background-color", "# 6699cc ");
$Obj.css ("color", "# fff ");
} Else {
Export obj.css ("background-color", "# ffffff ");
$Obj.css ("color", "#666666 ");
}
I ++;
If (I = 4 ){
$ Obj. attr ("style ","");
ClearInterval (interval );
}
},300 );
 

In multi-choice mode, the selected friend can be obtained through the getResult () method, and an array containing the friend id is returned.

5. default parameters:

Most of the preceding parameters are mainly used to specify buttons and containers in the DOM. You do not need to modify these parameters without changing the DOM structure.

/**
* Default parameters
* <Pre>
* In totalSelectNum multi-choice mode, the maximum number of users can be selected. The default value is 30.
* SelectType: select the mode. The default value is "multiple". If it is a single choice, use single
* In selectCallBack single-choice mode, the selected callback function.
* </Pre>
**/
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 ",
Input: "# ui-fs. ui-fs-input ",
InputContainer: "# ui-fs. ui-fs-input ",
DropDownListContainer: "# ui-fs. ui-fs-list ",
Inputdefatip tip: "enter a friend name (full join is supported )",
NoDataTip: "This friend does not exist in your friend list ",
AjaxUrl: "ajax. asp ",
AjaxLoadAllUrl: "ajax. asp ",
AjaxGetCountUrl: "ajaxcount. asp ",
AjaxGetFriendTypeUrl: "ajaxFriendType. asp ",
TotalSelectNum: 30,
AjaxBefore: null,
AjaxError: null,
SelectType: "multiple ",
SelectCallBack: null
};

6. Call method:

When the DOM structure is not changed, the call is very simple.
Var test = new giant. ui. friendsuggest ();
Of course, it should be placed in $ (document). ready (function () {}); otherwise, the corresponding DOM cannot be found.
If you need to modify the parameters, you can view the default parameters above.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> friend selection </title> <link href =" http://img.jb51.net/jslib/ui.friendsuggest.css "rel =" stylesheet "type =" text/css "/> </pead> <body style = "margin: 20px; width: 500px; "> <br> multiple choice mode: <input type =" text "value =" Enter friend name (full join input is supported) "maxlength =" 30 "/> View All friends loading .... <select id = "ui-fs-friendtype"> <option value = "-1"> close all friends </option> </select> <B> 30 </B> Users can choose to load data on the next page of the previous page... <br> Single-choice mode <input type = "text" value = "Enter friend name (full join input is supported) "maxlength =" 30 "/> View All friends loading .... <select id = "ui-fs-friendtype2"> <option value = "-1"> all friends </option> </select> close you can select <B> 1 </B> people loading data on the previous page... <br>©Playgoogle.com </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Package download