利用Juery制作一个系统框架实验报告.doc

Web前端技术实验报告实验（4）实验题目：利用Juery制作一个系统框架 指导老师：杨 晓 敏实验类型：设 计 型实验地点：软件实验室2专业班级：计算机科学与技术系 班 姓 名： 2014年5月30日实验四：利用Jquery制作一个系统框架一、 实验目的和要求掌握JQuery的基本语法掌握JQuery环境的配置掌握JQuery的常用组件及方法。二、 实验内容使用Jquery制作一个系统框架三、实验重点和难点Jquery库的灵活使用Jquery函数的使用三、 实验过程1、实验代码$(function () $(body).FBBorderLayout(spacing: 5,north_resizable: false,east: false,east_resizable: true,south: false,west_width: 200);$(.fbbl_west).panel(width:$(.fbbl_west).width(),html:1,height:100,title:男女服饰,collapsible:false).panel(width:$(.fbbl_west).width(),html:2,height:100,title:鞋包配件,collapsible:false).panel(width:$(.fbbl_west).width(),html:3,height:100,title:运动户外,collapsible:false);$(.panel-body).hide();$(.panel-head).slidePanel( role:accordion,height:$(.fbbl_west).height()-12,content:$(.fbbl_west);$(.panel-head:first).click();var obj=$(.fbbl_center).Tab(items: title:tab1,closed:true,icon:,html:test1,load:,callback:function(),tabScroll:false,width:$(.fbbl_center).width(),height:$(.fbbl_center).height()-10,tabcontentWidth:$(.fbbl_center).width(),tabWidth:66,tabHeight:25);var data=id:36,name:连衣裙,type:product,pgid:18,id:40,name:T恤,type:product,pgid:18,id:41,name:衬衫,type:product,pgid:18,id:42,name:上衣,type:product,pgid:18,id:43,name:裤子,type:product,pgid:18,id:37,name:雪纺裙,type:product,pgid:36,id:44,name:蕾丝裙,type:product,pgid:36,id:45,name:短裙,type:product,pgid:36,id:46,name:长裙,type:product,pgid:36,id:55,name:打底衫,type:product,pgid:40,id:56,name:短袖,type:product,pgid:40,id:57,name:长款,type:product,pgid:40,id:58,name:蝙蝠袖,type:product,pgid:40,id:59,name:宽松,type:product,pgid:40,id:26,name:白衬衫,type:product,pgid:41,id:10,name:雪纺,type:product,pgid:41,id:11,name:牛仔,type:product,pgid:41,id:20,name:蕾丝,type:product,pgid:41,id:99,name:真丝,type:product,pgid:41,id:18,name:女装,type:product,pgid:0,id:19,name:男装,type:product,pgid:0,id:21,name:上衣,type:product,pgid:19,id:22,name:11111,type:product,pgid:19,id:29,name:11111,type:product,pgid:25;$(.panel-body:first).html().find(ul:first).showTree(data:data,callback:function(t)obj.newTab(title:tab1,closed:true,icon:,html:,load:1.html,callback:function();););.fbbl_north_collapser BACKGROUND: #2D91CD.fbbl_east_collapser BACKGROUND: #2D91CD.fbbl_south_collapser BACKGROUND: #2D91CD.fbbl_west_collapser BACKGROUND: #2D91CDBODY FONT-SIZE: 12px; FONT-FAMILY: sans-serif.fbbl_north TEXT-ALIGN: center.fbbl_south TEXT-ALIGN: center.fbbl_north BORDER-RIGHT: #2D91CD 1px solid; BORDER-BOTTOM: #2D91CD 1px solid.fbbl_west BORDER-RIGHT: #2D91CD 1px solid; padding:5px; BORDER-TOP: #2D91CD 1px solid; BORDER-LEFT: #2D91CD 1px solid; BORDER-BOTTOM: #2D91CD 1px solid.fbbl_center BORDER-RIGHT: #2D91CD 1px solid; padding:5px; padding-top:0px; BORDER-TOP: #2D91CD 1px solid;