这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了 jQuery 树形插件 jquery.simpleTree.js 用法, 结合实例形式分析了 jQuery 树形菜单插件 jquery.simpleTree.js 的功能与基本用法, 需要的朋友可以参考下
本文实例讲述了 jQuery 树形插件 jquery.simpleTree.js 用法。分享给大家供大家参考,具体如下:
最近写项目的 cms 系统,客户要求后台管理可以通过一棵树来展现整个帮助文档的结构,并通过拖拽操作来实现文章和栏目的位置排列变化,我在网上找来半天,决定使用 jQuery.simpleTree.js 来实现。
这个树控件支持拖动节点到新的位置,通过其提供 aftermove 函数的覆写,我们可以在其拖动完成后在 aftermove 函数中调用 ajax 来后台更改数据库来保存拖动的结果
同时这个树的节点还存在单击事件,每个节点如同一个按钮一样,相对比一个超链接可扩展性强多了
生成这个树需要的只是生成一些 html 元素比如说如下的代码
- <li id='35'>
- <span class="text">
- Tree Node Ajax 1
- </span>
- </li>
- <li id='36'>
- <span class="text">
- Tree Node Ajax 2
- </span>
- </li>
- <li id='37'>
- <span class="text">
- Tree Node Ajax 3
- </span>
- <ul>
- <li id='38'>
- <span class="text">
- Tree Node Ajax 3-1
- </span>
- <ul>
- <li id='39'>
- <span class="text">
- Tree Node Ajax 3-1-1
- </span>
- </li>
- <li id='40'>
- <span class="text">
- Tree Node Ajax 3-1-2
- </span>
- </li>
- <li id='41'>
- <span class="text">
- Tree Node Ajax 3-1-3
- </span>
- </li>
- <li id='42'>
- <span class="text">
- Tree Node Ajax 3-1-4
- </span>
- </li>
- </ul>
- </li>
- <li id='43'>
- <span class="text">
- Tree Node Ajax 3-2
- </span>
- </li>
- <li id='44'>
- <span class="text">
- Tree Node Ajax 3-3
- </span>
- <ul>
- <li id='45'>
- <span class="text">
- Tree Node Ajax 3-3-1
- </span>
- </li>
- <li id='46'>
- <span class="text">
- Tree Node Ajax 3-3-2
- </span>
- </li>
- <li id='47'>
- <span class="text">
- Tree Node Ajax 3-3-3
- </span>
- </li>
- </ul>
- </li>
- <li id='48'>
- <span class="text">
- Tree Node Ajax 3-4
- </span>
- </li>
- <li id='49'>
- <span class="text">
- Tree Node Ajax 3-5
- </span>
- <ul>
- <li id='50'>
- <span class="text">
- Tree Node Ajax 3-5-1
- </span>
- </li>
- <li id='51'>
- <span class="text">
- Tree Node Ajax 3-5-2
- </span>
- </li>
- <li id='52'>
- <span class="text">
- Tree Node Ajax 3-5-3
- </span>
- </li>
- </ul>
- </li>
- <li id='53'>
- <span class="text">
- Tree Node Ajax 3-6
- </span>
- </li>
- </ul>
- </li>
- <li id='54'>
- <span class="text">
- Tree Node Ajax 4
- </span>
- </li>
生成的树如下:
当然这是静态的代码实现的,在 jquery.simpleTree 中生成这些 html 元素的是 loadTree.php 文件,我们完全可以从数据库中取出数据以这些 html 元素的形式打印出来么。
希望本文所述对大家 jQuery 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0708/332083.html