仿百度文库文档上传页面的多级联动分类选择器
生活随笔
收集整理的這篇文章主要介紹了
仿百度文库文档上传页面的多级联动分类选择器
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
仿百度文庫文檔上傳頁面的多級(jí)聯(lián)動(dòng)分類選擇器
下載地址：http://download.csdn.net/detail/testcs_dn/6848547，下載后評(píng)論，積分會(huì)返還的。
最終效果圖：
使用示例代碼：
<!DOCTYPE html> <html> <head><title>category</title> </head> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src="images/categorySourceData.js"></script> <script type="text/javascript" src="category.min.js"></script> <script type="text/javascript"> $(document).ready(function () {//創(chuàng)建一個(gè)新的分類選擇器//可選擇配置信息,默認(rèn)值，說明：//sourceData:{ list:[] }, //array:分類數(shù)據(jù)源，格式參考：images/categorySourceData.js//button:"span_button", //id:單擊此按鈕彈出分類選擇層//buttonIcon:"b_buttonIcon", //id:按鈕圖標(biāo)元素//textView:"span_textView", //id:選擇的分類名稱在這里顯示//textDefault:"\u8BF7\u9009\u62E9\u5206\u7C7B", //string:沒有選擇分類時(shí)的提示文字//popLayout:"div_popLayout", //id:分類選擇層//cateView:"ul_cateView", //id:分類列表容器//onChange:null, //event:當(dāng)用戶選中最后一級(jí)節(jié)點(diǎn)時(shí)觸發(fā)//onSelect:null //event:當(dāng)用戶單擊一個(gè)分類時(shí)觸發(fā)，此事件在onChange之前觸發(fā)var category1 = new category({ sourceData: categorySourceData, onSelect: function () {category1.SetCategoryText();},onChange: function (cid, level, text) {//可以通過selectItems屬性當(dāng)前選中的分類信息//selectItems屬性示例：[{ cid: 1, level:1, text:'教育專區(qū)' }, { cid: 11, level:2, text:'外語學(xué)習(xí)'}];var selectCids = "";for (var i = 0; i < category1.selectItems.length; i++) {if (i == 0) {selectCids = category1.selectItems[i].cid;} else {selectCids += "," + category1.selectItems[i].cid;}}$("#divResult").text("您選擇的分類編號(hào)為：" + selectCids);}});//可以通過設(shè)置selectItems屬性，設(shè)定初始選項(xiàng)category1.selectItems = [{ cid: 1 }, { cid: 11}];//設(shè)置完成后通過load方法加載category1.load();}); </script> <body> <!-- 分類選擇代碼開始 --> <!-- 為防止樣式被覆蓋，這里全部使用行內(nèi)樣式 --><div style="position: relative; z-index: 3; margin: 0;padding: 0; display: block; color: #333; font: 12px/1.333 arial,helvetica,clean;"><span id="span_button" tabindex="-1" hidefocus="true" cidstr=""cids="" obj="" beforetext="" style="background: url(images/btn_rx_3e2ffb74.png) repeat-x;display: inline-block; height: 18px; line-height: 18px; padding: 5px 10px; border: 1px solid #E1E1E1;cursor: pointer; outline: 0;"><span id="span_textView" style="_position: relative;_top: 2px; line-height: 18px; cursor: pointer; color: #333; font: 12px/1.333 arial,helvetica,clean;">請(qǐng)選擇分類</span> <b id="b_buttonIcon" style="background: url(images/spr_upload_e112e563.png) no-repeat 0 -267px;display: -moz-inline-stack; display: inline-block; padding: 0; vertical-align: -2px;font-size: 0; line-height: 9999em; overflow: hidden; position: relative; width: 16px;height: 16px; margin-left: 5px!important; font-style: normal; font-weight: normal;cursor: pointer; color: #333;"></b></span><div id="div_popLayout" tabindex="17" hidefocus="true" style="display: none; position: absolute;top: 29px; left: 0; z-index: 2; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1); outline: 0;border: 1px solid #AAA; background: #FFF; clip: rect(0 602px 202px 0); height: 171px;margin: -1px; overflow: hidden; padding: 0; width: 553px; color: #333; font: 12px / 1.333 arial, helvetica, clean;"><div id="wkCategory-TANGRAM$18" style="* zoom: 1; _display: inline;display: block; margin: 0; padding: 0;"><ul id="ul_cateView" style="list-style: none; margin: 0; padding: 0; display: block;"></ul></div></div></div> <!-- 分類選擇代碼結(jié)束 --><br /><br /><br /><br /><div id="divResult"></div> </body> </html>總結(jié)
以上是生活随笔為你收集整理的仿百度文库文档上传页面的多级联动分类选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 服务器架设
- 下一篇： 修复鹏城开发者云硬盘扩容报错 fdisk