摘要:文章一步步做組件學(xué)校選擇器版本添加自定義事件,即使用觀察者模式。文章一步步做組件學(xué)校選擇器版本后增實(shí)現(xiàn)學(xué)校選擇器的模態(tài)對(duì)話框,并在頁(yè)面中共用同一個(gè)選擇器對(duì)象。監(jiān)聽(tīng)時(shí)判斷,回調(diào)時(shí)判斷,文章一步步做組件學(xué)校選擇器
前言
年初的時(shí)候?qū)戇^(guò)一個(gè)js組件的系列文章,博客原文地址為 http://jsorz.cn/blog/2015/02/step-by-step-js-component-schoolbox-collections.html 由于博客架在github的免費(fèi)主頁(yè)上,github把百度爬蟲(chóng)拉黑了,所以訪問(wèn)量一直挺低的。現(xiàn)移步sf,希望一起多多交流,共同成長(zhǎng),謝謝!
版本1只是簡(jiǎn)單的界面設(shè)計(jì),靜態(tài)排版,沒(méi)有js部分。
Demo:demo v1
文章:穿插在第一篇中
版本2加入了js部分,實(shí)現(xiàn)了省和學(xué)校的級(jí)聯(lián)。
Demo:demo v2
文章:一步步做組件-學(xué)校選擇器(1)
版本3把版本2的js代碼寫(xiě)成組件的結(jié)構(gòu)。
Demo:demo v3
文章:一步步做組件-學(xué)校選擇器(2)
版本4添加自定義事件,即使用觀察者模式。
Demo:demo v4
文章:一步步做組件-學(xué)校選擇器(3)
版本5加入學(xué)校搜索框的功能,使用的是本地?cái)?shù)據(jù),也可以Ajax請(qǐng)求。
Demo:demo v5
文章:一步步做組件-學(xué)校選擇器(4)
版本6為搜索結(jié)果添加按鍵效果,即通過(guò)“上”“下”鍵選中,“回車(chē)”鍵確定。
Demo:demo v6
文章:一步步做組件-學(xué)校選擇器(5)
版本7附加功能,添加自定義學(xué)校。
Demo:demo v7
文章:一步步做組件-學(xué)校選擇器(6)
版本8(后增)實(shí)現(xiàn)學(xué)校選擇器的模態(tài)對(duì)話框,并在頁(yè)面中共用同一個(gè)選擇器對(duì)象。
Demo:demo v8
文章:一步步做組件-學(xué)校選擇器(7)
版本9 & 10(補(bǔ)充)頁(yè)面上多個(gè)元素共享同一個(gè)模態(tài)對(duì)話框,在觸發(fā)事件時(shí)加入“由哪個(gè)監(jiān)聽(tīng)元素觸發(fā)”,以避免對(duì)所有監(jiān)聽(tīng)元素都做出響應(yīng)。
監(jiān)聽(tīng)時(shí)判斷,Demo:demo v9
回調(diào)時(shí)判斷,Demo:demo v10
文章:一步步做組件-學(xué)校選擇器(8)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/78251.html
摘要:前提好幾周沒(méi)更新博客了,對(duì)不斷支持我博客的童鞋們說(shuō)聲抱歉了。熟悉我的人都知道我寫(xiě)博客的時(shí)間比較早,而且堅(jiān)持的時(shí)間也比較久,一直到現(xiàn)在也是一直保持著更新?tīng)顟B(tài)。 showImg(https://segmentfault.com/img/remote/1460000014076586?w=1920&h=1080); 前提 好幾周沒(méi)更新博客了,對(duì)不斷支持我博客的童鞋們說(shuō)聲:抱歉了!。自己這段時(shí)...
摘要:一個(gè)前端菜鳥(niǎo)的成長(zhǎng)記現(xiàn)在才總結(jié)似乎有點(diǎn)晚,但聊勝于無(wú),記錄一下我的,畢業(yè)的第一年,對(duì)于人生意義重大的一年。感謝勇哥新哥,給予我機(jī)會(huì)去做更多的嘗試。 一個(gè)前端菜鳥(niǎo)的成長(zhǎng)記 現(xiàn)在才總結(jié)似乎有點(diǎn)晚,但聊勝于無(wú),記錄一下我的2016,畢業(yè)的第一年,對(duì)于人生意義重大的一年。 我的求職之路 打從進(jìn)入了大四之后,便深深的意識(shí)到了就業(yè)的壓力,并一直在做著邁向社會(huì)的準(zhǔn)備。從2015年9月開(kāi)始,便開(kāi)始投簡(jiǎn)...
摘要:組件已經(jīng)有了,我們的框架還有哪些特性呢自適應(yīng)自適應(yīng)現(xiàn)在很多框架都沒(méi)有自適應(yīng)功能,而很多使用場(chǎng)景也在手機(jī)上會(huì)有,這也是后臺(tái)管理框架誕生的原因之一。 系列教程《一步步帶你做vue后臺(tái)管理框架》第一課 github地址:vue-framework-wz線上體驗(yàn)地址:立即體驗(yàn)??《一步步帶你做vue后臺(tái)管理框架》第一課:介紹框架《一步步帶你做vue后臺(tái)管理框架》第二課:上手使用《一步步帶你做v...
摘要:當(dāng)然這不是只限于使用或者其他打包工具的方式都能支持使用優(yōu)點(diǎn)模塊化和可重用性沒(méi)有沖突顯性依賴(lài)不會(huì)污染全局可以配合預(yù)處理器使用少開(kāi)發(fā)單獨(dú)文件寫(xiě)法基本一致 To define is to limit. 定義一樣?xùn)|西,就意味著限制了它。——王爾德 《道林·格雷的畫(huà)像》 React系列 React系列 --- 簡(jiǎn)單模擬語(yǔ)法(一)React系列 --- Jsx, 合成事件與Refs(二)Reac...
摘要:年求職面經(jīng)及總結(jié)我的求職之路差不多走到盡頭了感覺(jué)真是精疲力盡了把這大半年的經(jīng)歷和面試總結(jié)寫(xiě)下來(lái)希望能給和我一樣在求職路上煎熬的人一點(diǎn)幫助先說(shuō)背景微電子科學(xué)與工程專(zhuān)業(yè)學(xué)過(guò)兩門(mén)和相關(guān)的課程語(yǔ)言和單片機(jī)這個(gè)專(zhuān)業(yè)的唯一好處就是大部分人并不知道這個(gè)專(zhuān) 18年求職面經(jīng)及總結(jié) 我的求職之路差不多走到盡頭了,感覺(jué)真是精疲力盡了.把這大半年的經(jīng)歷和面試總結(jié)寫(xiě)下來(lái),希望能給和我一樣在求職路上煎熬的人一點(diǎn)幫...
閱讀 7775·2023-04-25 14:36
閱讀 1788·2021-11-22 09:34
閱讀 2176·2019-08-30 15:55
閱讀 3167·2019-08-30 11:19
閱讀 1328·2019-08-29 15:17
閱讀 574·2019-08-29 12:47
閱讀 3024·2019-08-26 13:38
閱讀 2653·2019-08-26 11:00