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

下载地址：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="data: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>

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

SpringBoot实现百度文库文档上传，通俗易懂适合萌新
介绍最近项目需要将word文档上传到百度文库,所以去百度智能云上看了下API,发现居然没有,而且百度文库的文章在网上居然没多少人发教程.所以这个文章是发下如何将word上传到百度文库上,因为我经常去 ...
Java实现仿百度文库文档在线阅读
为了实现这个功能,我们需要用到如下软件,Java+FlexPaper+SwfTool+OpenOffice这四大件. 1.思路我们将doc.ppt等文档格式通过openoffice转换成pdf的格式 ...
文秀才文档管理系统文档管理,CAD, 图纸管理, 百度文库, 文档在线预览
原文来自 http://www.fanganwang.com/Product-detail-item-1440.html,欢迎转载. 关键字:文档管理,CAD, 图纸管理, 百度文库, 文档在线预览 ...
百度文库文档（文字和图片）
百度文库文档(文字和图片) 背景思路预览效果代码代码解析改进方向参考资料免责申明背景我想很多人会有与我一样的经历,想复制百度文库的内容却发现要开会员,天下苦百度文库久矣,本是广大网友 ...
wps如何把文档上传到云服务器,WPS上传技巧：WPS怎么上传文件到云文档
摘要腾兴网为您分享:WPS上传技巧:WPS怎么上传文件到云文档,作业盒子,粤警民通,一直播,一起发等软件知识,以及悦考,手机虚拟机,党务管理信息系统,闪炫,数据提取工具,深度终端,爱酷学习网,首汽 ...
SpringBoot+Vue+OpenOffice实现文档管理(文档上传、下载、在线预览)
场景 SpringBoot集成OpenOffice实现doc文档转html: SpringBoot集成OpenOffice实现doc文档转html_BADAO_LIUMANG_QIZHI的博客-CSD ...
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪_实现在线预览Office文档
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪前置条件安装LibreOffice 安装OpenOffice 安装Unoconv 安装ImageMagick.x86_64 安装G ...
quill光标位置插入html，quill编辑器+word文档上传，插入指定位置
官方quill没有直接给出插入html的方式类似,下面两个方法,是quill框架提供的,但是并没有提供可以在指定光标位置插入html quill.pasteHTML:这个方法已经废弃了,但目前还是可 ...
vue - element ＜upload＞组件批量上传文档，可携带其他表单数据项一同与文件 “手动提交“ 服务器（类似百度文库系统批量上传前端界面与逻辑）超详细教程示例源码，提供界面与逻辑完整源码
效果图本示例使用的是 element 组件库,其实什么组件库都行(逻辑是一样),只要你是 vue.js 项目就能使用本教程. 本文实现了 vue + element 使用 upload 组件批量上传 ...
爬虫生活实录之---百度文库文档破解
帮同学找考试相关资料的时候瞄上了百度文库(百度文库找期末考的试卷确实特别方便),不想出钱又不想下冰点,复制粘贴还嫌累,灵机一动想用爬虫来解决这个问题.2333我凭本事爬的文档为什么要给钱目标:搞定百 ...

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

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

最新文章

热门文章