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

2024-03-25 21:58

本文主要是介绍仿百度文库文档上传页面的多级联动分类选择器,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

下载地址: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://www.chinasem.cn/article/846363

相关文章

C#实现将Office文档(Word/Excel/PDF/PPT)转为Markdown格式

《C#实现将Office文档(Word/Excel/PDF/PPT)转为Markdown格式》Markdown凭借简洁的语法、优良的可读性,以及对版本控制系统的高度兼容性,逐渐成为最受欢迎的文档格式... 目录为什么要将文档转换为 Markdown 格式使用工具将 Word 文档转换为 Markdown(.

详解如何使用Python构建从数据到文档的自动化工作流

《详解如何使用Python构建从数据到文档的自动化工作流》这篇文章将通过真实工作场景拆解,为大家展示如何用Python构建自动化工作流,让工具代替人力完成这些数字苦力活,感兴趣的小伙伴可以跟随小编一起... 目录一、Excel处理:从数据搬运工到智能分析师二、PDF处理:文档工厂的智能生产线三、邮件自动化:

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现:样式与表格的深度复制1. 表格复制(含样式与内容)2

Maven项目中集成数据库文档生成工具的操作步骤

《Maven项目中集成数据库文档生成工具的操作步骤》在Maven项目中,可以通过集成数据库文档生成工具来自动生成数据库文档,本文为大家整理了使用screw-maven-plugin(推荐)的完... 目录1. 添加插件配置到 pom.XML2. 配置数据库信息3. 执行生成命令4. 高级配置选项5. 注意事

GitLab文件的上传与下载方式

《GitLab文件的上传与下载方式》:本文主要介绍GitLab文件的上传与下载方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录GitLab 项目拉取到本地GitLab 项目上传方法方法 1:本地项目未初始化Git方法 2:本地项目已初始化GitGitLab 上

Python使用python-docx实现自动化处理Word文档

《Python使用python-docx实现自动化处理Word文档》这篇文章主要为大家展示了Python如何通过代码实现段落样式复制,HTML表格转Word表格以及动态生成可定制化模板的功能,感兴趣的... 目录一、引言二、核心功能模块解析1. 段落样式与图片复制2. html表格转Word表格3. 模板生

Nginx 413修改上传文件大小限制的方法详解

《Nginx413修改上传文件大小限制的方法详解》在使用Nginx作为Web服务器时,有时会遇到客户端尝试上传大文件时返回​​413RequestEntityTooLarge​​... 目录1. 理解 ​​413 Request Entity Too Large​​ 错误2. 修改 Nginx 配置2.1

Java应用如何防止恶意文件上传

《Java应用如何防止恶意文件上传》恶意文件上传可能导致服务器被入侵,数据泄露甚至服务瘫痪,因此我们必须采取全面且有效的防范措施来保护Java应用的安全,下面我们就来看看具体的实现方法吧... 目录恶意文件上传的潜在风险常见的恶意文件上传手段防范恶意文件上传的关键策略严格验证文件类型检查文件内容控制文件存储

Python Selenium动态渲染页面和抓取的使用指南

《PythonSelenium动态渲染页面和抓取的使用指南》在Web数据采集领域,动态渲染页面已成为现代网站的主流形式,本文将从技术原理,环境配置,核心功能系统讲解Selenium在Python动态... 目录一、Selenium技术架构解析二、环境搭建与基础配置1. 组件安装2. 驱动配置3. 基础操作模

C#实现查找并删除PDF中的空白页面

《C#实现查找并删除PDF中的空白页面》PDF文件中的空白页并不少见,因为它们有可能是作者有意留下的,也有可能是在处理文档时不小心添加的,下面我们来看看如何使用Spire.PDFfor.NET通过C#... 目录安装 Spire.PDF for .NETC# 查找并删除 PDF 文档中的空白页C# 添加与删