js仿百度文库文档上传页面的分类选择器_第二版
来源:互联网 发布:oracle linux启动监听 编辑:程序博客网 时间:2024/04/23 17:01
仿百度文库文档上传页面的多级联动分类选择器第二版,支持在一个页面同时使用多个分类选择器;
此版本把HTML,CSS,以及图片都封装到“category.js”中,解决因文件路径找不到样式及图片的问题;
源码下载地址:http://download.csdn.net/detail/testcs_dn/7290577
初始状态,一个页面使用两个,可以初始化之前选中的分类:
选择状态:
当选中一个分类后,会触发“onChange”事件,如上图中的“您选择的分类编号为:xxx 隐藏输入域的内容为:xxx”,就是通过“onChange”事件输出的。
页面调用代码及说明:
<!DOCTYPE html><html><head> <title>category</title> <script type="text/javascript" src="jquery-1.10.2.min.js"></script><script type="text/javascript" src="category.js"></script><script type="text/javascript"> $(document).ready(function () { //创建一个新的分类选择器,支持一个页面中使用多个分类选择器 //可选择配置信息,默认值,说明: //sourceData:{ list:[] }, //array:分类数据源,格式参考:data/categorySourceData.js //textDefault:"\u8BF7\u9009\u62E9\u5206\u7C7B", //string:没有选择分类时的提示文字 //onChange:null, //event:当用户选中最后一级节点时触发 //onSelect:null, //event:当用户单击一个分类时触发,此事件在onChange之前触发//hidField//string:隐藏值域的ID,可以自己指定;不指定的话实际的ID=默认ID+分类实例索引//onChange事件触发后,会将当前选中的分类赋值给此域,格式:1,17,14 var category1 = $("#divCate1").category({ hidField: "hidField0", onSelect: function () { this.setCategoryName(); }, onChange: function (cid, level, text) { $("#divResult1").html("您选择的分类编号为:" + this.getCategoryCid() + "<br />隐藏输入域的内容为:" + $("#hidField0").val()); } }); //可以通过设置selectItems属性,设定初始选项 category1.selectItems = [{ cid: 1 }, { cid: 11}]; //重写获取分类的方法,可以在此方法中访问后台页面,从数据库获取分类数据 //cid:分类编号 //level:分类级别 //返回值格式:{list: [{pcid: 0,cid: 1,name: "\u6559\u80b2\u4e13\u533a",isLast: false},{pcid: 0,cid: 1,name: "\u6559\u80b2\u4e13\u533a",isLast:true}]} //节点属性说明: //pcid:父级分类编号,目前没有用到 //cid:分类编号 //name:分类名称 //isLast:是否为最后一级分类,需要根据此属性确定显示样式及响应逻辑 category1.getCategory = function (cid, level) { var cate = null; $.ajax({ type: "GET", async: false, //这里必须使用同步方式 url: "data/categorySourceData.htm", data: "T=" + Math.random(), success: function (data) { var sourceData = eval("(" + data + ")"); if (typeof cid == undefined || cid == null) { cate = sourceData; //注意:这里直接return sourceData是不行的! return cate; } if (sourceData.list) { for (var i = 0; i < sourceData.list.length; i++) { if (sourceData.list[i].cid == cid) { cate = sourceData.list[i]; break; } } if (cate == null) { for (var i = 0; i < sourceData.list.length; i++) { cate = category1._getCategory(sourceData.list[i], cid); if (cate != null) { break; } } } } }, error: function (data) { alert(data); } }); return cate; }; //设置完成后通过load方法加载 category1.load(); /////////====================================================================================== var category2 = $("#divCate2").category({ onSelect: function (cid, level, name) { this.setCategoryName(); }, onChange: function (cid, level, text) { $("#divResult2").html("您选择的分类编号为:" + this.getCategoryCid() + "<br />隐藏输入域的内容为:" + $("#" + this.config.hidField).val()); } }); category2.selectItems = [{ cid: 4 }, { cid: 73 }, { cid: 193}]; category2.getCategory = function (cid, level) { var cate = null; $.ajax({ type: "GET", async: false, url: "data/categorySourceData.htm", data: "T=" + Math.random(), success: function (data) { var sourceData = eval("(" + data + ")"); if (typeof cid == undefined || cid == null) { cate = sourceData; //注意:这里直接return sourceData是不行的! return cate; } if (sourceData.list) { for (var i = 0; i < sourceData.list.length; i++) { if (sourceData.list[i].cid == cid) { cate = sourceData.list[i]; break; } } if (cate == null) { for (var i = 0; i < sourceData.list.length; i++) { cate = category2._getCategory(sourceData.list[i], cid); if (cate != null) { break; } } } } }, error: function (data) { alert(data); } }); return cate; }; //设置完成后通过load方法加载 category2.load(); });</script></head><body><!-- 分类选择代码开始 --><!-- 为防止样式被覆盖,这里全部使用行内样式 --> <div id="divCate1"> </div><!-- 分类选择代码结束 --> <br /> <br /> <br /> <br /> <div id="divResult1"></div> <br /> <br /> <br /> <br /> <div id="divCate2"></div> <br /> <br /> <br /> <br /> <div id="divResult2"></div></body></html>源码下载地址:http://download.csdn.net/detail/testcs_dn/7290577
2 1
- js仿百度文库文档上传页面的分类选择器_第二版
- 仿百度文库文档上传页面的多级联动分类选择器
- 仿百度文库实现文档在线预览
- 仿百度文库在线浏览文档
- 百度文库上传的文档嵌入链接的小技巧
- 百度文库页面,使用CSS3选择器
- 仿百度文库解决方案(五)-flexpaper实现文档的在线预览
- 文档在线预览:Java+FlexPaper+swfTools仿百度文库的设计与实现
- 仿百度文库
- 实现仿百度文库
- 仿百度文库解决方案
- 仿百度文库解决方案
- 仿百度文库解决方案
- 仿百度文库
- 仿百度文库解决方案
- 【DotNet】仿百度文库
- 仿百度文库
- 仿百度文库解决方案
- 请乐观看待SEO优化人员的未来
- [IOS]UIButton的Title左对齐
- 从mysql数据库导入数据到mongodb的方法大全
- jndi 数据源配置详解
- 成功焊接BGA芯片技巧
- js仿百度文库文档上传页面的分类选择器_第二版
- JavaScript提前声明
- Android init language (安卓初始化语言)
- 从零开始开发Android版2048 (五) 撤销的实现
- 最重要的两部分是内容和外链,其中尤其以外链更为重要
- 在mac系统安装Apache Tomcat的详细步骤(转载自himi的博客,修改了错误添加了图片)
- gcc编译器常用的命令行参数一览
- Dbutils
- 串行乘法与并行乘法