当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js下拉菜单生成器dropMenu使用方法详解

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网