Details about how to use the js drop-down menu generator dropMenu, jsdropmenu

Details about how to use the js drop-down menu generator dropMenu, jsdropmenu

The examples in this article share the usage of the drop-down menu generator dropMenu for your reference. The details are as follows:

HTML

<Div class = "input-group"> <span class = "input-group-addon" style = "width: 100px"> rank: </span> <input type = "text" class = "units form-control" id = "jobTitle" value = "other" 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', ype: '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", // The data is in the following format, what you want is the name value "ableSearch": true, // you can search for "style": {// style, optional "width": 173, "maxHeight": 200, "left": 0, // where to locate "top": 5, "initPos": "left" // where to set }})}

3. Reference a js file on the page

(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. self = document. createElem Ent ('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. styl E. 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 '? 'Focal ': 'click' this. picker. addEventListener ('click', function (ev) {var ev = ev | window. ev. stopPropagation ()}) // this. picker. addEventListener (iEvent, function (ev) {document. body. click () // trigger window. click to make other dropMeun close _ this. self. style. display = 'block'}) // window. addEventListener ('click', function () {_ this. self. style. display = 'none'}) // this. self. addEventListener ('click', functio N (ev) {var ev = ev | window. ev. stopPropagation () // event Delegate item click if (ev.tar get. classList. contains ('dropmeun-item') {var index = parseInt(ev.tar get. getAttribute ('data-Index') data = _ this. option. dataSrc? _ This. dataList [index] [_ this. option. dataSrc]: _ this. dataList [index] if (iEvent === 'core') {_ this. picker. value = ev.tar get. 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. Reference a css file on the page

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;}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.