JS封裝的下拉框
阿新 • • 發佈：2017-12-07
lock 輸入 course java 藝術 listen attr 封裝 justify
根據拼音首字母查詢課程
調用：
var test2 = new ShangShu.Course.Select(1, ‘test2‘,data); test2.init();
參數：
1. 1----排列的序號，當調用多個，顯示在最前不會被覆蓋
2. test2----附加在此ID下的文本框下
3. data-----數據
HTML代碼：
<script type="text/javascript" src="./ShangShu/jquery.js"></script> <style> div,span,a,p{ margin:0; padding:0; } </style> 測試頁面<br/> <div style="left:200px;top:100px;"> <div> <input type="text" placeholder="中文/拼音" value="" style="width:260px;height:30px;outline:none;padding:0 1px;margin:0;" id="test2" /> </div> </div> <script> var data = {"B":[{"id":43,"name":"辦公空間設計","initial":"BGKJSJ","code":10084102},{"id":107,"name":"畢業設計考察","initial":"BYSJKC","code":10087013},{"id":106,"name":"畢業實習","initial":"BYSX","code":10087012}],"C":[{"id":80,"name":"設計初步A","initial":"CBSJA","code":10082201},{"id":59,"name":"城市廣場景觀設計","initial":"CSGCJGSJ","code":13084205},{"id":54,"name":"城市公共藝術設計","initial":"CSGGYSSJ","code":13084201},{"id":40,"name":"城市規劃原理B","initial":"CSGHYLB","code":13013320},{"id":58,"name":"城市街道景觀設計","initial":"CSJDJGSJ","code":13084204},{"id":76,"name":"城市色彩","initial":"CSSC","code":13082015},{"id":64,"name":"城市藝術概論","initial":"CSYSGL","code":10082010},{"id":49,"name":"餐飲空間設計","initial":"CYKJSJ","code":10084105}],"D":[{"id":6,"name":"大學英語4","initial":"DXYY4","code":13095302}],"F":[{"id":28,"name":"房地產銷售","initial":"FDCXS","code":13085012},{"id":19,"name":"服飾文化","initial":"FSWH","code":13085006}],"G":[{"id":42,"name":"公共建築設計","initial":"GGJZSJ","code":10014182},{"id":37,"name":"觀賞植物","initial":"GSZW","code":10013473}]}; var test2 = new ShangShu.Course.Select(1, ‘test2‘,data); test2.init(); </script>
JS代碼：
var ShangShu = {}; ShangShu.Course = {}; ShangShu.Course.Select = function(SelectNum, targetId,sourceData) { var __self = this; this.width = 500; this.height = 200; this.num = SelectNum; // 選擇框編號，如果有多個input的時候必須由小到大的賦值，以免input覆蓋div this.TargetId = targetId; // 要操作的Input目標Id this.SourceData = sourceData; // 課程數據列表 this.SelectDiv = document.createElement("div"); // 選擇部分最外層Div this.SelectId = document.createElement("input"); // 隱藏域用於記錄所選擇Id this.InputObj = document.getElementById(this.TargetId); // 要操作的Input目標對象 this.SelectId.type = "hidden"; /** * 初始化 * @param string targetId * @param Json[] sourceData */ this.init = function() { this.SelectId.id = this.TargetId + "_id"; // 目標對象單擊事件 this.InputObj.addEventListener(‘click‘, function() { __self.div_show(); }); // 目標對象單擊事件 this.InputObj.addEventListener(‘mouseover‘, function() { __self.div_show(); }); // 目標對象失去焦點事件 this.InputObj.addEventListener(‘mouseout‘, function() { //__self.div_hidden(); }); // 目標對象輸入 this.InputObj.addEventListener(‘input‘, function() { __self.init_data(this.value.toUpperCase()); }); //對展示框綁定事件 this.SelectDiv.addEventListener(‘mouseover‘,function(){ __self.div_show(); }); //對展示框綁定事件 this.SelectDiv.addEventListener(‘mouseout‘,function(){ //__self.div_hidden(); }); // 選擇區初始化 this.init_data(‘‘); // 初始化數據 this.init_style(); // 初始化樣式 this.init_click(); // 初始化單擊事件 this.InputObj.after(this.SelectId); this.SelectId.after(this.SelectDiv); this.bindclick(); }; this.div_hidden = function(){ __self.SelectDiv.style.display = ‘none‘; }; this.div_show = function (){ __self.SelectDiv.style.display = ‘‘; }; /** * 初始化單擊事件 */ this.init_click = function() { var Alist = this.SelectDiv.getElementsByTagName(‘p‘)[0].getElementsByTagName(‘a‘); $.each(Alist,function(key,A){ A.addEventListener(‘mouseover‘,function(){ __self.click_a_over(A); }); A.addEventListener(‘click‘,function(){ // TODO選擇 __self.SelectLetter(A.innerHTML); }); A.addEventListener(‘mouseout‘,function(){ __self.click_a_out(A); }); }); }; /** * 根據字母篩選內容 */ this.SelectLetter = function (word) { var DivList = this.SelectDiv.getElementsByTagName(‘div‘)[0].getElementsByTagName(‘div‘); $.each(DivList,function(key,div){ var DivId = __self.TargetId + "_body_" + word; if (div.id.length == DivId.length) { if(div.id == (__self.TargetId + "_body_" + word)) { div.style.display = ‘‘; } else { div.style.display = ‘none‘; } } }); }; /** * 定義展示框的樣式 * @param {type} TargetObj */ this.init_style = function(TargetObj) { this.SelectDiv.style.position = "absolute"; this.InputObj.parentNode.style.zIndex = 99999999 - this.num; this.InputObj.parentNode.style.position = "relative"; this.SelectDiv.style.display = ‘none‘; this.SelectDiv.style.width = this.width + "px"; this.SelectDiv.style.height = this.height + "px"; this.SelectDiv.style.backgroundColor = "#ffffff"; this.SelectDiv.style.border = "1px solid #A3A3A3"; this.SelectDiv.style.borderColor = "#9ecaed"; this.SelectDiv.style.boxShadow = "0 0 10px #9ecaed"; }; /** * 鼠標經過高亮 */ this.click_a_over = function (TargetObj){ TargetObj.style.backgroundColor = ‘#9ecaed‘; TargetObj.style.color = ‘#fff‘; TargetObj.style.borderRadius = ‘3px‘; }; this.click_a_out = function (TargetObj){ TargetObj.style.backgroundColor = ‘#fff‘; TargetObj.style.color = ‘#000‘; TargetObj.style.borderRadius = ‘0‘; }; /** * 初始化數據 */ this.init_data = function (word) { if (word === ‘‘){ var datanew = sourceData; } else { var first = word.substr(0,1); var datanew; $.each(sourceData,function(key,val){ if (key === first){ datanew = {[key] : []} var i = 0; $.each(val,function(k,v){ var pinyin = v.initial; if (pinyin.indexOf(word) === 0){ datanew[key][i] = v; i++; } }); }; }); } if (datanew !== undefined) { // 最上邊的字母 if (word === ‘‘){ var title = ‘<p style="display:flex;justify-content:space-between;position:absolute;width:100%;background:#fff;overflow:hidden">‘; } else { var title = ‘‘; } var divheight = this.height - 25; var divwidth = this.width - 80; // 下面的顯示主體 var html = ‘<div style="width:100%;height:‘+divheight+‘px;z-index:99999999;overflow-y:scroll;margin-top:24px;display:block">‘; $.each(datanew,function(key,val){ var DivId = __self.TargetId + "_body_" + key; if (word === ‘‘) title += ‘<a href="#‘+key+‘" style="color:#000;text-align:center;overflow:hidden;padding:2px;width:15px;cursor: pointer;">‘+key+‘</a>‘; html += ‘<div id="‘ + DivId + ‘" style="clear: both;overflow:hidden">‘; html += ‘ <div style="float:left;width:35px;text-align:center;color:orange;display: inline-block;">‘ + key + ‘</div>‘; html += ‘ <div style="width:‘+divwidth+‘px;display: inline-block;float: left;">‘; $.each(val,function(k,v){ html += ‘ <span style="width:189px;padding:2px 4px;margin: 0 4px;cursor: pointer;display:block;float: left;" wshid="‘+v.id+‘">‘ + v.name + ‘</span>‘; }); html += ‘ </div>‘; html += ‘</div>‘; }); html += ‘</div>‘; if (word === ‘‘) title += ‘</p>‘; if (first !== undefined){ if (datanew[first].length === 0) html = ‘<div style="text-align:center;line-height:168px"><span style="color:red;font-size:24px;"><b>沒有這個課程</b></span></div>‘; } } else { var title = ‘‘; var html = ‘<div style="text-align:center;line-height:168px"><span style="color:red;font-size:24px;"><b>沒有這個課程</b></span></div>‘; } // 將html給到Div this.SelectDiv.innerHTML = title+html; }; this.bindclick = function (){ var spanobj = this.SelectDiv.getElementsByTagName(‘span‘); $.each(spanobj,function(key,val){ var id = this.getAttribute(‘wshid‘); var name = this.innerHTML; val.addEventListener(‘click‘,function(){ __self.InputObj.value = name; __self.SelectId.value = id; }); }); }; };
JS封裝的下拉框