欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-14 19:17:14
本文实例为大家分享了下拉菜单生成器dropmenu的使用方法,供大家参考,具体内容如 html
...

本文实例为大家分享了下拉菜单生成器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;
}

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