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

2023-09-27 06:50:06 126

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

HTML


职级：

$(function(){
vartitle,
populationType,
titleInParty;
$.ajax({
url:'/api/v1/user/getUserTypeInfo',
type:'GET',
dataType:'json',
success:function(data){
title=data.data.title;
titleInParty=data.data.titleInParty;
populationType=data.data.populationType;
partyLabel('jobTitle',title);
partyLabel('populationType',populationType);
partyLabel('titleInParty',titleInParty);
}
});

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

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

(function(vq0599){
window.DropMeun=vq0599
})(function(){

/*--tools--*/

functiongetRealTop(node){
returnnode.offsetParent.tagName.toUpperCase()==='BODY'?
node.offsetTop:
node.offsetTop+arguments.callee(node.offsetParent)
}

functiongetRealLeft(node){
returnnode.offsetParent.tagName.toUpperCase()==='BODY'?
node.offsetLeft:
node.offsetLeft+arguments.callee(node.offsetParent)
}

/*--toolsend--*/


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

this.init()
returnthis;
}

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

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

if(!this.picker){
throw'pickerisnull,makingsurethatpicker\'sID\''+this.option.id+'\'iscorrect'
return
}


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

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

html+=''+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'

varw=getRealLeft(this.picker)+(parseInt(this.style.left)||0)
varh=getRealTop(this.picker)+this.picker.offsetHeight+(parseInt(this.style.top)||0)

varrealWidth=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){
varev=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){
varev=ev||window.ev
ev.stopPropagation()

//事件委托item点击
if(ev.target.classList.contains('dropMeun-item')){
varindex=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(){
vartarget=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':''
})

})
}
}

returnDropMeun
}())

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

ul,
li{
list-style:none;
margin:0;
padding:0;
}

.dropMeun{
position:absolute;
border:1pxsolid#ccc;
overflow:auto;
padding:8px12px;
box-shadow:06px12pxrgba(0,0,0,.175);
background-color:#fff;
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
box-sizing:content-box;
display:none;
}

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

热门推荐

随机推荐