RIA应用开发：12-jQuery LigerUI框架.ppt

文档介绍：jQuery LigerUI框架
回顾
jqPlot插件的使用
线状图、柱状图、饼状图的绘制
使用DB做为图表数据源
学****目标
使用jQuery LigerUI框架进行页面的布局
使用jQuery LigerJS文件和CSS样式
<link href="Aqua/css/ligerui-" rel="stylesheet" type="text/css" />
<script src="jquery-" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
2. 使用ligerLayout方法
$("#layout1").ligerLayout();
页面布局（Layout）
布局方法的属性
leftWidth ： 左侧宽度
centerWidth ： 中侧宽度
rightWidth ： 右侧宽度
isLeftCollapse ： 初始化时，左边是否折叠
isRightCollapse ： 初始化时，右边是否折叠
allowLeftCollapse ： 是否允许 左边可以隐藏
allowRightCollapse ： 是否允许 右边可以隐藏
页面布局综合应用
页面布局综合应用
总结
页面布局
折叠面板
Tab
Layout
表单控件
按钮
调整器
日期
下拉列表框
按钮
例1：
页面设计：
引入JS文件和CSS样式文件：
<link href="Aqua/css/ligerui-" rel="stylesheet" type="text/css" />
<script src="jquery-" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
页面代码：
manager = $(“#btn”).ligerButton();
<div id="btn" ></div>
按钮
定义按钮的单击事件
click: function () {alert('111'); }
设置和获得按钮上的文本
('设置值');
()；
将按钮设置为只读和取消只读
();
();
调整器
调整器
例2：
页面设计：
<input id="txt1" type="text" value="3" />
引入JS和CSS样式文件：
<link href="Aqua/css/ligerui-" rel="stylesheet" type="text/css" />
<script src="jquery-" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
定义jQuery代码
$("#txt1").ligerSpinner();
日期选择器
日期选择器
例3：
<input type="text" id="txt1" />
<link href="Aqua/css/ligerui-" rel="stylesheet" type="text/css" />
<script src="jquery-" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<script src="" type="text/ja