亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

click-input的實現(xiàn)

crossea / 2753人閱讀

摘要：的實現(xiàn)照例不知道這個功能叫什么名字好，姑且取名叫做。點擊更多按鈕后，展開所有的列表項實現(xiàn)思路依賴。事件驅(qū)動，對不同的功能分別進行處理。輸入內(nèi)容后同步狀態(tài)的功能完成。另外為列表的高度設(shè)置為行字符內(nèi)，同時。如果沒有選中，則進行正常的流程。

click-input的實現(xiàn)

照例不知道這個功能叫什么名字好，姑且取名叫做click-input。事實上這是公司的一個項目，我司的后臺管理面板都是后端在處理，他們在做一個關(guān)鍵詞選擇的時候，想要實現(xiàn)一些更豐富的效果，所以我做了這個東西。

可以在這里看demo：click-input

預(yù)覽圖：

實現(xiàn)的功能

打開頁面時，關(guān)鍵詞的input框中已有的內(nèi)容，如果‘常用關(guān)鍵詞’中也有，就會切換到選中效果

更新關(guān)鍵詞input框中的內(nèi)容時，如果手動輸入的關(guān)鍵詞符合‘常用關(guān)鍵詞’中的列表項，也會切換到選中效果；如果刪除這個關(guān)鍵詞或者其他符合的關(guān)鍵詞，‘常用關(guān)鍵詞’中的選中效果也會發(fā)生相應(yīng)的改變

點擊‘常用關(guān)鍵詞’中的列表項，會將其添加到‘關(guān)鍵詞’input框中

列表項超過10個，初始狀態(tài)只顯示兩行。點擊‘更多’按鈕后，展開所有的列表項

實現(xiàn)思路

依賴JQurey。

事件驅(qū)動，對不同的功能分別進行處理。實現(xiàn)一個公共的函數(shù)renewKeywords();，用來處理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

這個函數(shù)會多次用到。


首先獲取input框里的內(nèi)容，然后將內(nèi)容保存為一個數(shù)組。先移除所有列表項的選中狀態(tài)，通過遍歷對所有的列表項進行比較，給所有選中的項目設(shè)置選中狀態(tài)。


這就是這個函數(shù)的基本功能。

1.input框

    $("#keyWords").bind("input propertychange", function() {
        renewKeywords();
    });


貌似IE和其他瀏覽器的處理不同。但使用JQurey的話，只需要綁定input事件和propertychange，每一次input中內(nèi)容的改變都會觸發(fā)這個事件，然后調(diào)用renewKeywords();這個函數(shù)。


輸入內(nèi)容后同步狀態(tài)的功能完成。

初始狀態(tài)同步

input中的內(nèi)容在打開頁面時不總是空的，所以還需要實現(xiàn)一個初始狀態(tài)同步的功能，打開頁面時把input中的內(nèi)容同步到列表項中的選中狀態(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)選中的項目*/
    renewKeywords();


這里通過一個數(shù)組，遍歷列表中的內(nèi)容，之后調(diào)用renewKeywords()方法，就完成了初始化選中狀態(tài)的功能；

2.‘更多’按鈕的實現(xiàn)

    /*‘更多’按鈕*/
    if($(".keywords li").length>10){
        $("#more_button").show();
    }//li多于10個才顯示‘更多’按鈕
    $("#more_button").on("click",function () {
        $(".keywords ul").css("height","auto");
        $("#more_button").hide();
    })//點擊后隱藏


實現(xiàn)思路是把按鈕先寫在html中，設(shè)置display:none;。另外為列表的高度設(shè)置為3行字符內(nèi)，同時overflow:hidden。


這樣就實現(xiàn)了隱藏過多內(nèi)容的功能。


展開列表項：判斷列表項超過10個，調(diào)用JQurey的.show()方法顯示‘更多’按鈕；點擊‘更多’按鈕后，通過設(shè)置列表的高度為auto，去除了對列表的高度限制，列表也自然是展開狀態(tài)了。


‘更多’按鈕的功能完成。

