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

前言

年初的时候写过一个js组件的系列文章,博客原文地址为 http://jsorz.cn/blog/2015/02/step-by-step-js-component-schoolbox-collections.html 因为博客架在github的免费主页上,github把百度爬虫拉黑了,因此访问量一直挺低的。现移步sf,但愿一块儿多多交流,共同成长,谢谢!html

版本1

只是简单的界面设计,静态排版,没有js部分。git

Demo:demo v1github

文章:穿插在第一篇中设计

版本2

加入了js部分,实现了省和学校的级联。component

Demo:demo v2htm

文章:一步步作组件-学校选择器(1)对象

版本3

把版本2的js代码写成组件的结构。blog

Demo:demo v3事件

文章:一步步作组件-学校选择器(2)v8

版本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)

相关文章
相关标签/搜索