javascript模拟select,jselect的方法实现
2024-05-06 14:21:00
供稿：网友
由于主流浏览器对select元素渲染不同，所以在每种浏览器下显示也不一样，最主要的是默认情况下UI太粗糙，即使通过css加以美化也不能达到很美观的效果。这对于我们这些专注于UX的前端开发人员是无法容忍的。于是在项目不太忙的时候，就计划写一个模拟的select控件出来。接下来就把实现的细节、遇到的问题以及如何使用和大家分享一下。
1. 实现细节
init: function(context) {
//获取指定上下文所有select元素
var elems = squid.getElementsByTagName('select', context)
this.globalEvent()
this.initView(elems)
}
在一个用户注册的应用场景，有多个select元素。模拟的select控件（以下简称jselect）初始化方法会获取页面上所有select元素，然后绑定全局事件globalEvent，初始化页面显示initView。globalEvent方法如下：
代码如下:
globalEvent: function() {
//document 添加click事件，用户处理每个jselect元素展开关闭
var target,
className,
elem,
wrapper,
status,
that = this;
squid.on(document, 'click', function(event) {
target = event.target,
className = target.className;
switch(className) {
case 'select-icon':
case 'select-default unselectable':
elem = target.tagName.toLowerCase() === 'div' ? target : target.previousSibling
wrapper = elem.nextSibling.nextSibling
//firefox 鼠标右键会触发click事件
//鼠标左键点击执行
if(event.button === 0) {
//初始化选中元素
that.initSelected(elem)
if(squid.isHidden(wrapper)) {
status = 'block'
//关闭所有展开jselect
that.closeSelect()
}else{
status = 'none'
}
wrapper.style.display = status
elem.focus()
}else if(event.button === 2){
wrapper.style.display = 'none'
}
that.zIndex(wrapper)
break
case 'select-option':
case 'select-option selected':
if(event.button === 0) {
that.fireSelected(target, target.parentNode.parentNode.previousSibling.previousSibling)
wrapper.style.display = 'none'
}
break
default:
while(target && target.nodeType !== 9) {
if(target.nodeType === 1) {
if(target.className === 'select-wrapper') {
return
}
}
target = target.parentNode
}
that.closeSelect()
break
}
})
}
globalEvent实现了在document绑定click事件，然后在页面上触发点击事件的时候通过事件代理来判断当前点击元素是否是需要进行处理的目标元素，判断条件是通过元素的class，代码中语句的分支分别是：展开当前点击的jselect元素下拉、选中点击列表项、判断是否需要关闭jselect。
initView方法如下：
代码如下:
initView: function(elems) {
var i = 0,
elem,
length = elems.length,
enabled;
for(; i < length; i++) {
elem = elems[i]
enabled = elem.getAttribute('data-enabled')
//使用系统select
