|
|
/*!
|
|
|
* js模拟系统select v1.0
|
|
|
* http://www.cnblogs.com/typeof/
|
|
|
*
|
|
|
* 主流浏览器对html的select元素渲染都不一样，IE系列(6, 7, 8)也不一样，
|
|
|
* firefox，chrome，safari，opera 渲染和事件处理也稍有差异
|
|
|
* 该脚本解决了在不同浏览器下渲染和事件响应不一致的问题，对系统select是完全
|
|
|
* 意义上的替换。v1.0版本只支持单个select选择即不支持二级或者三级联动且不支持系统select的onchange事件。
|
|
|
* 该版本支持模拟select选择的数据和系统select选中数据的同步，不影响form表单的提交
|
|
|
*
|
|
|
* 如果page上select有的不想通过该脚本替换，只想维持系统select，可以在相应的select元素添加自定义属性data-enabled="true"，
|
|
|
* 否则可以在想要通过该脚本替换的select元素上添加自定义属性data-enabled="false"或者不加，会默认为这个select需要
|
|
|
* 通过该脚本进行替换
|
|
|
*
|
|
|
* 日期：2012-11-07 15:38
|
|
|
*/
|
|
|
(function(squid) {
|
|
|
function JSelect() {
|
|
|
this.init()
|
|
|
}
|
|
|
|
|
|
JSelect.prototype = {
|
|
|
constructor: JSelect,
|
|
|
init: function(context) {
|
|
|
//获取指定上下文所有select元素
|
|
|
var elems = squid.getElementsByTagName('select', context)
|
|
|
this.globalEvent()
|
|
|
this.initView(elems)
|
|
|
},
|
|
|
initView: function(elems) {
|
|
|
var i = 0,
|
|
|
elem,
|
|
|
length = elems.length,
|
|
|
enabled;
|
|
|
|
|
|
for(; i < length; i++) {
|
|
|
elem = elems[i]
|
|
|
enabled = elem.getAttribute('data-enabled')
|
|
|
//使用系统select
|
|
|
if(!enabled || enabled === 'true')
|
|
|
continue
|
|
|
if(squid.isVisible(elem))
|
|
|
elem.style.display = 'none'
|
|
|
|
|
|
this.create(elem)
|
|
|
}
|
|
|
},
|
|
|
create: function(elem) {
|
|
|
var data = [],
|
|
|
i = 0,
|
|
|
length,
|
|
|
option,
|
|
|
options,
|
|
|
value,
|
|
|
text,
|
|
|
obj,
|
|
|
lis,
|
|
|
ul,
|
|
|
_default,
|
|
|
icon,
|
|
|
selectedText,
|
|
|
selectedValue,
|
|
|
div,
|
|
|
wrapper,
|
|
|
position,
|
|
|
left,
|
|
|
top,
|
|
|
cssText;
|
|
|
|
|
|
options = elem.getElementsByTagName('option')
|
|
|
length = options.length
|
|
|
for(; i < length; i++) {
|
|
|
option = options[i]
|
|
|
value = option.value
|
|
|
text = option.innerText || option.textContent
|
|
|
|
|
|
obj = {
|
|
|
value: value,
|
|
|
text: text
|
|
|
}
|
|
|
if(option.selected) {
|
|
|
selectedValue = value
|
|
|
selectedText = text
|
|
|
obj['selected'] = true
|
|
|
}
|
|
|
data.push(obj)
|
|
|
}
|
|
|
|
|
|
lis = this.render(this.tmpl, data)
|
|
|
ul = '<ul class="select-item">' + lis + '</ul>'
|
|
|
//
|
|
|
div = document.createElement('span')
|
|
|
div.style.display = 'none'
|
|
|
div.className = 'select-wrapper'
|
|
|
//已选元素
|
|
|
_default = document.createElement('span')
|
|
|
_default.className = 'select-default unselectable'
|
|
|
_default.unselectable = 'on'
|
|
|
//让div元素能够获取焦点
|
|
|
_default.setAttribute('tabindex', '1')
|
|
|
_default.setAttribute('data-value', selectedValue)
|
|
|
_default.setAttribute('hidefocus', true)
|
|
|
_default.innerHTML = selectedText
|
|
|
div.appendChild(_default)
|
|
|
//选择icon
|
|
|
icon = document.createElement('i')
|
|
|
icon.className = 'select-icon'
|
|
|
div.appendChild(icon)
|
|
|
//下拉列表
|
|
|
wrapper = document.createElement('span')
|
|
|
wrapper.className = 'select-list hide'
|
|
|
wrapper.innerHTML = ul
|
|
|
//生成新的元素
|
|
|
div.appendChild(wrapper)
|
|
|
//插入到select元素后面
|
|
|
elem.parentNode.insertBefore(div, null)
|
|
|
//获取select元素left top值
|
|
|
//先设置select显示，取完left, top值后重新隐藏
|
|
|
elem.style.display = 'block'
|
|
|
//事件绑定
|
|
|
this.sysEvent(div)
|
|
|
position = squid.position(elem)
|
|
|
elem.style.display = 'none'
|
|
|
left = position.left
|
|
|
top = position.top
|
|
|
cssText = ' display: inline-block;'
|
|
|
div.style.cssText = cssText
|
|
|
},
|
|
|
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() === 'span' ? target : target.previousSibling
|
|
|
wrapper = elem.nextSibling.nextSibling
|
|
|
|
|
|
//firefox 鼠标右键会触发click事件
|
|
|
//鼠标左键点击执行
|
|
|
if(event.button === 0) {
|
|
|
//初始化选中元素
|
|
|
that.initSelected(elem)
|
|
|
if(squid.isHidden(wrapper)) {
|
|
|
status = 'inline-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
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
sysEvent: function(elem) {
|
|
|
var stand = elem.firstChild,
|
|
|
dropdown = elem.lastChild,
|
|
|
target,
|
|
|
//firefox = 'MozBinding' in document.documentElement.style,
|
|
|
chrome = /chrome/i.test(navigator.userAgent),
|
|
|
keyup = chrome ? 'keypress' : 'keyup',
|
|
|
that = this;
|
|
|
|
|
|
squid.on(elem, 'mouseover', function(event) {
|
|
|
if(!that.doScrolling) {
|
|
|
target = event.target
|
|
|
that.activate(target)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
squid.on(elem, 'mouseout', function(event) {
|
|
|
if(!that.doScrolling) {
|
|
|
target = event.target
|
|
|
that.deactivate(target)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
squid.on(stand, 'keydown', function(event) {
|
|
|
var keyCode = event.keyCode;
|
|
|
|
|
|
switch(keyCode) {
|
|
|
//回车选中
|
|
|
case 13:
|
|
|
that.enter(dropdown)
|
|
|
break
|
|
|
//向上键
|
|
|
case 38:
|
|
|
that.doScrolling = true
|
|
|
that.up(dropdown)
|
|
|
break
|
|
|
//向下键
|
|
|
case 40:
|
|
|
that.doScrolling = true
|
|
|
that.down(dropdown)
|
|
|
break
|
|
|
default:
|
|
|
break
|
|
|
}
|
|
|
})
|
|
|
|
|
|
squid.on(stand, keyup, function(event) {
|
|
|
var keyCode = event.keyCode;
|
|
|
|
|
|
switch(keyCode) {
|
|
|
//回车选中
|
|
|
case 13:
|
|
|
that.doScrolling = false
|
|
|
break
|
|
|
//向上键
|
|
|
case 38:
|
|
|
that.doScrolling = false
|
|
|
break
|
|
|
//向下键
|
|
|
case 40:
|
|
|
that.doScrolling = false
|
|
|
break
|
|
|
default:
|
|
|
break
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
zIndex: function(elem) {
|
|
|
var index = 10,
|
|
|
cur = elem.parentNode.parentNode,
|
|
|
next = squid.next(cur);
|
|
|
|
|
|
if(next) {
|
|
|
cur.style.zIndex = index
|
|
|
next.style.zIndex = --index
|
|
|
}
|
|
|
},
|
|
|
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
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
activate: function(elem) {
|
|
|
var tagName = (elem.tagName || '').toLowerCase(),
|
|
|
className = elem.className,
|
|
|
parent = elem.parentNode,
|
|
|
first = parent.firstChild,
|
|
|
last = parent.lastChild;
|
|
|
|
|
|
switch(tagName) {
|
|
|
case 'li':
|
|
|
//li.select-option 元素
|
|
|
if(!~className.indexOf('selected') && (elem !== first || elem !== last)) {
|
|
|
this.deactivate(elem)
|
|
|
elem.className = className + ' selected'
|
|
|
}
|
|
|
break
|
|
|
default:
|
|
|
break
|
|
|
}
|
|
|
},
|
|
|
deactivate: function(elem) {
|
|
|
var tagName = (elem.tagName || '').toLowerCase(),
|
|
|
className = (' ' + elem.className + ' ').replace(/[\n\r\t]/, '');
|
|
|
|
|
|
switch(tagName) {
|
|
|
case 'li':
|
|
|
//li.select-option 元素
|
|
|
var i = 0,
|
|
|
lis = squid.siblings(elem),
|
|
|
length = lis.length,
|
|
|
cur;
|
|
|
|
|
|
for(; i < length; i++) {
|
|
|
cur = lis[i]
|
|
|
cur.className = squid.trim(className.replace(' selected ', ''))
|
|
|
}
|
|
|
break
|
|
|
default:
|
|
|
break
|
|
|
}
|
|
|
},
|
|
|
fireSelected: function(elem, s) {
|
|
|
var text = elem.innerText || elem.textContent,
|
|
|
value = elem.getAttribute('data-value'),
|
|
|
r;
|
|
|
|
|
|
s.setAttribute('data-value', value)
|
|
|
if(s.innerText)
|
|
|
s.innerText = text
|
|
|
else
|
|
|
s.textContent = text
|
|
|
|
|
|
//触发系统select选中，用于form表单提交
|
|
|
r = s.parentNode.previousSibling.previousSibling
|
|
|
r.value = value
|
|
|
r.setAttribute('data-text', text)
|
|
|
},
|
|
|
closeSelect: function() {
|
|
|
var elems = squid.getElementsByClassName('select-list'),
|
|
|
i = 0,
|
|
|
length = elems.length,
|
|
|
elem;
|
|
|
|
|
|
for(; i < length; i++) {
|
|
|
elem = elems[i]
|
|
|
if(squid.isVisible(elem))
|
|
|
elem.style.display = 'none'
|
|
|
}
|
|
|
},
|
|
|
up: function(elem) {
|
|
|
var ul = elem.firstChild,
|
|
|
lis = ul.childNodes,
|
|
|
li = this.getSelectedIndex(lis),
|
|
|
cur,
|
|
|
i = li.index;
|
|
|
|
|
|
if(i > 0) {
|
|
|
i--
|
|
|
cur = lis[i]
|
|
|
//判断元素是否in view
|
|
|
this.inView(cur, elem, 'up')
|
|
|
this.activate(cur)
|
|
|
this.fireSelected(cur, elem.previousSibling.previousSibling)
|
|
|
}
|
|
|
},
|
|
|
down: function(elem) {
|
|
|
var ul = elem.firstChild,
|
|
|
lis = ul.childNodes,
|
|
|
li = this.getSelectedIndex(lis),
|
|
|
cur,
|
|
|
i = li.index;
|
|
|
|
|
|
if(i < lis.length - 1) {
|
|
|
i++
|
|
|
cur = lis[i]
|
|
|
//判断元素是否in view
|
|
|
this.inView(cur, elem, 'down')
|
|
|
this.activate(cur)
|
|
|
this.fireSelected(cur, elem.previousSibling.previousSibling)
|
|
|
}
|
|
|
},
|
|
|
enter: function(elem) {
|
|
|
var ul = elem.firstChild,
|
|
|
lis = ul.childNodes,
|
|
|
li,
|
|
|
i,
|
|
|
cur;
|
|
|
|
|
|
li = this.getSelectedIndex(lis)
|
|
|
i = li.index
|
|
|
cur = lis[i]
|
|
|
this.fireSelected(cur, elem.previousSibling.previousSibling)
|
|
|
this.closeSelect()
|
|
|
},
|
|
|
getSelectedIndex: function(elems) {
|
|
|
var i = 0,
|
|
|
length = elems.length,
|
|
|
elem;
|
|
|
|
|
|
for(; i < length; i++) {
|
|
|
elem = elems[i]
|
|
|
if(~elem.className.indexOf('selected')) {
|
|
|
return {
|
|
|
index: i
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
index: -1
|
|
|
}
|
|
|
},
|
|
|
inView: function(elem, wrapper, dir) {
|
|
|
var scrollTop = wrapper.scrollTop,
|
|
|
offsetTop = elem.offsetTop,
|
|
|
top;
|
|
|
|
|
|
if(dir === 'up') {
|
|
|
if(offsetTop === 0) {
|
|
|
wrapper.scrollTop = offsetTop;
|
|
|
}else if(offsetTop < scrollTop) {
|
|
|
top = offsetTop - scrollTop
|
|
|
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)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
scrollInView: function(elem, top) {
|
|
|
setTimeout(function() {
|
|
|
elem.scrollTop += top
|
|
|
}, 10)
|
|
|
},
|
|
|
doScrolling: false,
|
|
|
render: function(tmpl, data) {
|
|
|
var i = 0,
|
|
|
cur,
|
|
|
length = data.length,
|
|
|
prop,
|
|
|
value,
|
|
|
item,
|
|
|
r = [];
|
|
|
|
|
|
for(; i < length; i++) {
|
|
|
cur = data[i]
|
|
|
item = tmpl.replace(/\{\{\w+\}\}/g, function(a) {
|
|
|
prop = a.replace(/[\{\}]+/g, '')
|
|
|
value = cur[prop] || ''
|
|
|
if(prop === 'class') {
|
|
|
value += 'select-option'
|
|
|
if(cur.selected) {
|
|
|
value += ' selected'
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return value
|
|
|
})
|
|
|
r.push(item)
|
|
|
}
|
|
|
|
|
|
return r.join('')
|
|
|
},
|
|
|
tmpl: '<li class="{{class}}" data-value="{{value}}">{{text}}</li>'
|
|
|
}
|
|
|
|
|
|
squid.swing.jselect = function() {
|
|
|
return new JSelect()
|
|
|
}
|
|
|
})(squid); |
