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

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

下载地址: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>
时间: 2024-09-12 03:13:51

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

js仿百度文库文档上传页面的分类选择器_第二版

仿百度文库文档上传页面的多级联动分类选择器第二版,支持在一个页面同时使用多个分类选择器: 此版本把HTML,CSS,以及图片都封装到"category.js"中,解决因文件路径找不到样式及图片的问题: 源码下载地址:http://download.csdn.net/detail/testcs_dn/7290577 初始状态,一个页面使用两个,可以初始化之前选中的分类: 选择状态: 当选中一个分类后,会触发"onChange"事件,如上图中的"您选择的分类编

怎样将WPS文档上传至云端?

  怎样将WPS文档上传至云端? 1.打开WPS某文档,点击顶端工具栏中的"办公空间",在弹出的菜单中点击"保存到云文档". 2.接着我们可以在云端新建文件夹或者直接保存均可.

文件类型识别-.WPS文档上传的判断为什么不能识别

问题描述 .WPS文档上传的判断为什么不能识别 'application/pdf', 'application/msword', 'application/vnd.ms-works', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ); ......... if(!in_array($file["type"], $uptypes)) //检查文件类型 { echo "文件类型

百度文库删除自己上传过的文档的教程

  有时候,我们上传一些文档之后,又想删除,我们该怎么删除的,教大家一个删除的方法. 1.首先要进入百度文库的主页面.可以通过直接搜索百度文库或者直接在百度上面点击文库. 2.进入主页以后,选择上面的我的文库. 3.这时候,就会看到你上传的所有的文档的信息列表不管是成功还是不成功的. 4.然后再自己想要删除的那个文档前面,把√打上去. 5.这时候这个上面就看到删除这个按钮可以使用了,然后点击删除就可以了. 6.也可以在√打上去以后,直接在这个文件上面点击右键,会出现菜单,选择删除,也可以的. 7

如何删除百度文库中自己上传的文档呢?

1.我们先在百度登录,然后如下图在百度中会看到有一个[个人中心]→[我的文库],如下图所示 文档呢?-百度文库删除上传文档">2.然后在我的文库中我们点击[我的上传]如下图所示. 3.在这里就是我开始不知道删除文库的原因了,他的删除在上面选择在下面了,我们要选择下面的要删除的文档,然后点击上面的删除. 4.我们点击删除还是会给个确定删除提示了. 5.上面几步操作完会提示你删除成功,这文档就已经删除成功了. 小编提醒你,如果你删除错误了我们可以在回收站中找回来哦,如果你要在回收站都删除了那就

asp..net2.0文档上传 的一个方法(一个上传控件,上传多个文档 )

控件|上传|上传控件  前台 :   <table style="width:100%">         <tr>             <td style="width:15%">                 类型名称:</td>             <td>                <asp:DropDownList ID="TypeDDL" runat=&q

如何在在crs双机互备情况下实现文档上传?

问题描述 一台服务器用smartupload可以解决,可是另一台如果不想用ftp的话怎么实现文档的同步上传呢?

谁有javascript电子版文档 上传到这里 多谢啦

问题描述 要完整版的javascript电子文档,有例子说明 解决方案 解决方案二:JavaScript光看所谓的电子盗版书是学不会的!解决方案三:到卓越上去买吧!电子书实在是看不下去···

教育技术服务平台电子档上传方法

  家长工作内容 1.家长携带家庭户籍簿(原件及复印件,学生户口卡需提前复印).智能手机.学生身份证参加家长会. 2.家长会上,核查孩子的学籍信息是否正确,如有错误,在变更栏中填写变更信息,有关键信息变更的,请同时提交相关证明材料.检查无误后签字确认. 3.下载安装教育技术服务平台并注册登录,拍照上传已签字确认的"学籍信息确认表"作为电子版存档. 平台操作演示 步骤一:学生学籍信息的核查与确认 1.仔细阅读"全国中小学学籍基础信息确认表",核对学生信息,如有错误.变