資訊專欄INFORMATION COLUMN
摘要：的實(shí)現(xiàn)照例不知道這個(gè)功能叫什么名字好，姑且取名叫做。點(diǎn)擊更多按鈕后，展開所有的列表項(xiàng)實(shí)現(xiàn)思路依賴。事件驅(qū)動(dòng)，對(duì)不同的功能分別進(jìn)行處理。輸入內(nèi)容后同步狀態(tài)的功能完成。另外為列表的高度設(shè)置為行字符內(nèi)，同時(shí)。如果沒(méi)有選中，則進(jìn)行正常的流程。
click-input的實(shí)現(xiàn)
照例不知道這個(gè)功能叫什么名字好，姑且取名叫做click-input。事實(shí)上這是公司的一個(gè)項(xiàng)目，我司的后臺(tái)管理面板都是后端在處理，他們?cè)谧鲆粋€(gè)關(guān)鍵詞選擇的時(shí)候，想要實(shí)現(xiàn)一些更豐富的效果，所以我做了這個(gè)東西。
可以在這里看demo：click-input
預(yù)覽圖：
實(shí)現(xiàn)的功能打開頁(yè)面時(shí)，關(guān)鍵詞的input框中已有的內(nèi)容，如果‘常用關(guān)鍵詞’中也有，就會(huì)切換到選中效果
更新關(guān)鍵詞input框中的內(nèi)容時(shí)，如果手動(dòng)輸入的關(guān)鍵詞符合‘常用關(guān)鍵詞’中的列表項(xiàng)，也會(huì)切換到選中效果；如果刪除這個(gè)關(guān)鍵詞或者其他符合的關(guān)鍵詞，‘常用關(guān)鍵詞’中的選中效果也會(huì)發(fā)生相應(yīng)的改變
點(diǎn)擊‘常用關(guān)鍵詞’中的列表項(xiàng)，會(huì)將其添加到‘關(guān)鍵詞’input框中
列表項(xiàng)超過(guò)10個(gè)，初始狀態(tài)只顯示兩行。點(diǎn)擊‘更多’按鈕后，展開所有的列表項(xiàng)
實(shí)現(xiàn)思路依賴JQurey。
事件驅(qū)動(dòng)，對(duì)不同的功能分別進(jìn)行處理。實(shí)現(xiàn)一個(gè)公共的函數(shù)renewKeywords();，用來(lái)處理input中的內(nèi)容和列表中選中內(nèi)容的同步。
function renewKeywords() {
var keyWord = document.getElementById("keyWords").value;
var keyWords = keyWord.split(" ");
$(".keywords li").removeClass("active");
texts = [];
for(var i = 0;i
這個(gè)函數(shù)會(huì)多次用到。
首先獲取input框里的內(nèi)容，然后將內(nèi)容保存為一個(gè)數(shù)組。先移除所有列表項(xiàng)的選中狀態(tài)，通過(guò)遍歷對(duì)所有的列表項(xiàng)進(jìn)行比較，給所有選中的項(xiàng)目設(shè)置選中狀態(tài)。
這就是這個(gè)函數(shù)的基本功能。
1.input框
$("#keyWords").bind("input propertychange", function() {
renewKeywords();
});
貌似IE和其他瀏覽器的處理不同。但使用JQurey的話，只需要綁定input事件和propertychange，每一次input中內(nèi)容的改變都會(huì)觸發(fā)這個(gè)事件，然后調(diào)用renewKeywords();這個(gè)函數(shù)。
輸入內(nèi)容后同步狀態(tài)的功能完成。
初始狀態(tài)同步
input中的內(nèi)容在打開頁(yè)面時(shí)不總是空的，所以還需要實(shí)現(xiàn)一個(gè)初始狀態(tài)同步的功能，打開頁(yè)面時(shí)把input中的內(nèi)容同步到列表項(xiàng)中的選中狀態(tài)；
var liKeyWords = [];
for(var i = 0;i<$(".keywords li").length;i++){
liKeyWords.push($(".keywords li")[i].innerText);
}//遍歷li標(biāo)簽，保存innerText到數(shù)組中
/*初始化已經(jīng)選中的項(xiàng)目*/
renewKeywords();
這里通過(guò)一個(gè)數(shù)組，遍歷列表中的內(nèi)容，之后調(diào)用renewKeywords()方法，就完成了初始化選中狀態(tài)的功能；
2.‘更多’按鈕的實(shí)現(xiàn)
/*‘更多’按鈕*/
if($(".keywords li").length>10){
$("#more_button").show();
}//li多于10個(gè)才顯示‘更多’按鈕
$("#more_button").on("click",function () {
$(".keywords ul").css("height","auto");
$("#more_button").hide();
})//點(diǎn)擊后隱藏
實(shí)現(xiàn)思路是把按鈕先寫在html中，設(shè)置display:none;。另外為列表的高度設(shè)置為3行字符內(nèi)，同時(shí)overflow:hidden。
這樣就實(shí)現(xiàn)了隱藏過(guò)多內(nèi)容的功能。
展開列表項(xiàng)：判斷列表項(xiàng)超過(guò)10個(gè)，調(diào)用JQurey的.show()方法顯示‘更多’按鈕；點(diǎn)擊‘更多’按鈕后，通過(guò)設(shè)置列表的高度為auto，去除了對(duì)列表的高度限制，列表也自然是展開狀態(tài)了。
‘更多’按鈕的功能完成。
點(diǎn)擊列表項(xiàng)添加到input中的功能
/*點(diǎn)擊li后，添加到input中，同時(shí)應(yīng)用選中樣式*/
$(".keywords li").on("click",function () {
var li = $(this),
text = this.innerText;
texts = document.getElementById("keyWords").value.split(" ");
for(var i = 0;i
為所有的列表項(xiàng)綁定點(diǎn)擊事件，這是基本的操作。
思路是先獲取input中已有的內(nèi)容，轉(zhuǎn)換為數(shù)組，將點(diǎn)擊的內(nèi)容push到數(shù)組中，然后將數(shù)組中的內(nèi)容更新到input中。
這里還有一個(gè)點(diǎn)擊已選中的列表項(xiàng)將其設(shè)置為未選中狀態(tài)的功能需要先處理。也是通過(guò)循環(huán)，對(duì)每一項(xiàng)進(jìn)行對(duì)比，如果是選中狀態(tài)，則從數(shù)組里移除這一項(xiàng)，同時(shí)設(shè)置其為未選中狀態(tài)。將新的數(shù)組內(nèi)容設(shè)置為input框中的內(nèi)容，然后通過(guò)return直接結(jié)束掉這一次點(diǎn)擊事件。
如果沒(méi)有選中，則進(jìn)行正常的流程。push列表項(xiàng)的內(nèi)容到數(shù)組中，改變選中狀態(tài)，設(shè)置input框中值。
One more thing
文章已同步在我的blog：點(diǎn)擊這里
整個(gè)功能的實(shí)現(xiàn)就是這樣了。100行代碼不到，功能很簡(jiǎn)單，但是自己感覺(jué)還有提高的空間。比如循環(huán)用的太頻繁是不是會(huì)影響性能，應(yīng)該怎樣改進(jìn)？是否有更好的實(shí)現(xiàn)方式？
目前實(shí)習(xí)時(shí)間兩個(gè)月，還有很多需要學(xué)習(xí)的地方。比如想封裝一些基礎(chǔ)小功能的庫(kù)，是否用閉包會(huì)更好？
最后，感謝閱讀！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88470.html
摘要：要構(gòu)建自適應(yīng)實(shí)例，先要有自適應(yīng)的實(shí)現(xiàn)類，實(shí)現(xiàn)類有兩種方式一種通過(guò)配置文件，一種是通過(guò)是字節(jié)碼的方式動(dòng)態(tài)生成。 SPI機(jī)制 SPI，即(service provider interface)機(jī)制，有很多組件的實(shí)現(xiàn)，如日志、數(shù)據(jù)庫(kù)訪問(wèn)等都是采用這樣的方式，一般通用組件為了提升可擴(kuò)展性，基于接口編程，將操作接口形成標(biāo)準(zhǔn)規(guī)范，但是可以開放多種擴(kuò)展實(shí)現(xiàn)，這種做法也符合開閉設(shè)計(jì)原則，使組件具有可插...
摘要：練習(xí)項(xiàng)目備選清單文件下載器功能概要設(shè)計(jì)實(shí)現(xiàn)新建下載功能以為基礎(chǔ)給出下載鏈接可以啟動(dòng)下載任務(wù)實(shí)現(xiàn)局域網(wǎng)內(nèi)下載傳輸文件以單線程下載方式實(shí)現(xiàn)附加功能支持?jǐn)帱c(diǎn)續(xù)傳實(shí)現(xiàn)多線程下載實(shí)現(xiàn)下載參考技術(shù)套接字編程多線程編程音視頻播放器功能概要設(shè)計(jì)實(shí)現(xiàn)播放常見 練習(xí)項(xiàng)目備選清單 Utilities 1. 文件下載器 功能概要設(shè)計(jì)： 實(shí)現(xiàn)新建下載功能（以ftp為基礎(chǔ)） 給出下載鏈接可以啟動(dòng)下載任務(wù) 實(shí)現(xiàn)局...
摘要：練習(xí)項(xiàng)目備選清單文件下載器功能概要設(shè)計(jì)實(shí)現(xiàn)新建下載功能以為基礎(chǔ)給出下載鏈接可以啟動(dòng)下載任務(wù)實(shí)現(xiàn)局域網(wǎng)內(nèi)下載傳輸文件以單線程下載方式實(shí)現(xiàn)附加功能支持?jǐn)帱c(diǎn)續(xù)傳實(shí)現(xiàn)多線程下載實(shí)現(xiàn)下載參考技術(shù)套接字編程多線程編程音視頻播放器功能概要設(shè)計(jì)實(shí)現(xiàn)播放常見 練習(xí)項(xiàng)目備選清單 Utilities 1. 文件下載器 功能概要設(shè)計(jì)： 實(shí)現(xiàn)新建下載功能（以ftp為基礎(chǔ)） 給出下載鏈接可以啟動(dòng)下載任務(wù) 實(shí)現(xiàn)局...
摘要：如何實(shí)現(xiàn)前端路由要實(shí)現(xiàn)前端路由，需要解決兩個(gè)核心如何改變卻不引起頁(yè)面刷新如何檢測(cè)變化了下面分別使用和兩種實(shí)現(xiàn)方式回答上面的兩個(gè)核心問(wèn)題。 原文鏈接：github.com/whinc/blog/… 在單頁(yè)應(yīng)用如此流行的今天，曾經(jīng)令人驚嘆的前端路由已經(jīng)成為各大框架的基礎(chǔ)標(biāo)配，每個(gè)框架都提供了強(qiáng)大的路由功能，導(dǎo)致路由實(shí)現(xiàn)變的復(fù)雜。想要搞懂路由內(nèi)部實(shí)現(xiàn)還是有些困難的，但是如果只想了解路由實(shí)現(xiàn)基本...
閱讀 3240·2021-11-24 09:39
閱讀 3179·2021-10-21 09:38
閱讀 2406·2019-08-29 15:28
閱讀 3749·2019-08-26 12:23
閱讀 2624·2019-08-26 12:19
閱讀 1369·2019-08-23 12:44
閱讀 2135·2019-08-23 12:02
閱讀 1007·2019-08-22 17:05
