一步步做組件-學校選擇器(系列)

galois 發布于2019-08-19 17:10 / 3718人閱讀

摘要：文章一步步做組件學校選擇器版本添加自定義事件，即使用觀察者模式。文章一步步做組件學校選擇器版本后增實現學校選擇器的模態對話框，并在頁面中共用同一個選擇器對象。監聽時判斷，回調時判斷，文章一步步做組件學校選擇器

前言

年初的時候寫過一個js組件的系列文章，博客原文地址為 http://jsorz.cn/blog/2015/02/step-by-step-js-component-schoolbox-collections.html 由于博客架在github的免費主頁上，github把百度爬蟲拉黑了，所以訪問量一直挺低的。現移步sf，希望一起多多交流，共同成長，謝謝！

版本1

只是簡單的界面設計，靜態排版，沒有js部分。

Demo：demo v1

文章：穿插在第一篇中

版本2

加入了js部分，實現了省和學校的級聯。

Demo：demo v2

文章：一步步做組件-學校選擇器(1)

版本3

把版本2的js代碼寫成組件的結構。

Demo：demo v3

文章：一步步做組件-學校選擇器(2)

版本4

添加自定義事件，即使用觀察者模式。

Demo：demo v4

文章：一步步做組件-學校選擇器(3)

版本5

加入學校搜索框的功能，使用的是本地數據，也可以Ajax請求。

Demo：demo v5

文章：一步步做組件-學校選擇器(4)

版本6

為搜索結果添加按鍵效果，即通過“上”“下”鍵選中，“回車”鍵確定。

Demo：demo v6

文章：一步步做組件-學校選擇器(5)

版本7

附加功能，添加自定義學校。

Demo：demo v7

文章：一步步做組件-學校選擇器(6)

版本8（后增）

實現學校選擇器的模態對話框，并在頁面中共用同一個選擇器對象。

Demo：demo v8

文章：一步步做組件-學校選擇器(7)

版本9 & 10（補充）

頁面上多個元素共享同一個模態對話框，在觸發事件時加入“由哪個監聽元素觸發”，以避免對所有監聽元素都做出響應。

監聽時判斷，Demo：demo v9

回調時判斷，Demo：demo v10

文章：一步步做組件-學校選擇器(8)

云服務器 GPU云服務器 js做地址選擇器一步步搭建框架一步步搭建物聯網系統系列一

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78251.html

寫這么多系列博客，怪不得找不到女朋友

摘要：前提好幾周沒更新博客了，對不斷支持我博客的童鞋們說聲抱歉了。熟悉我的人都知道我寫博客的時間比較早，而且堅持的時間也比較久，一直到現在也是一直保持著更新狀態。 showImg(https://segmentfault.com/img/remote/1460000014076586?w=1920&h=1080); 前提好幾周沒更新博客了，對不斷支持我博客的童鞋們說聲：抱歉了！。自己這段時...

JerryWangSAP 2019-08-16 11:11 評論0 收藏0
一個前端菜鳥的成長記

摘要：一個前端菜鳥的成長記現在才總結似乎有點晚，但聊勝于無，記錄一下我的，畢業的第一年，對于人生意義重大的一年。感謝勇哥新哥，給予我機會去做更多的嘗試。一個前端菜鳥的成長記現在才總結似乎有點晚，但聊勝于無，記錄一下我的2016，畢業的第一年，對于人生意義重大的一年。我的求職之路打從進入了大四之后，便深深的意識到了就業的壓力，并一直在做著邁向社會的準備。從2015年9月開始，便開始投簡...

Forelax 2019-08-21 11:29 評論0 收藏0
一步步帶你做vue后臺管理框架(一)——介紹框架

摘要：組件已經有了，我們的框架還有哪些特性呢自適應自適應現在很多框架都沒有自適應功能，而很多使用場景也在手機上會有，這也是后臺管理框架誕生的原因之一。系列教程《一步步帶你做vue后臺管理框架》第一課 github地址：vue-framework-wz線上體驗地址：立即體驗??《一步步帶你做vue后臺管理框架》第一課：介紹框架《一步步帶你做vue后臺管理框架》第二課：上手使用《一步步帶你做v...

XiNGRZ 2019-08-21 16:19 評論0 收藏0
React系列 --- 從使用React了解Css的各種使用方案(六)

摘要：當然這不是只限于使用或者其他打包工具的方式都能支持使用優點模塊化和可重用性沒有沖突顯性依賴不會污染全局可以配合預處理器使用少開發單獨文件寫法基本一致 To define is to limit. 定義一樣東西，就意味著限制了它。——王爾德《道林·格雷的畫像》 React系列 React系列 --- 簡單模擬語法(一)React系列 --- Jsx, 合成事件與Refs(二)Reac...

freecode 2019-08-26 10:37 評論0 收藏0
18年求職面經及總結

摘要：年求職面經及總結我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經歷和面試總結寫下來希望能給和我一樣在求職路上煎熬的人一點幫助先說背景微電子科學與工程專業學過兩門和相關的課程語言和單片機這個專業的唯一好處就是大部分人并不知道這個專 18年求職面經及總結我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經歷和面試總結寫下來,希望能給和我一樣在求職路上煎熬的人一點幫...

zhangwang 2019-08-22 11:07 評論0 收藏0