點擊列表項添加到input中的功能

    /*點擊li后，添加到input中，同時應(yīng)用選中樣式*/
    $(".keywords li").on("click",function () {
        var li = $(this),
            text = this.innerText;
            texts = document.getElementById("keyWords").value.split(" ");
        for(var i = 0;i

為所有的列表項綁定點擊事件，這是基本的操作。


思路是先獲取input中已有的內(nèi)容，轉(zhuǎn)換為數(shù)組，將點擊的內(nèi)容push到數(shù)組中，然后將數(shù)組中的內(nèi)容更新到input中。


這里還有一個點擊已選中的列表項將其設(shè)置為未選中狀態(tài)的功能需要先處理。也是通過循環(huán)，對每一項進行對比，如果是選中狀態(tài)，則從數(shù)組里移除這一項，同時設(shè)置其為未選中狀態(tài)。將新的數(shù)組內(nèi)容設(shè)置為input框中的內(nèi)容，然后通過return直接結(jié)束掉這一次點擊事件。


如果沒有選中，則進行正常的流程。push列表項的內(nèi)容到數(shù)組中，改變選中狀態(tài)，設(shè)置input框中值。

One more thing

文章已同步在我的blog：點擊這里


整個功能的實現(xiàn)就是這樣了。100行代碼不到，功能很簡單，但是自己感覺還有提高的空間。比如循環(huán)用的太頻繁是不是會影響性能，應(yīng)該怎樣改進？是否有更好的實現(xiàn)方式？


目前實習(xí)時間兩個月，還有很多需要學(xué)習(xí)的地方。比如想封裝一些基礎(chǔ)小功能的庫，是否用閉包會更好？


最后，感謝閱讀！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/88470.html

相關(guān)文章

  • Dubbo SPI機制和IOC

    摘要：要構(gòu)建自適應(yīng)實例，先要有自適應(yīng)的實現(xiàn)類，實現(xiàn)類有兩種方式一種通過配置文件，一種是通過是字節(jié)碼的方式動態(tài)生成。 SPI機制 SPI，即(service provider interface)機制，有很多組件的實現(xiàn)，如日志、數(shù)據(jù)庫訪問等都是采用這樣的方式，一般通用組件為了提升可擴展性，基于接口編程，將操作接口形成標(biāo)準(zhǔn)規(guī)范，但是可以開放多種擴展實現(xiàn)，這種做法也符合開閉設(shè)計原則，使組件具有可插...

    Scorpion 評論0 收藏0

  • 練習(xí)項目備選清單

    摘要：練習(xí)項目備選清單文件下載器功能概要設(shè)計實現(xiàn)新建下載功能以為基礎(chǔ)給出下載鏈接可以啟動下載任務(wù)實現(xiàn)局域網(wǎng)內(nèi)下載傳輸文件以單線程下載方式實現(xiàn)附加功能支持?jǐn)帱c續(xù)傳實現(xiàn)多線程下載實現(xiàn)下載參考技術(shù)套接字編程多線程編程音視頻播放器功能概要設(shè)計實現(xiàn)播放常見 練習(xí)項目備選清單 Utilities 1. 文件下載器 功能概要設(shè)計： 實現(xiàn)新建下載功能（以ftp為基礎(chǔ)） 給出下載鏈接可以啟動下載任務(wù) 實現(xiàn)局...

    guyan0319 評論0 收藏0

  • 練習(xí)項目備選清單

    摘要：練習(xí)項目備選清單文件下載器功能概要設(shè)計實現(xiàn)新建下載功能以為基礎(chǔ)給出下載鏈接可以啟動下載任務(wù)實現(xiàn)局域網(wǎng)內(nèi)下載傳輸文件以單線程下載方式實現(xiàn)附加功能支持?jǐn)帱c續(xù)傳實現(xiàn)多線程下載實現(xiàn)下載參考技術(shù)套接字編程多線程編程音視頻播放器功能概要設(shè)計實現(xiàn)播放常見 練習(xí)項目備選清單 Utilities 1. 文件下載器 功能概要設(shè)計： 實現(xiàn)新建下載功能（以ftp為基礎(chǔ)） 給出下載鏈接可以啟動下載任務(wù) 實現(xiàn)局...

    peixn 評論0 收藏0

  • 前端路由原理解析和實現(xiàn)

    摘要：如何實現(xiàn)前端路由要實現(xiàn)前端路由，需要解決兩個核心如何改變卻不引起頁面刷新如何檢測變化了下面分別使用和兩種實現(xiàn)方式回答上面的兩個核心問題。 原文鏈接：github.com/whinc/blog/… 在單頁應(yīng)用如此流行的今天，曾經(jīng)令人驚嘆的前端路由已經(jīng)成為各大框架的基礎(chǔ)標(biāo)配，每個框架都提供了強大的路由功能，導(dǎo)致路由實現(xiàn)變的復(fù)雜。想要搞懂路由內(nèi)部實現(xiàn)還是有些困難的，但是如果只想了解路由實現(xiàn)基本...

    lavor 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<