zoukankan      html  css  js  c++  java
  • ligerui_ligerTree_002_利用JavaScript代码配置ligerTree节点

    利用JavaScript代码配置ligerTree节点:

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

    效果图:

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <html>
    <head>
    <title>JavaScript配置数据形式</title>
    <!-- 1:引入文件 -->
    <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <link href="lib/ligerUI/skins/Aqua/css/ligerui-tree.css"
        rel="stylesheet" type="text/css" />
    <script src="lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
    <!-- 2:配置数据 -->
    <script type="text/javascript">
        $(function() {
            $("#tree1").ligerTree({
                data : [{
                    text : '节点1',
                    children : [{
                        text : '节点1.1'
                    }, {
                        text : '节点1.2'
                    }, {
                        text : '节点1.3',
                        children : [{
                            text : '节点1.3.1'
                        }, {
                            text : '节点1.3.2'
                        }]
                    }, {
                        text : '节点1.4'
                    }]
                }, {
                    text : '节点2'
                }, {
                    text : '节点3'
                }, {
                    text : '节点4'
                }]
            });
            $("#tree1").ligerTree({
                checkbox : false
            });
        });
    </script>
    </head>
    <body>
        JavaScript配置数据,的“树”效果
        <br>
        <div
            style="200px; height:300px; margin:10px; float:left; border:1px solid #ccc; overflow:auto;  ">
            <!-- 3:编写HTML代码 -->
            <ul id="tree1">
    
            </ul>
        </div>
        <div style="display:none"></div>
        <br>
        <a href="index4.jsp">下一效果:</a>
    </body>
    </html>
  • 相关阅读:
    websocket 初识
    JavaScript 系列博客(四)
    JavaScript 系列博客(三)
    JavaScript 系列博客(二)
    JavaScript 系列博客(一)
    前端(八)之形变
    前端(七)之动画与阴影
    java变量、数据类型
    js简单的获取与输出
    Eclipse字体修改
  • 原文地址:https://www.cnblogs.com/zjsy/p/4398851.html
Copyright © 2011-2022 走看看