jQuery_EasyUI教程

jqueryeasyui教程概述这个教程的目的是说明如何使用easyui框架容易的创建网页。首先，你需要包含一些js和css文件：linkrel=stylesheettype=text/csshref=../themes/default/easyui.cssscripttype=text/javascriptsrc=../jquery-1.4.2.min.js/scriptscripttype=text/javascriptsrc=../jquery.easyui.min.js/scripteasyui预定义了一些图标css，这些css类可以显示图片背景（16×16）。使用这些类之前，需要包含：linkrel=stylesheettype=text/csshref=../themes/icon.css内容1.拖放o基本拖放o创建购物车式拖放o创建课程表基本拖放这个教程显示如何使HTML元素变得可拖放。这个例子会创建3个DIV元素然后让它们变得可拖放。首先，创建三个DIV元素：divid=dd1class=dd-demo/divdivid=dd2class=dd-demo/divdivid=dd3class=dd-demo/div让第一个DIV元素可拖放，使用默认的拖放样式。$('#dd1').draggable();让第二个DIV元素使用proxy来拖放，proxy:'clone'表示proxy使用原始元素的复制。$('#dd2').draggable({proxy:'clone'});让第三个DIV元素使用自定义proxy来拖放$('#dd3').draggable({proxy:function(source){varp=$('divclass=proxyproxy/div');p.appendTo('body');returnp;}});构建购物车型拖放使用jQueryeasyui，我们在web应用中就有了拖放的能力。这个教程显示了如何构建购物车页，它使用户拖放他们希望购买的产品，更新购物篮的物品和价格。显示产品页：ulclass=productsliahref=#class=itemimgsrc=shirt1.gif/divpBalloon/ppPrice:$25/p/div/a/liliahref=#class=itemimgsrc=shirt2.gif/divpFeeling/ppPrice:$25/p/div/a/li!--otherproducts--/ulul元素包含一些li元素以显示产品。每一个产品的名称和单价属性在P元素中。创建购物车：divclass=carth1ShoppingCart/h1tableid=cartcontentstyle=width:300px;height:auto;theadtrthfield=namewidth=140Name/ththfield=quantitywidth=60align=rightQuantity/ththfield=pricewidth=60align=rightPrice/th/tr/thead/tablepclass=totalTotal:$0/ph2Dropheretoaddtocart/h2/div使用datagrid显示购物篮项目。拖曳产品副本$('.item').draggable({revert:true,proxy:'clone',onStartDrag:function(){$(this).draggable('options').cursor='not-allowed';$(this).draggable('proxy').css('z-index',10);},onStopDrag:function(){$(this).draggable('options').cursor='move';}});我们设置draggable属性proxy为clone，所以拖曳元素使用clone效果。将选择的产品放入购物车$('.cart').droppable({onDragEnter:function(e,source){$(source).draggable('options').cursor='auto';},onDragLeave:function(e,source){$(source).draggable('options').cursor='not-allowed';},onDrop:function(e,source){varname=$(source).find('p:eq(0)').html();varprice=$(source).find('p:eq(1)').html();addProduct(name,parseFloat(price.split('$')[1]));}});vardata={total:0,rows:[]};vartotalCost=0;functionaddProduct(name,price){functionadd(){for(vari=0;idata.total;i++){varrow=data.rows[i];if(row.name==name){row.quantity+=1;return;}}data.total+=1;data.rows.push({name:name,quantity:1,price:price});}add();totalCost+=price;$('#cartcontent').datagrid('loadData',data);$('div.cart.total').html('Total:$'+totalCost);}当放下产品时，我们得到产品的名称和单价，然后调用addProduct函数更新购物篮。创建课程表本教程显示了如何使用jQueryeasyui创建课程表。我们创建两个表：在左面的课程列表和右面的时间表。你可以拖课程到时间表的单元格中。课程是divclass='item'元素，时间格是tdclass='drop'元素。显示课程divclass=lefttabletrtddivclass=itemEnglish/div/td/trtrtddivclass=itemScience/div/td/tr!--othersubjects--/table/div显示时间表divclass=righttabletrtdclass=blank/tdtdclass=titleMonday/tdtdclass=titleTuesday/tdtdclass=titleWednesday/tdtdclass=titleThursday/tdtdclass=titleFriday/td/trtrtdclass=time08:00/tdtdclass=drop/tdtdclass=drop/tdtdclass=drop/tdtdclass=drop/tdtdclass=drop/td/tr!--othercells--/table/div拖动左面的课程$('.left.item').draggable({revert:true,proxy:'clone'});放置课程到时间表中$('.righttd.drop').droppable({onDragEnter:function(){$(this).addClass('over');},onDragLeave:function(){$(this).removeClass('over');},onDrop:function(e,source){$(this).removeClass('over');if($(source).hasClass('assigned')){$(this).append(source);}else{varc=$(source).clone().addClass('assigned');$(this).empty().append(c);c.draggable({revert:true});}}});当用户拖动左面的课程到右面的时间表中，onDrop函数被调用。源元素的副本被从左面拖动并且附加到到时间表的单元格中。当放置课程到时间表的单元格到另一个单元格时，简单的移动它。2.菜单和按钮MenuandButtono建立简单菜单o建立链接按钮o建立菜单按钮o建立分割按钮创建简单菜单在DIV标记中定义菜单。像这样：divid=mmstyle=width:120px;divonclick=javascript:alert('new')New/divdivspanOpen/spandivstyle=width:150px;divbWord/b/divdivExcel/divdivPowerPoint/div/div/divdivicon=icon-saveSave/divdivclass=menu-sep/divdivExit/div/div建立菜单，你需要运行下列jQuery代码$('#mm').menu();//或者$('#mm').menu(options);当菜单被创建时是不可见的，可使用show方法显示或者hide方法隐藏：$('#mm').menu('show',{left:200,top:100});现在，我们创建菜单并在（200,100）处显示。运行代码会得到：创建连接按钮通常使用button元素创建按钮。链接按钮使用A元素创建，事实上，链接按钮是A元素但显示为按钮样式。创建链接按钮，首先创建A元素：h3DEMO1/h3divstyle=padding:5px;background:#efefef;width:500px;ahref=#class=easyui-linkbuttonicon=icon-cancelCancel/aahref=#class=easyui-linkbuttonicon=icon-reloadRefresh/aahref=#class=easyui-linkbuttonicon=icon-searchQuery/aahref=#class=easyui-linkbuttontextbutton/aahref=#class=easyui-linkbuttonicon=icon-printPrint/a/divh3DEMO2/h3divstyle=padding:5px;background:#efefef;width:500px;ahref=#class=easyui-linkbuttonplain=trueicon=icon-cancelCancel/aahref=#class=easyui-linkbuttonplain=trueicon=icon-reloadRefresh/aahref=#class=easyui-linkbuttonplain=trueicon=icon-searchQuery/aahref=#class=easyui-linkbuttonplain=truetextbutton/aahref=#class=easyui-linkbuttonplain=trueicon=icon-printPrint/a