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

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

HTML

<div class="input-group">
 <span class="input-group-addon" style="width: 100px" >职级：</span>
 <input type="text" class="units form-control" id="jobTitle" value="其他" style="border-radius:0 4px 4px 0;"></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() {

 /*-- 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 += '<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;
}

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