標籤：des style http color os width
模仿寫一個listbox的功能, 這裡只完成部分的功能. 因為完整的應該是與服務端互動, 根據搜尋的關鍵進行匹配. 然後可以利用鍵盤 或者 滑鼠來選擇推薦出來的內容. 這裡只實現選擇的功能. 只要是JS部分的代碼.
第一步: CSS代碼
.ac-renderer { width: 600px; top: 33px; left: 1px; position: absolute; top: 35px; left: 1px; z-index: 10; background: #fff; border: solid 1px #999\0; border: 0 none rgba(0,0,0,0); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.5); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.5); box-shadow: 0 1px 4px rgba(0,0,0,.5);}.ac-row { cursor: pointer; padding: 8px; zoom: 1; clear: both;}.ac-renderer>.ac-row:first-child { border-radius: 5px 5px 0 0;}.ac-active { background-color: #d6e9f8;}.ac-row .zm-item-img-avatar { margin: 2px 10px 0 0; width: 25px; height: 25px;}.zm-item-img-avatar { border-radius: 2px;}.zg-left { float: left;}.autocomplete-row-name { margin: 0 0 1px 35px; display: block; line-height: 1.2; height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.zu-autocomplete-row-description { color: #999; display: block; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 14px; height: 14px; zoom: 1;}
第二步: 頁面代碼
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script src="../../../main/js/global/jquery/1.8/jquery-1.8.1.js"></script> <script src="../../../main/plugin/listbox/jquery.listbox.js"></script> <link rel="stylesheet" href="../../../main/plugin/listbox/listbox.css"/></head><body><center> <div> <input id="box" type="text" value="" placeholder="輸入關鍵字"/> </div></center><script> var this$ = $(‘#box‘); var html = [ ‘<div class="ac-row ac-active active" id=":3g" role="option" style="-webkit-user-select: none;">‘, ‘<img class="zm-item-img-avatar zg-left" src="310d85e8d_m.jpg" style="-webkit-user-select: none;">‘, ‘<span title="足球" style="-webkit-user-select: none;">足球1111</span>‘, ‘<span class="zg-gray-normal zu-autocomplete-row-description" style="-webkit-user-select: none;">‘, ‘又稱<b style="-webkit-user-select: none;">s</b>occer，222955 人關注‘, ‘</span>‘, ‘</div>‘, ‘<div id=":4g" role="option" style="-webkit-user-select: none;">‘, ‘<img class="zm-item-img-avatar zg-left" src="310d85e8d_m.jpg" style="-webkit-user-select: none;">‘, ‘<span title="足球" style="-webkit-user-select: none;">足球22222</span>‘, ‘<span class="zg-gray-normal zu-autocomplete-row-description" style="-webkit-user-select: none;">‘, ‘又稱<b style="-webkit-user-select: none;">s</b>occer，222955 人關注‘, ‘</span>‘, ‘</div>‘, ‘<div id=":5g" role="option" style="-webkit-user-select: none;">‘, ‘<img class="zm-item-img-avatar zg-left" src="310d85e8d_m.jpg" style="-webkit-user-select: none;">‘, ‘<span title="足球" style="-webkit-user-select: none;">足球33333</span>‘, ‘<span class="zg-gray-normal zu-autocomplete-row-description" style="-webkit-user-select: none;">‘, ‘又稱<b style="-webkit-user-select: none;">s</b>occer，222955 人關注‘, ‘</span>‘, ‘</div>‘ ].join(‘‘); var options = { width: 300, bodyHtml: html, target: this$, targetWrap: this$.parent(), afterSelected: function (value) { alert(value.html()); } }; var listBoxUtil = new ListBoxUtil(options); listBoxUtil.init();</script></body></html>
第三步: 核心JS代碼
(function ($) { ListBoxUtil = function (options) { this.options = options || {}; this.target = null; this.targetWrap = null; this.width = 600; this.top = 0; this.left = 0; this.id = "listbox"; this.bodyHtml = ""; this.currentIndex = 0; this.callFunction = null; var html = [ ‘<div class="ac-renderer" role="listbox" id="‘ + this.id + ‘" style="-webkit-user-select: none;">‘, ‘</div>‘ ].join(‘‘); this.listbox = $(html); }; ListBoxUtil.prototype.init = function () { var this$ = this; this$.setConfig(); this$.mouseHover(); this$.keyup(); this$.bindClick(); this$.target.on(‘focus‘, function () { this$.show(); }).on(‘blur‘, function () { setTimeout(function () { this$.hide() }, 150); }); }; ListBoxUtil.prototype.setConfig = function () { if (this.options != null) { if (this.options[‘target‘]) { this.target = this.options[‘target‘]; } if (this.options[‘targetWrap‘]) { this.targetWrap = this.options[‘targetWrap‘]; } if (this.options[‘width‘]) { this.listbox.width(this.options[‘width‘]); } if (this.options[‘bodyHtml‘]) { this.listbox.append(this.options[‘bodyHtml‘]); } if (this.options[‘left‘]) { this.listbox.left(this.options[‘left‘]); } else { this.listbox.css("left", this.target.offset().left); } if (this.options[‘top‘]) { this.listbox.top(this.options[‘top‘]); } else { this.listbox.css("top", this.target.offset().top + this.target.height() + 10); } if (this.options[‘callFunction‘]) { this.callFunction = this.options[‘callFunction‘]; } this.targetWrap.append(this.listbox); } }; ListBoxUtil.prototype.mouseHover = function () { var this$ = this; this.listbox.children().hover( function () { this$.listbox.children().removeClass(‘ac-active active‘); $(this).addClass("ac-active active"); // } ); }; ListBoxUtil.prototype.keyMove = function (e) { var listChild = this.listbox.children().removeClass("ac-active active"); // 向上 if (e.keyCode == 38) { if (this.currentIndex > 0) { this.currentIndex--; } else { this.currentIndex = listChild.length - 1; } } // 向下 else if (e.keyCode == 40) { if (this.currentIndex == listChild.length - 1) { this.currentIndex = 0; } else { this.currentIndex++; } } listChild.eq(this.currentIndex).addClass("ac-active active"); }; ListBoxUtil.prototype.hide = function () { this.listbox.hide(); }; ListBoxUtil.prototype.show = function () { this.listbox.show(); }; ListBoxUtil.prototype.bindClick = function () { var this$ = this; this$.listbox.children().on(‘click‘, function () { if (this$.options.afterSelected) { this$.options.afterSelected($(this)); } }); }; ListBoxUtil.prototype.enter = function (e) { var this$ = this; var curentChild = this$.listbox.children().eq(this$.currentIndex); if (this$.options.afterSelected) { this$.options.afterSelected(curentChild); } }; ListBoxUtil.prototype.keyup = function () { var this$ = this; this.target.on(‘keyup‘, function (e) { if (e.keyCode == 38 || e.keyCode == 40) { this$.keyMove(e); } else if (e.keyCode == 13) { this$.enter(e); } }); };})(jQuery);
:
雖然代碼非常的簡單, 但也是我第一次這麼認真的寫JS代碼. 以後還是得前後堅固才行.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
