利用JavaScript代码配置ligerTree节点：

  1. 源码地址：http://download.csdn.net/detail/poiuy1991719/8571255

效果图：

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <html>
  3. <head>
  4. <title>JavaScript配置数据形式</title>
  5. <!-- 1：引入文件 -->
  6. <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
  7. <link href="lib/ligerUI/skins/Aqua/css/ligerui-tree.css"
  8.     rel="stylesheet" type="text/css" />
  9. <script src="lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
  10. <!-- 2：配置数据 -->
  11. <script type="text/javascript">
  12.     $(function() {
  13.         $("#tree1").ligerTree({
  14.             data : [{
  15.                 text : '节点1',
  16.                 children : [{
  17.                     text : '节点1.1'
  18.                 }, {
  19.                     text : '节点1.2'
  20.                 }, {
  21.                     text : '节点1.3',
  22.                     children : [{
  23.                         text : '节点1.3.1'
  24.                     }, {
  25.                         text : '节点1.3.2'
  26.                     }]
  27.                 }, {
  28.                     text : '节点1.4'
  29.                 }]
  30.             }, {
  31.                 text : '节点2'
  32.             }, {
  33.                 text : '节点3'
  34.             }, {
  35.                 text : '节点4'
  36.             }]
  37.         });
  38.         $("#tree1").ligerTree({
  39.             checkbox : false
  40.         });
  41.     });
  42. </script>
  43. </head>
  44. <body>
  45.     JavaScript配置数据，的“树”效果
  46.     <br>
  47.     <div
  48.         style="width:200px; height:300px; margin:10px; float:left; border:1px solid #ccc; overflow:auto;  ">
  49.         <!-- 3：编写HTML代码 -->
  50.         <ul id="tree1">
  51.  
  52.         </ul>
  53.     </div>
  54.     <div style="display:none"></div>
  55.     <br>
  56.     <a href="index4.jsp">下一效果：</a>
  57. </body>
  58. </html>

ligerui_ligerTree_002_利用JavaScript代码配置ligerTree节点的更多相关文章

  1. 程序员利用javascript代码开发捕鱼游戏

    面试这么成功,全靠这个捕鱼游戏来完成,看的就是里面javascript代码,所以说前端最重要的还是javascript这一关,不管是现在HTML5时代还是以后如何,javascript永远不会落后,大 ...

  2. C# 代码中调用 Javascript 代码段以提高应用程序的配置灵活性(使用 Javascript .NET 与 Jint)

    一般来说,我们需要在开发应用软件的配置文件中,添加一些参数,用于后续用户根据实际情况,自行调整. 配置参数,可以放在配置文件中.环境变量中.或数据库表中(如果使用了数据库的话).通常,配置数据,以 k ...

  3. Web前端开发最佳实践（12）：JavaScript代码中有大量写死的配置数据？这些数据难以维护，你需要合理组织这些数据

    前言 JavaScript代码基本上都是由业务逻辑和数据组成的,逻辑代码根据数据完成一定的操作.很多数据在代码中是写死的,比如一些URL.显示在界面上的提示信息.页面元素相关的样式值及其他使用到的固定 ...

  4. 巧妙利用函数的惰性载入提高javascript 代码性能

    在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的 if 语句,以检查浏览器特性,解决不同浏览器的兼容问题. 例如,我们最常见的为 dom 节点添加事件的函 ...

  5. 如何利用好chrome控制台这个神器好好调试javascript代码

    上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方) 1 ...

  6. 利用函数的惰性载入提高 javascript 代码性能

    在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的 if 语句,以检查浏览器特性,解决不同浏览器的兼容问题.例如,我们最常见的为 dom 节点添加事件的函数 ...

  7. 利用chrome调试JavaScript代码

    看见网上很多人问怎么用chrome调试JavaScript代码,我也对这个问题抱着疑问,但是没有找到一篇能用的中文文章(可能我的google有问题),也不知道怎么点出一篇E文的,感觉作者写得不错,所以 ...

  8. ligerui_ligerTree_004_对"ligerTree"节点操作

    ligerTree节点操作: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 效果图: 代码: json.txt: [ { text ...

  9. JavaScript代码组织结构良好的5个特点

    JavaScript代码组织结构良好的5个特点,随着JavaScript项目的成长,如果你不小心处理的话,他们往往会变得难以管理.我们发现自己常常陷入的一些问题: 当在创建新的页面时发现,很难重用或测 ...

随机推荐

  1. iOS简单排序--字母排序、NSDictionary排序

    // 数组用系统方法compare做字母的简单排序 NSArray *oldArray = @[@"bac",@"bzd",@"azc",@ ...

  2. java JDK8 学习笔记——第18章 自定义泛型、枚举与注释

    第十八章 自定义泛型.枚举与注释 18.1 自定义泛型 泛型定义: (1)仅定义在方法上的泛型语法 (2)用来限制泛型可用类型的extends与super关键字(3)?类型通配字符的使用 18.1.1 ...

  3. http相关概念在iOS中的使用介绍

    http://www.cocoachina.com/ios/20160329/15773.html

  4. This system is not registered with RHN

    在红帽EL5上运行yum,提示“This system is not registered with RHN”,意思是没有在官网上注册,不能下载RH的软件包,替代方案是采用centos源. 1.卸载r ...

  5. Simplest way to serve static data from outside the application server in a Java web application

    tomcat service.xml <Context docBase="/path/to/images" path="/images" /> re ...

  6. X-UA-Compatible是神马

    X-UA-Compatible是神马 X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页,在html的<head>标签中使 ...

  7. WeakHashMap 理解笔记

    An entry in a WeakHashMap will automatically be removed when its key is no longer in ordinary use. M ...

  8. 20145211 《Java程序设计》实验报告四： Android开发基础

    实验内容 基于Android Studio开发简单的Android应用并部署测试; 了解Android组件.布局管理器的使用: 掌握Android中事件处理机制. Android Studio安装 实 ...

  9. Gulp自动化工具之图片压缩

    一.安装node https://nodejs.org/download/ 根据需要选择对应的版本 安装好了之后可以通过node -v参看一下版本 node -v 二.安装gulp npm insta ...

  10. Download InstallShield Limited Edition for Visual Studio 地址

    http://learn.flexerasoftware.com/content/IS-EVAL-InstallShield-Limited-Edition-Visual-Studio?lang=10 ...