jqueryeasyui学习教程

jqueryeasyui学习教程

ID:12488560

大小:1.50 MB

页数:128页

时间:2018-07-17

jqueryeasyui学习教程_第1页
jqueryeasyui学习教程_第2页
jqueryeasyui学习教程_第3页
jqueryeasyui学习教程_第4页
jqueryeasyui学习教程_第5页
资源描述:

《jqueryeasyui学习教程》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、教程概述这个教程的目的是说明如何使用easyui框架容易的创建网页。首先,你需要包含一些js和css文件:easyui预定义了

2、一些图标css,这些css类可以显示图片背景(16×16)。使用这些类之前,需要包含:内容1.拖放o基本拖放o创建购物车式拖放o创建课程表基本拖放这个教程显示如何使HTML元素变得可拖放。这个例子会创建3个DIV元素然后让它们变得可拖放。首先,创建三个DIV元素:

3、dd3"class="dd-demo">

让第一个DIV元素可拖放,使用默认的拖放样式。$('#dd1').draggable();让第二个DIV元素使用proxy来拖放,proxy:'clone'表示proxy使用原始元素的复制。$('#dd2').draggable({proxy:'clone'});让第三个DIV元素使用自定义proxy来拖放$('#dd3').draggable({proxy:function(source){varp=$('proxy
');p.appe

4、ndTo('body');returnp;}});构建购物车型拖放使用jQueryeasyui,我们在web应用中就有了拖放的能力。这个教程显示了如何构建购物车页,它使用户拖放他们希望购买的产品,更新购物篮的物品和价格。显示产品页:

  • Balloon

    Price:$25

  • 5、"shirt2.gif"/>

    Feeling

    Price:$25

  • ul元素包含一些li元素以显示产品。每一个产品的名称和单价属性在P元素中。创建购物车:

    ShoppingCart

    Name

    6、QuantityPriceTotal:$0

    Dropheretoaddtocart

    使用datagrid显示购物篮项目。拖曳产品副本$('.item').draggable({revert:true,proxy:'clone',onStartDrag:f

    7、unction(){$(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:functi

    8、on(e,source){$(source).draggable('options').cursor='auto';},onDragLeave:function(e,source){$(source).draggable

    当前文档最多预览五页,下载文档查看全文

    此文档下载收益归作者所有

    当前文档最多预览五页,下载文档查看全文
    温馨提示:
    1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
    2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
    3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
    4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。