这篇文章主要介绍了js中下拉菜单生成器dropMenu怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
HTML
<div class="input-group">
<span class="input-group-addon" >职级：</span>
<input type="text" class="units form-control" id="jobTitle" value="其他" ></input>
<span class="caret beside"></span>
</div>js
$(function(){
var title,
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);
}
});
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 文件
(function(vq0599) {
window.DropMeun = vq0599
})(function() {
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)
}
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 += '<li><input class="dropMeun-searchInput" type="text"></li>'
}
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 +'</li>'
})
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文件
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.dropMeun {
position: absolute;
border: 1px solid #ccc;
overflow: auto;
padding: 8px 12px;
box-shadow: 0 6px 12px rgba(0, 0, 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, 238, 0.8);
}
.dropMeun-searchInput {
outline: none;
width: 100%;
box-sizing: border-box;
}感谢你能够认真阅读完这篇文章，希望小编分享的“js中下拉菜单生成器dropMenu怎么用”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
