基于Jquery 好友選擇器V2.0
1.代碼風(fēng)格
我的組件是作為一個(gè)Jquery 的插件來(lái)做的。把整個(gè)組件做為一個(gè)類(lèi)來(lái)處理。這樣也方便在一個(gè)頁(yè)面上多個(gè)好友選擇器共存而不相互影響。
所有需要寫(xiě)的參數(shù)都在最下面的giant.ui.friendsuggest.defaults 中給了默認(rèn)值。在未傳入?yún)?shù)時(shí)，會(huì)調(diào)用默認(rèn)值。另外，在以下劃線(xiàn)開(kāi)頭的方法，我約定為私有方法，理論上不允許外部調(diào)用它們。
2.Dom結(jié)構(gòu)
我的DOM結(jié)構(gòu)沒(méi)有在JS里面構(gòu)造出來(lái)，而是預(yù)先下載xhtml頁(yè)面里面。主要考慮當(dāng)JS不可用時(shí)，至少能保證基本的搜索功能。這也符合“漸進(jìn)增強(qiáng)”的思想。
<div id="ui-fs" class="ui-fs">
<div class="ui-fs-result clearfix">
</div>
<div class="ui-fs-input">
<input type="text" value="輸入好友姓名(支持全拼輸入)" maxlength="30" />
<a class="ui-fs-icon" href="javascript:void(0)" title="查看所有好友">查看所有好友</a>
</div>
<div class="ui-fs-list">
數(shù)據(jù)加載中....
</div>
<div class="ui-fs-all">
<div class="top">
<select id="ui-fs-friendtype"><option value="-1">所有好友</option></select>
<div class="close" title="關(guān)閉">關(guān)閉</div>
</div>
<div class="ui-fs-allinner">
<div class="page clearfix">
<div class="llight1">還有<b>30</b>人可選</div><div class="button"><span class="prev">上一頁(yè)</span><span class="next">下一頁(yè)</span></div>
</div>
<div class="list clearfix">
數(shù)據(jù)加載中...
</div>
</div>
</div>
</div>
3.數(shù)據(jù)格式
請(qǐng)求了3種不同的數(shù)據(jù)，首先是好友類(lèi)別數(shù)據(jù)，在剛初始化組件的時(shí)候去獲取，JSON 格式，格式為
[{name:'以前的同事',id:'1'},{name:'現(xiàn)在的同事',id:'2'}]
然后是對(duì)應(yīng)好友類(lèi)別的好友總數(shù)，用來(lái)在點(diǎn)擊彈出所有好友時(shí)做分頁(yè)使用。數(shù)據(jù)格式為Int型，直接輸出一個(gè)數(shù)字就行了。獲取數(shù)據(jù)時(shí)使用的參數(shù)為typeId,即好友類(lèi)別的ID，為-1時(shí)獲取所有好友的總數(shù)。
最后是好友列表數(shù)據(jù)，也是JSON格式。格式為：
[{fUid:1,friendUserName:'karry',friendHeadPic:'images/1.jpg'},{fUid:2,friendUserName:'kaliy',friendHeadPic:'images/2.jpg'}]
數(shù)據(jù)的獲取分兩種情況。
一種是輸入框中輸入字符時(shí)獲取的數(shù)據(jù)，用name參數(shù)來(lái)存放輸入框中輸入的內(nèi)容。
第二種是點(diǎn)擊右側(cè)按鈕出現(xiàn)的所有好友的情況，由于涉及到分頁(yè)、下拉列表框的過(guò)濾等，所以參數(shù)比較多，有三個(gè)參數(shù)：typeId、p、pageSize typeId代表當(dāng)前的類(lèi)別，p代表當(dāng)前的頁(yè)碼，pageSize 代表每頁(yè)顯示的人數(shù)。
4 功能簡(jiǎn)介
組件支持多選和單選兩種模式，在初始化組件時(shí)通過(guò)傳入?yún)?shù)來(lái)控制。默認(rèn)是多選。在單選模式下可以傳入一個(gè)回調(diào)函數(shù)，即當(dāng)選中某一好友時(shí)觸發(fā)。
整個(gè)組件最核心的部分是對(duì)事件的監(jiān)聽(tīng)和對(duì)數(shù)據(jù)的異步獲取，組件涉及到了focus、blur、click、keyup，change 五個(gè)事件。我在代碼里面是把這五類(lèi)事件分開(kāi)放在不同的私有方法里面去綁定的。分別是： _clickBind();_focusBind();_blurBind(); _keyUpBind(); _selectChangeBind();
其中對(duì)input進(jìn)行鍵盤(pán)事件的監(jiān)聽(tīng)是最復(fù)雜的，要考慮到多種情況。通常沒(méi)輸入一個(gè)鍵都要去后臺(tái)請(qǐng)求一次數(shù)據(jù)，但需要對(duì)上下左右方向鍵和回車(chē)鍵做不同的處理，大家可以直接看源代碼來(lái)了解。
另外一個(gè)比較重要的處理就是重復(fù)選擇的好友會(huì)通過(guò)閃動(dòng)顏色來(lái)提示。這里主要是通過(guò)setInterval()來(lái)實(shí)現(xiàn)
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);
多選模式下選中的好友可以通過(guò) getResult()方法來(lái)獲取，返回一個(gè)存放好友id的數(shù)組。
5.默認(rèn)參數(shù)：
前面大部分參數(shù)主要是對(duì)DOM中對(duì)應(yīng)的按鈕和容器進(jìn)行指定 ，在大家不改變DOM結(jié)構(gòu)的前提下是不需要改動(dòng)這些參數(shù)的。
/**
* 默認(rèn)參數(shù)
* <pre>
* totalSelectNum 多選模式下，最多選取人數(shù)，默認(rèn)為30
* selectType 選擇模式，默認(rèn)為多選"multiple",若為單選，則用single
* selectCallBack 單選模式下，選中之后的回調(diào)函數(shù)。
* </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 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.調(diào)用方式：
在DOM結(jié)構(gòu)沒(méi)變的情況下，調(diào)用非常簡(jiǎn)單。
var test = new giant.ui.friendsuggest();
當(dāng)然，應(yīng)該放在$(document).ready(function(){})里面，否則找不到對(duì)應(yīng)的DOM。
如果需要修改參數(shù)，就查看上面的默認(rèn)的參數(shù)，哪個(gè)需要改，就傳入哪個(gè)。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
打包下載
相關(guān)文章
jQuery實(shí)現(xiàn)從身份證號(hào)中獲取出生日期和性別的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)從身份證號(hào)中獲取出生日期和性別的方法,結(jié)合實(shí)例形式分析了jQuery數(shù)學(xué)運(yùn)算與字符串操作相關(guān)技巧,需要的朋友可以參考下2016-02-02
Jquery檢驗(yàn)手機(jī)號(hào)是否符合規(guī)則并根據(jù)手機(jī)號(hào)檢測(cè)結(jié)果將提交按鈕設(shè)為不同狀態(tài)
接了個(gè)項(xiàng)目做，需要是這樣的：輸入手機(jī)號(hào)，實(shí)時(shí)判斷輸入的手機(jī)號(hào)是否符合規(guī)則，如果不符合怎么處理，符合又怎么處理等一系列問(wèn)題，本篇文章給大家介紹Jquery檢驗(yàn)手機(jī)號(hào)是否符合規(guī)則并根據(jù)手機(jī)號(hào)檢測(cè)結(jié)果將提交按鈕設(shè)為不同狀態(tài)，感興趣的朋友參考下2015-11-11
NiftyCube——輕松實(shí)現(xiàn)圓角邊框
這篇文章主要介紹了NiftyCube——輕松實(shí)現(xiàn)圓角邊框2007-02-02
jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件,結(jié)合實(shí)例形式詳細(xì)分析了jQuery基于移動(dòng)端的圖片縮放功能組件實(shí)現(xiàn)原理、步驟、核心代碼及使用技巧,需要的朋友可以參考下2020-05-05
jQuery+PHP+MySQL二級(jí)聯(lián)動(dòng)下拉菜單實(shí)例講解
這篇文章主要介紹了一款jQuery+PHP+MySQL三者結(jié)合實(shí)現(xiàn)的二級(jí)聯(lián)動(dòng)下拉菜單，需要的朋友可以參考下2015-10-10
前端時(shí)間寫(xiě)項(xiàng)目用到了ajaxForm這個(gè)插件，可以用它提交表單和上傳圖片，聽(tīng)起來(lái)和正常的form表單提交沒(méi)什么區(qū)別，只不過(guò)是ajax提交，無(wú)需刷新頁(yè)面,下面通過(guò)實(shí)例給大家介紹jQuery表單插件ajaxForm，需要的朋友參考下吧2017-01-01
這篇文章主要介紹了jquery實(shí)現(xiàn)文本框的文本自動(dòng)補(bǔ)全效果,大家參考使用吧2014-01-01
基于jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊導(dǎo)航菜單水波動(dòng)畫(huà)效果附源碼下載
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊導(dǎo)航菜單水波動(dòng)畫(huà)效果附源碼下載，需要的朋友參考下2016-01-01
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI表單驗(yàn)證
輕松學(xué)習(xí)jQuery插件EasyUI，本文的重點(diǎn)在于EasyUI表單驗(yàn)證，并告訴大家如何提交表單，感興趣的小伙伴們可以參考一下2015-12-12
父頁(yè)面顯示遮罩層彈出半透明狀態(tài)的dialog
本文為大家介紹下父頁(yè)面顯示遮罩層，彈出半透明狀態(tài)的dialog。dialog即彈出的子頁(yè)面,需要的朋友可以參考下2014-03-03