实验九 页面布局.docVIP

实验九 页面布局 【实验目的】 1、掌握jquery ligerUI框架中折叠面板的设计； 2、掌握jquery ligerUI框架中tab的设计； 3、能够使用jquery ligerUI框架进行页面布局。 【实验准备】 1、复习教材相关内容； 2、预习本次实验； 【实验内容】 1、利用jquery ligerUI框架实现如图9－1所示的页面，左侧折叠面板可以隐藏，初始化时显示。 图9-1 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head title布局/title link href=Aqua/css/ligerui-all.css rel=stylesheet type=text/css / script src=jquery-1.4.2.min.js type=text/javascript/script script src=base.js type=text/javascript/script script src=ligerLayout.js type=text/javascript/script script src=ligerAccordion.js type=text/javascript/script script type=text/javascript $(function () { $(#layout1).ligerLayout({leftWidth:200}); $(#accordion1).ligerAccordion(); }); /script style type=text/css body{ padding:5px; margin:0; padding-bottom:15px;} #layout1{ width:100%;margin:0; padding:0; } .ltop{ height:100px; margin-bottom:3px;} h4{ margin:20px;} /style /head body style=padding:10px div class=ltopimg src=top.JPG style=width:100%; height:100px //div div id=layout1 div position=left id=accordion1 div title=基础设置 ul li商品类别设置/li li商品信息设置/li li供应商信息设置/li /ul /div div title=业务处理 ul li采购入库/li li采购退货/li li库存盘点/li li库存预警/li /ul /div /div div position=center /div /div /body /html 2、利用jquery ligerUI 框架实现如图9－2所示tab页面。 图9-2 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999