仿百度文庫文件上傳頁面的多級聯動分類選擇器

mybwu_com發表於2014-01-14

仿百度文庫文件上傳頁面的多級聯動分類選擇器

下載地址：http://download.csdn.net/detail/testcs_dn/6848547，下載後評論，積分會返還的。

最終效果圖：





使用示例程式碼：

<!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 () {
    //建立一個新的分類選擇器
    //可選擇配置資訊,預設值，說明：
    //sourceData:{ list:[] },                           //array:分類資料來源，格式參考：images/categorySourceData.js
    //button:"span_button",                             //id:單擊此按鈕彈出分類選擇層
    //buttonIcon:"b_buttonIcon",                        //id:按鈕圖示元素
    //textView:"span_textView",                         //id:選擇的分類名稱在這裡顯示
    //textDefault:"\u8BF7\u9009\u62E9\u5206\u7C7B",     //string:沒有選擇分類時的提示文字
    //popLayout:"div_popLayout",                        //id:分類選擇層
    //cateView:"ul_cateView",                           //id:分類列表容器
    //onChange:null,                                    //event:當使用者選中最後一級節點時觸發
    //onSelect:null                                     //event:當使用者單擊一個分類時觸發，此事件在onChange之前觸發
    var category1 = new category({ sourceData: categorySourceData, onSelect: function () {
            category1.SetCategoryText();
        },
        onChange: function (cid, level, text) {
            //可以通過selectItems屬性當前選中的分類資訊
            //selectItems屬性示例：[{ cid: 1, level:1, text:'教育專區' }, { cid: 11, level:2, text:'外語學習'}];
            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("您選擇的分類編號為：" + selectCids);
        }
    });

    //可以通過設定selectItems屬性，設定初始選項
    category1.selectItems = [{ cid: 1 }, { cid: 11}];

    //設定完成後通過load方法載入
    category1.load();
    });
</script>
<body>
<!-- 分類選擇程式碼開始 -->
<!-- 為防止樣式被覆蓋，這裡全部使用行內樣式 -->
    <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;">
                請選擇分類</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>
<!-- 分類選擇程式碼結束 -->

    <br />
    <br />
    <br />
    <br />
    <div id="divResult"></div>
</body>
</html>


相關文章