一步步做组件-学校选择器(系列)

galois 发布于2019-08-19 17:10 / 3712人阅读

摘要：文章一步步做组件学校选择器版本添加自定义事件，即使用观察者模式。文章一步步做组件学校选择器版本后增实现学校选择器的模态对话框，并在页面中共用同一个选择器对象。监听时判断，回调时判断，文章一步步做组件学校选择器

前言

年初的时候写过一个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做地址选择器一步步搭建框架一步步搭建物联网系统系列一

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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