仿百度文库文档上传页面的多级联动分类选择器

来源:互联网 发布:手机淘宝如何注销账户 编辑:程序博客网 时间:2022/07/04 22:36

仿百度文库文档上传页面的多级联动分类选择器

下载地址: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>


1 0
原创粉丝点击