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

jQuery LigerUI框架 回顾 jqPlot插件的使用 线状图、柱状图、饼状图的绘制 使用DB做为图表数据源 学习目标 使用jQuery LigerUI框架进行页面的布局 使用jQuery LigerUI框架进行页面的导航 使用jQuery LigerUI框架进行表单的设计和校验 使用jQuery LigerUI框架进行表格的设计 使用jQuery LigerUI框架进行表格数据的编辑 jQuery LigerUI 框架 jQuery LigerUI 是基于jQuery的一系列UI控件组合，致力于快速打造Web前端界面解决方案。 jQuery LigerUI是前端控件，可以适合.net、jsp、php等web服务器环境。（/p/ligerui/downloads/list） 页面布局（折叠面板） Accordion的参数和方法： 页面布局（折叠面板） 例1（accordion.html） 页面布局（折叠面板） 1.引入JS文件和样式文件 <link href="Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="base.js" type="text/javascript"></script> <script src="ligerAccordion.js" type="text/javascript"></script> 2.使用LigerUI的accordion插件 $("#accordion1").ligerAccordion(); var g= $("#accordion1").ligerAccordion(); $("#accordion1").ligerAccordion({height: 300,speed:"slow"}); 页面布局（折叠面板） 获取属性的值 方式一 alert('height:' + g.get('height')); 方式二 alert('speed:' + $("#accordion1").ligerAccordion('option', 'speed')); 设置属性的值 方式一 g.set( 'height ', 400); 方式二 $("#accordion1").ligerAccordion('option','speed','fast'); 页面布局（折叠面板） 如何调用方法 方式一 g.setHeight(500); 方式二 $("#accordion1").ligerAccordion('setHeight',450); 页面布局（网页选项卡） 页面布局（网页选项卡） 例2： 页面布局（网页选项卡） 1、引入JS文件 <link href="Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="base.js" type="text/javascript"></script> <script src="ligerTab.js" type="text/javascript"></script> 2、使用LigerUI的Tab插件 $("#navtab1").ligerTab({ dblClickToClose: false }); 页面布局（网页选项卡） 使用网页做为tab页 设置事件 页面布局（网页选项卡） 调用方法 页面布局（网页选项卡） 例3： 页面布局（Layout） 页面布局（Layout） 例4： 页面布局（Layout） 1.引入JS文件和CSS样式 <link href="Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="base.js" type="text/javascript"></script> <script src="ligerLayout.js" typ