下拉選項LQuery

最近學習瞭一下jquery和js的面向對象的寫法,寫瞭一個下拉選項,跟大傢分享一下。
001 /**
002  * Query下拉選項處理類
003  *
004  * @author  張成軒
005  * @version 1.0
006  * @email  loongzcx@163.com
007  */
008 var LQuery = function() {
009     /* 下拉選項顯示內容數組 */
010     this.queryArr = new Array();
011     /* 下拉選項調用對象 */
012     this.queryDoc;
013     /* Query查詢標識 */
014     this.queryFlag;
015     /* 其他賦值框對象ID數組 */
016     this.docArr;
017     /* 按鍵點擊事件對象 */
018     this.event;
019     /* 下拉選項顯示x坐標 */
020     this.x = 0;
021     /* 下拉選項顯示y坐標 */
022     this.y = 0;
023     /* 選項框寬度 */
024     this.width = 150;
025     /* 選項框顯示列數 */
026     this.size = 8;
027     /* 是否強制刷新 */
028     this.memory = false;
029     /* 下拉選項顯示分隔符 */
030     this.separator = "-";
031     /* Ajax發送連接 */
032     this.sendUrl = "./ajax.html";
033 };
034 
035 LQuery.prototype = {
036     /**
037      * 修改Query默認設置
038      *
039      * @param set
040      *            默認設置對象
041      */
042     set : function(set) {
043         // 設置下拉選項寬度
044         if (set.width != undefined) {
045             this.width = set.width;
046         }
047         // 設置下拉選項框顯示列數
048         if (set.size != undefined) {
049             this.size = set.size;
050         }
051         // 設置強制刷新標志
052         if (set.memory != undefined) {
053             this.memory = set.memory;
054         }
055         // 設置下拉選項顯示分隔符
056         if (set.separator != undefined) {
057             this.separator = set.separator;
058         }
059     },
060     
061     /**
062      * Query下拉選項調用入口函數,使用ajax獲取下拉數據
063      *
064      * @param docArr
065      *            下拉選項調用對象及賦值對象ID數組
066      * @param flag
067      *            Query查詢標識
068      * @param event
069      *            按鍵點擊事件,若需要兼容firefox鍵盤按鍵處理,需要傳入該字段
070      * @param queryArrStr
071      *            指定下拉選項顯示信息字符串
072      */
073     show : function(docArr, flag, event, queryArrStr) {
074         // 觸發起始時間,用於防止並發
075         this.startTime = new Date();
076         // 按鍵點擊事件對象
077         this.event = event;
078         // 判斷是否通過setArr方法設置顯示數據
079         if (this.queryArrStr != undefined) {
080             // 設置顯示數據字符串
081             queryArrStr = this.queryArrStr;
082             // 清空this中的顯示數據字符串,以便再次調用
083             this.queryArrStr = undefined;
084         }
085         // 判斷docArr是否為數組
086         if ($.isArray(docArr)) {
087             // 獲取docArr第一個元素,並從數組移除第一個元素
088             var doc = docArr.shift();
089         } else {
090             var doc = docArr;
091             // 其他賦值框對象ID數組設置為空
092             docArr = undefined;
093         }
094         // 鍵盤按鍵處理
095         if (this.keyUp()) {
096             return;
097         }
098         // 判斷是否為同一個觸發對象,若默認設置中的memory為true,每次調用都會強制刷新
099         if (doc != this.queryDoc || this.queryArr.length == 0 || this.memory) {
100             // 下拉選項顯示內容數組
101             this.queryArr = new Array();
102             // 下拉選項調用對象
103             this.queryDoc = doc;
104             // Query查詢標識
105             this.queryFlag = flag;
106             // 其它賦值框對象ID數組
107             this.docArr = docArr;
108             // 下拉選項顯示坐標
109             this.setXY(doc);
110             // 檢測是否設置瞭待顯示的數據
111             if (queryArrStr != undefined) {
112                 // 已指定顯示數據,直接處理顯示信息字符串
113                 this.arrSplit(queryArrStr);
114                 // 生成下拉選項
115                 this.init();
116             } else {
117                 // 使用ajax發送
118                 this.send(this.startTime);
119             }
120         } else {
121             // 下拉選項顯示坐標
122             this.setXY(doc);
123             // 生成下拉選項
124             this.init();
125         }
126     },
127     
128     /**
129      * 生成下拉選項
130      */
131     init : function() {
132         // 檢測_queryInf是否已經生成
133         if ($('#_queryInf').val() == undefined) {
134             $('body').append("<p id='_queryInf' style='display:none;'></p>");
135         }
136         // 生成下拉選項
137         $('#_queryInf').html("<select id='_qInf' "
138                 + "style='background:#F7F6E5;font-size:10pt;font-family:宋體;width:"
139                 + this.width + "px;' size=" + this.size
140                 + "></select>");
141         // 設置顯示菜單項
142         for ( var row = 0; row < this.queryArr.length; row++) {
143             $('#_qInf').append('<option>' + this.queryArr[row].join(this.separator)
144                 + '</option>');
145         }
146         // 設置初始選中值
147         this.find($(this.queryDoc).val());
148         // 綁定雙擊事件
149         $('#_qInf').dblclick(this, function(event) {
150             event.data.click();
151         });
152         // 下拉選項失去焦點事件
153         $('#_qInf').focusout(function() {
154             $('#_queryInf').hide(50);
155         });
156         // 錄入框失去焦點事件
157         $(this.queryDoc).focusout(function() {
158             // 判斷下拉選項是否獲得焦點,為瞭兼容火狐,使用setTimeout延遲觸發
159             setTimeout(function() {
160                 if (!$('#_qInf').is(':focus')) {
161                     $('#_queryInf').hide(50);
162                 }
163             }, 1);
164         });
165         // 下拉選項回車選取事件
166         $('#_qInf').keydown(this, function(event) {
167             if (event.keyCode == 13) {
168                 event.data.click();
169             }
170         });
171         // 顯示下拉選項
172         $('#_queryInf').css('position', 'absolute');
173         $('#_queryInf').css('left', this.x);
174         $('#_queryInf').css('top', this.y);
175         $('#_queryInf').show('fast');
176     },
177     
178     /**
179      * 鍵盤按鍵處理函數
180      *
181      * @param event
182      *            按鍵點擊事件,若需要兼容firefox鍵盤按鍵處理,需要傳入該字段
183      */
184     keyUp : function() {
185         try {
186             var keyCode = window.event ? window.event.keyCode
187                     : this.event.keyCode;
188             // 獲取下拉選項已選擇項
189             var row = $("#_queryInf option:selected").index();
190             if (keyCode == "38") {
191                 // 鍵盤上鍵處理,選擇上移
192                 $('#_qInf > option:nth-child(' + row + ')').attr('selected',
193                         true);
194             } else if (keyCode == "40") {
195                 // 鍵盤下鍵處理,選擇下移
196                 $('#_qInf > option:nth-child(' + (row + 2) + ')').attr(
197                         'selected', true);
198             } else if (keyCode == "13") {
199                 // 鍵盤回車鍵處理,選擇項賦值
200                 if (row != -1) {
201                     this.click();
202                     return true;
203                 }
204             } else {
205                 return false;
206             }
207             // 下拉選項獲取焦點
208             $('#_qInf').focus();
209             return true;
210         } catch (ex) {
211             return false;
212         }
213     },
214     
215     /**
216      * ajax發送函數
217      *
218      * @param startTime
219      *            起始時間,防止ajax尚未處理完畢時觸發其它下拉選項
220      */
221     send : function(startTime) {
222         // 調用ajax發送請求
223         $.ajax({
224             // 發送請求方式
225             type : "POST",
226             // 發送連接
227             url : this.sendUrl,
228             // 發送附加參數
229             data : "queryFlag=" + this.queryFlag,
230             // 設置返回類型
231             dataType : "text",
232             // 修改發送回調函數this指向
233             context : this,
234             // 連接返回信息預處理
235             dataFilter : function(data) {
236                 return $.trim(data);
237             },
238             // 連接響應成功回調函數
239             success : function(data) {
240                 // 檢測是否有其它下拉選項被觸發
241                 if (startTime == this.startTime) {
242                     // 解析ajax返回字符串
243                     this.arrSplit(data);
244                     // 生成下拉選項
245                     this.init();
246                 }
247             },
248             // 連接響應失敗回調函數
249             error : function() {
250                 alert("頁面訪問異常");
251             }
252         });
253     },
254     
255     /**
256      * 下拉選項雙擊事件
257      */
258     click : function() {
259         // 獲取點擊項索引
260         var resRow = $("#_queryInf option:selected").index();
261         // 判斷標識是否存在
262         if (resRow != -1 && this.queryArr[resRow] != undefined) {
263             // 設置錄入框值
264             $(this.queryDoc).val(this.queryArr[resRow][0]);
265             // 判斷是否有其他賦值框
266             if (this.docArr != undefined && this.docArr.length > 0) {
267                 // 判斷docArr是否為數組
268                 for ( var row = 0; row < this.docArr.length; row++) {
269                     // 設置錄入框名稱
270                     if (row + 1 < this.queryArr[resRow].length) {
271                         $('#' + this.docArr[row]).val(
272                                 this.queryArr[resRow][row + 1]);
273                     } else {
274                         // 若返回信息數組項不存在,將錄入框置為空
275                         $('#' + this.docArr[row]).val("");
276                     }
277                 }
278             }
279             // 調用點擊回調處理函數,若有需要可以使用
280             try {
281                 afterQueryClick(this.queryArr[resRow], this.queryFlag, this);
282             } catch (ex) {
283             }
284             // 隱藏下拉選項
285             $('#_queryInf').hide(50);
286         }
287     },
288     
289     /**
290      * 設置下拉菜單選擇項,支持大小寫進行匹配
291      *
292      * @param value
293      *            錄入框值
294      */
295     find : function(value) {
296         if (value != "") {
297             // 將字符串轉換成小寫
298             value = value.toLowerCase();
299             // 循環下拉選項數組
300             for ( var row = 0; row < this.queryArr.length; row++) {
301                 // 將數組轉換成小寫字符串
302                 var queryStr = this.queryArr[row].join("-").toLowerCase();
303                 // 匹配下拉選項的值
304                 if (value.length <= queryStr.length
305                         && value == queryStr.substring(0, value.length)) {
306                     // 設置選擇項
307                     $('#_qInf > option:nth-child(' + (row + 1) + ')').attr(
308                             'selected', true);
309                     break;
310                 }
311             }
312         }
313     },
314     
315     /**
316      * 設置下拉選項顯示信息
317      *
318      * @param queryArrStr
319      *            下拉選項顯示信息字符串
320      */
321     setArr : function(queryArrStr) {
322         // 設置下拉選項顯示信息字符串
323         this.queryArrStr = queryArrStr;
324         // 返回本對象
325         return this;
326     },
327     
328     /**
329      * 設置下拉選項顯示坐標
330      *
331      * @param doc
332      *            下拉選項調用對象
333      */
334     setXY : function(doc) {
335         this.x = 0;
336         this.y = doc.offsetHeight;
337         // 累加父窗口坐標
338         while (doc.offsetParent) {
339             this.x += doc.offsetLeft;
340             this.y += doc.offsetTop;
341             doc = doc.offsetParent;
342         }
343     },
344     
345     /**
346      * 顯示信息字符串拆分函數
347      *
348      * @param queryArrSrt
349      *            待拆分字符串
350      */
351     arrSplit : function(queryArrSrt) {
352         // 拆分ajax返回字符串生成二維數組
353         // 按|拆分行
354         var queryArr = queryArrSrt.split("|");
355         for ( var row = 0; row < queryArr.length; row++) {
356             // 按^拆分列
357             queryArr[row] = queryArr[row].split("^");
358         }
359         this.queryArr = queryArr;
360     }
361 };
362 
363 // 實例化對象
364 var query = new LQuery();
最近學習瞭一下jquery和js的面向對象的寫法,寫瞭一個下拉選項,跟大傢分享一下。
view source
print?
001 /**
002  * Query下拉選項處理類
003  *
004  * @author  張成軒
005  * @version 1.0
006  * @email  loongzcx@163.com
007  */
008 var LQuery = function() {
009     /* 下拉選項顯示內容數組 */
010     this.queryArr = new Array();
011     /* 下拉選項調用對象 */
012     this.queryDoc;
013     /* Query查詢標識 */
014     this.queryFlag;
015     /* 其他賦值框對象ID數組 */
016     this.docArr;
017     /* 按鍵點擊事件對象 */
018     this.event;
019     /* 下拉選項顯示x坐標 */
020     this.x = 0;
021     /* 下拉選項顯示y坐標 */
022     this.y = 0;
023     /* 選項框寬度 */
024     this.width = 150;
025     /* 選項框顯示列數 */
026     this.size = 8;
027     /* 是否強制刷新 */
028     this.memory = false;
029     /* 下拉選項顯示分隔符 */
030     this.separator = "-";
031     /* Ajax發送連接 */
032     this.sendUrl = "./ajax.html";
033 };
034 
035 LQuery.prototype = {
036     /**
037      * 修改Query默認設置
038      *
039      * @param set
040      *            默認設置對象
041      */
042     set : function(set) {
043         // 設置下拉選項寬度
044         if (set.width != undefined) {
045             this.width = set.width;
046         }
047         // 設置下拉選項框顯示列數
048         if (set.size != undefined) {
049             this.size = set.size;
050         }
051         // 設置強制刷新標志
052         if (set.memory != undefined) {
053             this.memory = set.memory;
054         }
055         // 設置下拉選項顯示分隔符
056         if (set.separator != undefined) {
057             this.separator = set.separator;
058         }
059     },
060     
061     /**
062      * Query下拉選項調用入口函數,使用ajax獲取下拉數據
063      *
064      * @param docArr
065      *            下拉選項調用對象及賦值對象ID數組
066      * @param flag
067      *            Query查詢標識
068      * @param event
069      *            按鍵點擊事件,若需要兼容firefox鍵盤按鍵處理,需要傳入該字段
070      * @param queryArrStr
071      *            指定下拉選項顯示信息字符串
072      */
073     show : function(docArr, flag, event, queryArrStr) {
074         // 觸發起始時間,用於防止並發
075         this.startTime = new Date();
076         // 按鍵點擊事件對象
077         this.event = event;
078         // 判斷是否通過setArr方法設置顯示數據
079         if (this.queryArrStr != undefined) {
080             // 設置顯示數據字符串
081             queryArrStr = this.queryArrStr;
082             // 清空this中的顯示數據字符串,以便再次調用
083             this.queryArrStr = undefined;
084         }
085         // 判斷docArr是否為數組
086         if ($.isArray(docArr)) {
087             // 獲取docArr第一個元素,並從數組移除第一個元素
088             var doc = docArr.shift();
089         } else {
090             var doc = docArr;
091             // 其他賦值框對象ID數組設置為空
092             docArr = undefined;
093         }
094         // 鍵盤按鍵處理
095         if (this.keyUp()) {
096             return;
097         }
098         // 判斷是否為同一個觸發對象,若默認設置中的memory為true,每次調用都會強制刷新
099         if (doc != this.queryDoc || this.queryArr.length == 0 || this.memory) {
100             // 下拉選項顯示內容數組
101             this.queryArr = new Array();
102             // 下拉選項調用對象
103             this.queryDoc = doc;
104             // Query查詢標識
105             this.queryFlag = flag;
106             // 其它賦值框對象ID數組
107             this.docArr = docArr;
108             // 下拉選項顯示坐標
109             this.setXY(doc);
110             // 檢測是否設置瞭待顯示的數據
111             if (queryArrStr != undefined) {
112                 // 已指定顯示數據,直接處理顯示信息字符串
113                 this.arrSplit(queryArrStr);
114                 // 生成下拉選項
115                 this.init();
116             } else {
117                 // 使用ajax發送
118                 this.send(this.startTime);
119             }
120         } else {
121             // 下拉選項顯示坐標
122             this.setXY(doc);
123             // 生成下拉選項
124             this.init();
125         }
126     },
127     
128     /**
129      * 生成下拉選項
130      */
131     init : function() {
132         // 檢測_queryInf是否已經生成
133         if ($('#_queryInf').val() == undefined) {
134             $('body').append("<p id='_queryInf' style='display:none;'></p>");
135         }
136         // 生成下拉選項
137         $('#_queryInf').html("<select id='_qInf' "
138                 + "style='background:#F7F6E5;font-size:10pt;font-family:宋體;width:"
139                 + this.width + "px;' size=" + this.size
140                 + "></select>");
141         // 設置顯示菜單項
142         for ( var row = 0; row < this.queryArr.length; row++) {
143             $('#_qInf').append('<option>' + this.queryArr[row].join(this.separator)
144                 + '</option>');
145         }
146         // 設置初始選中值
147         this.find($(this.queryDoc).val());
148         // 綁定雙擊事件
149         $('#_qInf').dblclick(this, function(event) {
150             event.data.click();
151         });
152         // 下拉選項失去焦點事件
153         $('#_qInf').focusout(function() {
154             $('#_queryInf').hide(50);
155         });
156         // 錄入框失去焦點事件
157         $(this.queryDoc).focusout(function() {
158             // 判斷下拉選項是否獲得焦點,為瞭兼容火狐,使用setTimeout延遲觸發
159             setTimeout(function() {
160                 if (!$('#_qInf').is(':focus')) {
161                     $('#_queryInf').hide(50);
162                 }
163             }, 1);
164         });
165         // 下拉選項回車選取事件
166         $('#_qInf').keydown(this, function(event) {
167             if (event.keyCode == 13) {
168                 event.data.click();
169             }
170         });
171         // 顯示下拉選項
172         $('#_queryInf').css('position', 'absolute');
173         $('#_queryInf').css('left', this.x);
174         $('#_queryInf').css('top', this.y);
175         $('#_queryInf').show('fast');
176     },
177     
178     /**
179      * 鍵盤按鍵處理函數
180      *
181      * @param event
182      *            按鍵點擊事件,若需要兼容firefox鍵盤按鍵處理,需要傳入該字段
183      */
184     keyUp : function() {
185         try {
186             var keyCode = window.event ? window.event.keyCode
187                     : this.event.keyCode;
188             // 獲取下拉選項已選擇項
189             var row = $("#_queryInf option:selected").index();
190             if (keyCode == "38") {
191                 // 鍵盤上鍵處理,選擇上移
192                 $('#_qInf > option:nth-child(' + row + ')').attr('selected',
193                         true);
194             } else if (keyCode == "40") {
195                 // 鍵盤下鍵處理,選擇下移
196                 $('#_qInf > option:nth-child(' + (row + 2) + ')').attr(
197                         'selected', true);
198             } else if (keyCode == "13") {
199                 // 鍵盤回車鍵處理,選擇項賦值
200                 if (row != -1) {
201                     this.click();
202                     return true;
203                 }
204             } else {
205                 return false;
206             }
207             // 下拉選項獲取焦點
208             $('#_qInf').focus();
209             return true;
210         } catch (ex) {
211             return false;
212         }
213     },
214     
215     /**
216      * ajax發送函數
217      *
218      * @param startTime
219      *            起始時間,防止ajax尚未處理完畢時觸發其它下拉選項
220      */
221     send : function(startTime) {
222         // 調用ajax發送請求
223         $.ajax({
224             // 發送請求方式
225             type : "POST",
226             // 發送連接
227             url : this.sendUrl,
228             // 發送附加參數
229             data : "queryFlag=" + this.queryFlag,
230             // 設置返回類型
231             dataType : "text",
232             // 修改發送回調函數this指向
233             context : this,
234             // 連接返回信息預處理
235             dataFilter : function(data) {
236                 return $.trim(data);
237             },
238             // 連接響應成功回調函數
239             success : function(data) {
240                 // 檢測是否有其它下拉選項被觸發
241                 if (startTime == this.startTime) {
242                     // 解析ajax返回字符串
243                     this.arrSplit(data);
244                     // 生成下拉選項
245                     this.init();
246                 }
247             },
248             // 連接響應失敗回調函數
249             error : function() {
250                 alert("頁面訪問異常");
251             }
252         });
253     },
254     
255     /**
256      * 下拉選項雙擊事件www.aiwalls.com
257      */
258     click : function() {
259         // 獲取點擊項索引
260         var resRow = $("#_queryInf option:selected").index();
261         // 判斷標識是否存在
262         if (resRow != -1 && this.queryArr[resRow] != undefined) {
263             // 設置錄入框值
264             $(this.queryDoc).val(this.queryArr[resRow][0]);
265             // 判斷是否有其他賦值框
266             if (this.docArr != undefined && this.docArr.length > 0) {
267                 // 判斷docArr是否為數組
268                 for ( var row = 0; row < this.docArr.length; row++) {
269                     // 設置錄入框名稱
270                     if (row + 1 < this.queryArr[resRow].length) {
271                         $('#' + this.docArr[row]).val(
272                                 this.queryArr[resRow][row + 1]);
273                     } else {
274                         // 若返回信息數組項不存在,將錄入框置為空
275                         $('#' + this.docArr[row]).val("");
276                     }
277                 }
278             }
279             // 調用點擊回調處理函數,若有需要可以使用
280             try {
281                 afterQueryClick(this.queryArr[resRow], this.queryFlag, this);
282             } catch (ex) {
283             }
284             // 隱藏下拉選項
285             $('#_queryInf').hide(50);
286         }
287     },
288     
289     /**
290      * 設置下拉菜單選擇項,支持大小寫進行匹配
291      *
292      * @param value
293      *            錄入框值
294      */
295     find : function(value) {
296         if (value != "") {
297             // 將字符串轉換成小寫
298             value = value.toLowerCase();
299             // 循環下拉選項數組
300             for ( var row = 0; row < this.queryArr.length; row++) {
301                 // 將數組轉換成小寫字符串
302                 var queryStr = this.queryArr[row].join("-").toLowerCase();
303                 // 匹配下拉選項的值
304                 if (value.length <= queryStr.length
305                         && value == queryStr.substring(0, value.length)) {
306                     // 設置選擇項
307                     $('#_qInf > option:nth-child(' + (row + 1) + ')').attr(
308                             'selected', true);
309                     break;
310                 }
311             }
312         }
313     },
314     
315     /**
316      * 設置下拉選項顯示信息
317      *
318      * @param queryArrStr
319      *            下拉選項顯示信息字符串
320      */
321     setArr : function(queryArrStr) {
322         // 設置下拉選項顯示信息字符串
323         this.queryArrStr = queryArrStr;
324         // 返回本對象
325         return this;
326     },
327     
328     /**
329      * 設置下拉選項顯示坐標
330      *
331      * @param doc
332      *            下拉選項調用對象
333      */
334     setXY : function(doc) {
335         this.x = 0;
336         this.y = doc.offsetHeight;
337         // 累加父窗口坐標
338         while (doc.offsetParent) {
339             this.x += doc.offsetLeft;
340             this.y += doc.offsetTop;
341             doc = doc.offsetParent;
342         }
343     },
344     
345     /**
346      * 顯示信息字符串拆分函數
347      *
348      * @param queryArrSrt
349      *            待拆分字符串
350      */
351     arrSplit : function(queryArrSrt) {
352         // 拆分ajax返回字符串生成二維數組
353         // 按|拆分行
354         var queryArr = queryArrSrt.split("|");
355         for ( var row = 0; row < queryArr.length; row++) {
356             // 按^拆分列
357             queryArr[row] = queryArr[row].split("^");
358         }
359         this.queryArr = queryArr;
360     }
361 };
362 
363 // 實例化對象
364 var query = new LQuery();

 作者:張成軒

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *