巧妙运用小工具来使用jQuery生成树状结构
来源:互联网 发布:英国留学行李 知乎 编辑:程序博客网 时间:2024/06/05 10:35
本文主要通过使用jquery_treeview工具来介绍web前端树状结构的生成
先展示下最终生成的样式
下面就具体介绍下工具的使用过程:
1. 首先下载工具(网上有很多这样的工具,这里介绍jquery_treeview,我的博客会附上工具文件)。
2. 建立自己想实现的html 文件(为了方便测试,建议把html文件建在工具文件的根目录下)。
3. 编辑html文件,首先必须导入js与css文件,根据自己情况选择文件路径
<script type="text/javascript" src="lib/jquery.js"></script><script type="text/javascript" src="jquery.treeview.js"></script><link rel="stylesheet" type="text/css" href="jquery.treeview.css">
4.根据需要通过标签<ul>、<li>
来写想要实现的树状结构,不要忘记给顶层<ul>
加上id属性,比如下面代码:
<ul id="root"> <li>系统管理 <ul> <li>岗位管理</li> <li>部门管理 <ul> <li>aaa</li> <li>bbb</li> </ul> </li> <li>用户管理</li> </ul> </li> <li>网上交流</li> </ul>
5.显示最终的树状结构,具体代码实现:
<!-- 显示为树状结构 --> <script type="text/javascript"> $("#root").treeview(); </script>
6.这样就可以通过浏览器访问了,当然这只不过是实现功能上已经解决了,但是具体的显示样式可以通过修改css样式来进行更改。
本文章只是通过对jquery_treeview介绍来使得一些不怎么接触jQuery的同志们可以实现对自己稍微复杂的页面效果,当然网上还有很多类似这样的小工具,但是他们的使用过程都是非常相似的。如果想设计出突出自己个性的效果那么就马上投入到学习jQuery的队伍当中来吧!
1 0
- 巧妙运用小工具来使用jQuery生成树状结构
- 自定义jquery小工具
- 优雅得使用composer来安装各种PHP小工具
- [置顶] 自动更具数据库表来生成.java文件的小工具
- netcat小工具使用
- 小工具使用
- 小工具的使用
- VC使用VAssisstX的小工具,自动生成注释
- 批量生成缩略图小工具
- 批量生成缩略图小工具
- 自动生成Xpath小工具
- htpasswd小工具生成密码
- C#:图标生成小工具
- dump 使用小工具设计
- Ubuntu----使用桌面小工具
- Spy++使用(VC小工具)
- 使用MinGW开发小工具
- linux下小工具使用
- KeyMob:大小型App应用的移动广告管理工具
- ArcEngine 图层导出关键代码
- 人人都该了解的十大算法
- Python3中urllib详细使用方法(header,代理,超时,认证,异常处理)
- Android 中 EventBus 的使用(3):多线程事件处理
- 巧妙运用小工具来使用jQuery生成树状结构
- 从头开始学习dojo
- 关于路径的一些操作
- 数据结构实践项目——排序
- iOS各个控件之间通信有哪些模式
- 从nginx获取css无法解析的问题
- JQ---表格展开与关闭
- 堆
- WatchOS2 官方文档翻译