js下拉菜单生成器dropMenu使用方法详解

前端之家收集整理的这篇文章主要介绍了js下拉菜单生成器dropMenu使用方法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了下拉菜单生成器dropMenu的使用方法,供大家参考,具体内容

HTML

职级:

js

function partyLabel(menuID,data){
new DropMeun({
'id':menuID,"data":data,"dataSrc":"name",//数据是下面的这种格式的,你要的是name的值
"ableSearch":true,//可以搜索
"style":{ //样式,可选
"width":173,"maxHeight":200,"left":0,//定位到哪里
"top":5,"initPos":"left" //设置在哪边出现
}
})
}

3.在页面中引用一个js 文件

/-- tools --/

function getRealTop(node) {
return node.offsetParent.tagName.toUpperCase() === 'BODY' ?
node.offsetTop :
node.offsetTop + arguments.callee(node.offsetParent)
}

function getRealLeft(node) {
return node.offsetParent.tagName.toUpperCase() === 'BODY' ?
node.offsetLeft :
node.offsetLeft + arguments.callee(node.offsetParent)
}

/-- tools end--/

function DropMeun(option) {
this.picker = null
this.self = null
this.option = option
this.item = option.item || []
this.style = option.style || {}
this.dataList = option.data || []

this.init()
return this;
}

DropMeun.prototype.init = function () {
var html = '',_this = this

this.self = document.createElement('ul')
this.picker = document.getElementById(this.option.id)

if (! this.picker) {
throw 'picker is null,making sure that picker\'s ID \''+ this.option.id +'\' is correct'
return
}

if (this.option.ableSearch) {
html += '

  • <input class="dropMeun-searchInput" type="text">
  • '
    }

    this.dataList.forEach(function(data,index) {
    var item = _this.option.dataSrc ? data[_this.option.dataSrc] : data,content = _this.item.render ? _this.item.render(item,data) : item

    html += '<li class="dropMeun-item '+ (_this.item.className || '') +'" data-index="'+ index +'">'+ content +''
    })

    this.self.classList.add('dropMeun')
    this.self.innerHTML = html
    document.body.appendChild(this.self)

    this.setStyle()
    this.bindEvent()
    }

    DropMeun.prototype.setStyle = function() {

    this.self.style.width =
    this.style.width ?
    (parseInt(this.style.width) - 26) + 'px' :
    '150px'

    this.self.style.maxHeight =
    this.style.maxHeight ?
    (parseInt(this.style.maxHeight) - 26) + 'px' :
    '300px'

    var w = getRealLeft(this.picker) + (parseInt(this.style.left) || 0)
    var h = getRealTop(this.picker) + this.picker.offsetHeight + (parseInt(this.style.top) || 0)

    var realWidth = parseInt(this.self.style.width) + 26 // 26 = dobule(padding + border)

    if (this.style.initPos === 'right') {
    w = w - realWidth + this.picker.offsetWidth
    }

    this.self.style.top = h + 'px'
    this.self.style.left = w + 'px'

    }

    DropMeun.prototype.bindEvent = function() {
    var

    _this = this,iEvent = this.picker.nodeName.toUpperCase() !== 'INPUT' ?
    'click' :
    this.picker.type.toUpperCase() === 'TEXT' ?
    'focus' : 'click'

    this.picker.addEventListener('click',function(ev) {
    var ev = ev || window.ev
    ev.stopPropagation()
    })

    //
    this.picker.addEventListener(iEvent,function(ev) {

    document.body.click() // 触发 window.click 使其他dropMeun关闭

    _this.self.style.display = 'block'
    })

    //
    window.addEventListener('click',function() {
    _this.self.style.display = 'none'
    })

    //
    this.self.addEventListener('click',function(ev) {
    var ev = ev || window.ev
    ev.stopPropagation()

    // 事件委托 item点击
    if (ev.target.classList.contains('dropMeun-item')) {
    var index = parseInt(ev.target.getAttribute('data-index'))
    data = _this.option.dataSrc ?
    _this.dataList[index][_this.option.dataSrc] :
    _this.dataList[index]

    if (iEvent === 'focus') {
     _this.picker.value = ev.target.innerText
    }

    if (_this.item.callbakc) {
    _this.item.callbakc(data,_this.picker,_this.dataList[index],_this.dataList)
    }

    _this.self.style.display = 'none'

    }
    })
    //
    if (_this.option.ableSearch) {

    _this.searchInput = _this.self.getElementsByClassName('dropMeun-searchInput')[0]

    _this.searchInput.addEventListener('keyup',function() {
    var target = this.value.trim(),items = _this.self.getElementsByClassName('dropMeun-item');

    [].slice.call(items).forEach(function(item,index) {
     item.style.display =
     item.innerText.indexOf(target) === -1 ?
     'none' : ''
    })

    })
    }
    }

    return DropMeun
    }())

    4.在页面中引用一个css文件

    .dropMeun {
    position: absolute;
    border: 1px solid #ccc;
    overflow: auto;
    padding: 8px 12px;
    Box-shadow: 0 6px 12px rgba(0,.175);
    background-color: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    Box-sizing: content-Box;
    display: none;
    }

    .dropMeun li.dropMeun-item {
    min-width: 150px;
    padding: 2px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

    .dropMeun li.dropMeun-item:hover {
    cursor: pointer;
    background-color: rgba(238,238,0.8);
    }

    .dropMeun-searchInput {
    outline: none;
    width: 100%;
    Box-sizing: border-Box;
    }

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    原文链接:https://www.f2er.com/js/37448.html

    猜你在找的JavaScript相关文章