[html][LigerUI]使用示例
Posted 秤心
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[html][LigerUI]使用示例相关的知识，希望对你有一定的参考价值。
<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>
<!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>
以上是关于[html][LigerUI]使用示例的主要内容，如果未能解决你的问题，请参考以下文章
html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。