码迷,mamicode.com
首页 > Web开发 > 详细

[html][LigerUI]使用示例

时间:2016-04-03 23:41:50      阅读:793      评论:0      收藏:0      [点我收藏+]

标签:

  <link href="Source/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  <script src="jquery-1.12.2.min.js" type="text/javascript"></script> 
  <script src="Source/lib/ligerUI/js/core/base.js" type="text/javascript"></script> 
  <script src="Source/lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>

上面这段代码用于准备构建 ligerTextBox 对象

    <script src="../../lib/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
    <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>

上面这段代码用于准备构建 ligerTree 对象

可以看出来 区别只在于最后一个引用: ligerTextBox / ligerTree

技术分享
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="Source/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  <script src="jquery-1.12.2.min.js" type="text/javascript"></script> 
  <script src="Source/lib/ligerUI/js/core/base.js" type="text/javascript"></script> 
  <script src="Source/lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script> 
  <script type="text/javascript">   
    $(function () {            
      //我们将一个html文本框对象转换成ligerui文本框对象
      $("#txt1").ligerTextBox({                
        //如果没有输入时,会提示不能为空                
        nullText: 不能为空            
      });        
    });     
  </script>
</head>
<body style="padding:10px">        
  <input type="text" id="txt1" />
  <br />
  <input type="text" value="测试文本框" />
</body>
</html>
ligerTextBox 范例
技术分享
<!DOCTYPE html>
<html>
<head>
    <title>ligerTree 范例</title>
    <link href="Source/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.12.2.min.js" type="text/javascript"></script> 
    <script src="Source/lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="Source/lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function ()
        {   
            var data = [];
              
            data.push({ id: 1, pid: 0, text: 1 });
            data.push({ id: 2, pid: 1, text: 1.1 });
            data.push({ id: 4, pid: 2, text: 1.1.2 });
            data.push({ id: 5, pid: 2, text: 1.1.2 });      

            data.push({ id: 10, pid: 8, text: wefwfwfe });
            data.push({ id: 11, pid: 8, text: wgegwgwg });
            data.push({ id: 12, pid: 8, text: gwegwg });

            data.push({ id: 6, pid: 2, text: 1.1.3, ischecked: true });
            data.push({ id: 7, pid: 2, text: 1.1.4 });
            data.push({ id: 8, pid: 7, text: 1.1.5 });
            data.push({ id: 9, pid: 7, text: 1.1.6 });

            $("#tree1").ligerTree({  
            data:data, 
            idFieldName :id,
            parentIDFieldName :pid
            }
            );
        });
    </script>
</head>
<body style="padding:10px">   
    <div style="width:200px; height:300px; margin:10px; float:left; border:1px solid #ccc; overflow:auto;  ">
    <ul id="tree1"></ul>
    </div> 
 
    <div style="display:none">
    <!--  数据统计代码 --> 
    </div>
</body>
</html>
ligerTree 范例

 

[html][LigerUI]使用示例

标签:

原文地址:http://www.cnblogs.com/z5337/p/5350867.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!