仿百度文库文档上传页面的多级联动分类选择器
下载地址: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>
分享到:
相关推荐
仿百度文库文档上传页面的多级联动分类选择器, 具体请参考:http://blog.csdn.net/testcs_dn/article/details/18268975
仿百度文库文档上传页面的分类选择器,支持在一个页面使用多个;效果及应用参考:http://blog.csdn.net/testcs_dn/article/details/24968097
Java+FlexPaper+swfTools仿百度文库文档在线预览系统设计与实现.docxJava+FlexPaper+swfTools仿百度文库文档在线预览系统设计与实现.docxJava+FlexPaper+swfTools仿百度文库文档在线预览系统设计与实现.docxJava+...
仿百度文库移动端模板 仿百度文库移动端模板 仿百度文库移动端模板 仿百度文库移动端模板 仿百度文库移动端模板 仿百度文库移动端模板 仿百度文库移动端模板 仿百度文库移动端模板 仿百度文库移动端...
仿百度文库解决方案(二)——利用Jacob调用MS Office转换文档为PDF 仿百度文库解决方案(三)——利用JCom调用MS Office或者Acrobat API转换文档为PDF 仿百度文库解决方案(四)——利用JODConverter调用OpenOffice...
仿百度文库实现文档在线预览,包括代码,及备注说明
最近有个项目需要用到类似百度文库以及豆丁的在线浏览组件, 网上转悠半天就找到了个flexpaper,lexpaper 支持的文档类型为swf格式。 于是乎,就想着把pdf文件转换成swf,因为装了adobereader软件的电脑ms word之...
该在线文档系统实现的功能基本与百度文库类似,可以在线阅读文档、下载文档、免费下载文档、财富值下载文档、文档分类、在线充值积分等等,用户可以对自己需求的文档进行悬赏。总的来说跟百度文库功能基本相似。后台...
ThinkPHP精仿百度文库网在线文档门户网站源码下载 相信百度文库大家一定都是用过或者是知道的, 在百度文库我们可以搜索我们需要的文档,然后进行在线阅读或者下载 当然,类似这样的网站除了百度文库还有很多,比如...
仿百度文库所有JAR包,采用了exec执行openoffice和SWFTools命令方式先把上传文件转成PDF,通过SWFTools把PDF转成SWF格式展示。
Java+FlexPaper+swfTools仿百度文库文档在线预览系统设计与实现.pdfJava+FlexPaper+swfTools仿百度文库文档在线预览系统设计与实现.pdfJava+FlexPaper+swfTools仿百度文库文档在线预览系统设计与实现.pdfJava+...
最新仿百度文库源码仿豆丁文档源码在线文档分享源码 带全套工具 带一套downsoft模版的源码
仿百度文库源码,内附文档 和demo仿百度文库源码,内附文档 和demo
php仿百度文库源码,把"php仿百度文库源码"文件夹下的文件放到你的WEB根目录,建立数据库docshare,
仿百度文库的在线预览文档转换的demo。实现doc、xls、ppt、txt等文档上传再预览的的实例代码
ASP.NET 仿百度文库文档在线预览 支持格式.pdf,.doc,docx,xls,xlsx,.ppt,pptx
PHP高仿百度文库,自带安装程序。环境要求: Windows服务器 php5.4+版本支持 .net framework
仿百度文库使用java实现在页面上进行office类文件的浏览。 非本人编写的代码,但可以使用。 包含两个资源,需要下载OpenOffice和swftools工具,修改代码中的相关路径。 实现方法是:1、word转换为pdf;2、pdf转换为...
仿百度文库 用flexpaper_flash+pdf2swf