EasyUI中文学习教程.doc

教程 概述 这个教程的目的是说明如何使用easyui框架容易的创建网页。首先，你需要包含一些js和css文件： link rel=stylesheet type=text/css href=../themes/default/easyui.css script type=text/javascript src=../jquery-1.4.2.min.js/script script type=text/javascript src=../jquery.easyui.min.js/script easyui预定义了一些图标css，这些css类可以显示图片背景（16×16）。使用这些类之前，需要包含： link rel=stylesheet type=text/css href=../themes/icon.css 内容 拖放 基本拖放 创建购物车式拖放 创建课程表 基本拖放 这个教程显示如何使HTML元素变得可拖放。这个例子会创建3个DIV元素然后让它们变得可拖放。 首先，创建三个DIV元素： div id=dd1 class=dd-demo/div div id=dd2 class=dd-demo/div div id=dd3 class=dd-demo/div 让第一个DIV元素可拖放，使用默认的拖放样式。 $(#dd1).draggable(); 让第二个DIV元素使用proxy来拖放，proxy:clone表示proxy使用原始元素的复制。 $(#dd2).draggable({ proxy:clone }); 让第三个DIV元素使用自定义proxy来拖放 $(#dd3).draggable({ proxy:function(source){ var p = $(div class=proxyproxy/div); p.appendTo(body); return p; } }); 构建购物车型拖放 使用jQuery easyui，我们在web应用中就有了拖放的能力。这个教程显示了如何构建购物车页，它使用户拖放他们希望购买的产品，更新购物篮的物品和价格。 显示产品页： ul class=products li a href=# class=item img src=shirt1.gif/ div pBalloon/p pPrice:$25/p /div /a /li li a href=# class=item img src=shirt2.gif/ div pFeeling/p pPrice:$25/p /div /a /li !-- other products -- /ul ul元素包含一些li元素以显示产品。每一个产品的名称和单价属性在P元素中。 创建购物车： div class=cart h1Shopping Cart/h1 table id=cartcontent style=width:300px;height:auto; thead tr th field=name width=140Name/th th field=quantity width=60 align=rightQuantity/th th field=price width=60 align=rightPrice/th /tr /thead /table p class=totalTotal: $0/p h2Drop here to add to cart/h2 /div 使用datagrid显示购物篮项目。 拖曳产品副本 $(.item).draggable({ revert:true, proxy:clone, onStartDrag:function(){ $(this).draggable(options).cursor = not-allowed; $(this).draggable(proxy).