haohu/classes/artifacts/haohu_war_exploded/static/lib/jselect-1.0.js

/*!
 * 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);