利用Juery制作一個系統(tǒng)框架實驗報告.doc

Web前端技術(shù)實驗報告實驗（4）實驗題目：利用Juery制作一個系統(tǒng)框架 指導(dǎo)老師：楊 曉 敏實驗類型：設(shè) 計 型實驗地點：軟件實驗室2專業(yè)班級：計算機科學(xué)與技術(shù)系 班 姓 名： 2014年5月30日實驗四：利用Jquery制作一個系統(tǒng)框架一、 實驗?zāi)康暮鸵笳莆認(rèn)Query的基本語法掌握J(rèn)Query環(huán)境的配置掌握J(rèn)Query的常用組件及方法。二、 實驗內(nèi)容使用Jquery制作一個系統(tǒng)框架三、實驗重點和難點Jquery庫的靈活使用Jquery函數(shù)的使用三、 實驗過程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;