js仿百度文库文档上传页面的分类选择器_第二版
生活随笔
收集整理的這篇文章主要介紹了
js仿百度文库文档上传页面的分类选择器_第二版
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
仿百度文庫文檔上傳頁面的多級聯動分類選擇器第二版，支持在一個頁面同時使用多個分類選擇器；
此版本把HTML，CSS，以及圖片都封裝到“category.js”中，解決因文件路徑找不到樣式及圖片的問題；
源碼下載地址：http://download.csdn.net/detail/testcs_dn/7290577
初始狀態，一個頁面使用兩個，可以初始化之前選中的分類：
選擇狀態：
當選中一個分類后，會觸發“onChange”事件，如上圖中的“您選擇的分類編號為：xxx 隱藏輸入域的內容為:xxx”，就是通過“onChange”事件輸出的。
頁面調用代碼及說明：
<!DOCTYPE html> <html> <head><title>category</title><script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src="category.js"></script> <script type="text/javascript">$(document).ready(function () {//創建一個新的分類選擇器，支持一個頁面中使用多個分類選擇器//可選擇配置信息,默認值，說明：//sourceData:{ list:[] }, //array:分類數據源，格式參考：data/categorySourceData.js//textDefault:"\u8BF7\u9009\u62E9\u5206\u7C7B", //string:沒有選擇分類時的提示文字//onChange:null, //event:當用戶選中最后一級節點時觸發//onSelect:null, //event:當用戶單擊一個分類時觸發，此事件在onChange之前觸發//hidField //string:隱藏值域的ID，可以自己指定；不指定的話實際的ID=默認ID+分類實例索引//onChange事件觸發后，會將當前選中的分類賦值給此域，格式：1,17,14var category1 = $("#divCate1").category({ hidField: "hidField0", onSelect: function () {this.setCategoryName();},onChange: function (cid, level, text) {$("#divResult1").html("您選擇的分類編號為：" + this.getCategoryCid() + "<br />隱藏輸入域的內容為：" + $("#hidField0").val());}});//可以通過設置selectItems屬性，設定初始選項category1.selectItems = [{ cid: 1 }, { cid: 11}];//重寫獲取分類的方法，可以在此方法中訪問后臺頁面，從數據庫獲取分類數據//cid:分類編號//level:分類級別//返回值格式：{list: [{pcid: 0,cid: 1,name: "\u6559\u80b2\u4e13\u533a",isLast: false},{pcid: 0,cid: 1,name: "\u6559\u80b2\u4e13\u533a",isLast:true}]}//節點屬性說明：//pcid:父級分類編號，目前沒有用到//cid:分類編號//name:分類名稱//isLast:是否為最后一級分類，需要根據此屬性確定顯示樣式及響應邏輯category1.getCategory = function (cid, level) {var cate = null;$.ajax({type: "GET",async: false, //這里必須使用同步方式url: "data/categorySourceData.htm",data: "T=" + Math.random(),success: function (data) {var sourceData = eval("(" + data + ")");if (typeof cid == undefined || cid == null) {cate = sourceData; //注意：這里直接return sourceData是不行的！return cate;}if (sourceData.list) {for (var i = 0; i < sourceData.list.length; i++) {if (sourceData.list[i].cid == cid) {cate = sourceData.list[i];break;}}if (cate == null) {for (var i = 0; i < sourceData.list.length; i++) {cate = category1._getCategory(sourceData.list[i], cid);if (cate != null) {break;}}}}},error: function (data) {alert(data);}});return cate;};//設置完成后通過load方法加載category1.load();/======================================================================================var category2 = $("#divCate2").category({ onSelect: function (cid, level, name) {this.setCategoryName();},onChange: function (cid, level, text) {$("#divResult2").html("您選擇的分類編號為：" + this.getCategoryCid() + "<br />隱藏輸入域的內容為：" + $("#" + this.config.hidField).val());}});category2.selectItems = [{ cid: 4 }, { cid: 73 }, { cid: 193}];category2.getCategory = function (cid, level) {var cate = null;$.ajax({type: "GET",async: false,url: "data/categorySourceData.htm",data: "T=" + Math.random(),success: function (data) {var sourceData = eval("(" + data + ")");if (typeof cid == undefined || cid == null) {cate = sourceData; //注意：這里直接return sourceData是不行的！return cate;}if (sourceData.list) {for (var i = 0; i < sourceData.list.length; i++) {if (sourceData.list[i].cid == cid) {cate = sourceData.list[i];break;}}if (cate == null) {for (var i = 0; i < sourceData.list.length; i++) {cate = category2._getCategory(sourceData.list[i], cid);if (cate != null) {break;}}}}},error: function (data) {alert(data);}});return cate;};//設置完成后通過load方法加載category2.load();}); </script> </head><body> <!-- 分類選擇代碼開始 --> <!-- 為防止樣式被覆蓋，這里全部使用行內樣式 --><div id="divCate1"></div> <!-- 分類選擇代碼結束 --><br /><br /><br /><br /><div id="divResult1"></div><br /><br /><br /><br /><div id="divCate2"></div><br /><br /><br /><br /><div id="divResult2"></div> </body> </html> 源碼下載地址： http://download.csdn.net/detail/testcs_dn/7290577
總結
以上是生活随笔為你收集整理的js仿百度文库文档上传页面的分类选择器_第二版的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用Scipy中的linprog解决股票融
- 下一篇： 如何应对阿里、美团、Oracle等大厂的