initSelected: function(elem) {
var curText = elem.innerText || elem.textContent,
curValue = elem.getAttribute('data-value'),
wrapper = elem.nextSibling.nextSibling,
n = wrapper.firstChild.firstChild,
text,
value,
dir,
min = 0,
max,
hidden = false;
for(; n; n = n.nextSibling) {
text = n.innerText || n.textContent
value = n.getAttribute('data-value')
if(curText === text && curValue === value) {
//显示已选中元素
if(squid.isHidden(wrapper)) {
wrapper.style.display = 'block'
hidden = true
}
max = wrapper.scrollHeight
if(n.offsetTop > (max / 2)) {
if(wrapper.clientHeight + wrapper.scrollTop === max)
dir = 'up'
else
dir = 'down'
}else{
if(wrapper.scrollTop === min)
dir = 'down'
else
dir = 'up'
}
this.inView(n, wrapper, dir)
if(hidden)
wrapper.style.display = 'none'
this.activate(n)
break
}
}
}
该方法接收class为select-default的div元素即用于存放用户已选择内容的元素，具体实现方式是先遍历所有选项获取class有selected的li元素，通过activate方法标示为当前已选中的元素。这里有一个需要计算的地方，就是每次展开下拉列表都要将已选中的元素滚动到页面可视区。因为有可能下来列表内容很多，但是下拉列表的外层select-list会有一个最大的高度，超过最大高度会出现滚动条，默认不做计算的话有可能已选中的元素会在滚动条下面或者是滚动条上面，所以需要通过计算来重置容器滚动条的位置。具体是已选中内容显示到滚动条的上面还是下面需要根据已选中元素的offsetTop值是否大于外层容器select-list的实际高度一半，把已选中元素显示到可视区的方式是inView方法。inView方法如下
复制代码 代码如下:
inView: function(elem, wrapper, dir) {
var scrollTop = wrapper.scrollTop,
//已选中元素offsetTop
offsetTop = elem.offsetTop,
top;
if(dir === 'up') {
if(offsetTop === 0) {
//滚动条置顶
wrapper.scrollTop = offsetTop;
}else if(offsetTop < scrollTop) {
top = offsetTop - scrollTop
//滚动条滚动到top值
this.scrollInView(wrapper, top)
}
}else{
var clientHeight = wrapper.clientHeight;
if(offsetTop + elem.offsetHeight === wrapper.scrollHeight) {
wrapper.scrollTop = wrapper.scrollHeight - wrapper.clientHeight
}else if(offsetTop + elem.offsetHeight > clientHeight + scrollTop) {
top = (offsetTop + elem.offsetHeight) - (scrollTop + clientHeight)
this.scrollInView(wrapper, top)
}
}
}
inView方法需要判断是向上滚动还是向下滚动，scrollInView方法代码很简单就是把下拉列表外层容器的scrollTop设置为指定的值。方法实现如下
复制代码 代码如下:
scrollInView: function(elem, top) {
setTimeout(function() {
elem.scrollTop += top
}, 10)
}
这个方法实现放到了setTimeout里面做了一个延迟添加到javascript执行队列里面，主要解决的是IE8下展开下拉列表滚动条会最终滚动到顶部，忽略代码设置的scrollTop（从表现上来看好像对scrollTop的设置也能生效，但是最后会重置滚动条到顶部，不知道IE8为什么会有这个问题。），不能把已选中的元素显示到可视区范围，其他浏览器下不会有这个问题。
整个的实现细节大致就这么多，键盘上下键回车键，关闭下拉列表逻辑都很简单。
遇到的问题
如何让div获取焦点来响应键盘keydown, keyup, keypress事件，到谷歌（非常时期谷歌都不好用了，没办法谁让这是咱的特色呢）查找一些资料最后发现需要为div元素设置tabindex属性，这样就可以让div元素获取焦点，来响应用户的操作。因为浏览器在默认情况下双击或者是点击太频繁的话会选中当前区域，为了取消这个默认操作给用户一个好的体验需要为div元素添加一个属性unselectable，不过这个属性只能适用于IE浏览器，其他浏览器下可以通过添加一个class名字是unselectable来避免这个问题。其他的问题都是逻辑上的控制，还有一些位置的计算了，这里就不再说了。
使用方法
首先是在页面模板把希望通过jselect替换的元素隐藏或者不做任何处理，默认情况下jselect会获取页面所有select依次替换，如果不希望jselect替换的select元素
需要添加自定义属性data-enabled="true"。当然添加data-enabled="false"和没有这个自定义属性一样都会被jselect替换。在使用的过程中可能对于布局结构比较复杂的页面还会有其他的问题，因为我测试的页面结构很简单，所以可能没有测试出来。
使用jselect需要先引入squid.js，然后引入jselect-1.0.js, jselect-1.0.css文件，在需要调用jselect的地方通过如下的调用方式来初始化jselect：squid.swing.jselect();
注：jselect源码以及demo可以通过这里下载。
您可能感兴趣的文章: