时间:2013年07月10日 作者:剧中人
layUI有关select的实现
又一个月过去了,这个月迁了两次服务器,加了一次三十多个小时的大班、十几次四五个小时的小班,搭建了新版博客的后端、界面及前端架构,当然,也延误了三篇文章的编写。
言归正传,今天小剧要说的是页面中最常见的一个功能select。
在用户交互上,select常作为候选菜单供用户选择,也有一些政府、企业网站用它配合click事件做友情链接及子菜单链接。
但相信这个标签也曾让很多人头痛,因为它不具有基本的CSS可写样式属性,而且各浏览器UI表现不一,在处理所谓的"兼容"上很是麻烦。
鉴于上面提到的这么多弊端,小剧在三个月前的一个项目里尝试着写了一个模拟select的功能组件。但考虑到纯ajax交互不多,及部分应用场景是后台交互,用原生的select更有利于数据传输及展示,所以就有了现在的select UI。
因为小剧的这款插件是依赖于jquery实现的,所以必须引入jquery。其次。引入css与js资源,这一步可以打包下载deom页,然后就是配置了。
傻瓜式:所有想要使用layUI效果的select上加上class:layUI,JS内: 页面加载完成后,键入layUI.init();即可。
智能型:此效果可用来处理页面中动态插入的新的select,或者不更改html的前提下指定某些select。直接使用方法下面的方法即可针对性的做操作:layUI.select($('select'))。
页面按正常方式书写 select→option 结构,在JS中执行模拟select的dom结构并隐藏原生选择框。渲染出的模拟select功能会绑定对应的选择、关闭事件,并主动触发原生select的"change"事件。这里最主要的一点是所有操作会记录在原生的select中,以供数据传输。
因为此插件较为常用,小剧在项目中使用ta,还有效果书写的比较粗糙,所以经常会有更新,后期会更新到github进行管理,欢迎提出更新意见及BUG反馈!