发布于 2017-08-12 18:55:23 | 11 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了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;
}

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



相关阅读 :
js下拉菜单生成器dropMenu使用方法详解
js下拉菜单语言选项简单实现
js 下拉菜单实现代码
css+js下拉菜单
js多功能分页组件layPage使用方法详解
JS event使用方法详解
js模态对话框使用方法详解
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
JSONObject使用方法详解
SinaEditor使用方法详解
JavaScript SetInterval与setTimeout使用方法详解
javascript的offset、client、scroll使用方法详解
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务