jQuery_EasyUI教程资源-CSDN文库

需积分: 3 87 浏览量 2012-08-30 09:16:55 上传评论 4 收藏 1.72MB DOC 举报

### jQuery EasyUI 教程知识点详解 #### 一、EasyUI 框架简介与配置 **EasyUI** 是一个基于 jQuery 的用户界面插件集合，它提供了丰富的 UI 组件和功能，使得开发者能够轻松地创建出美观且交互性强的网页。本教程将详细介绍如何使用 EasyUI 构建网页，并通过实例演示 EasyUI 的基本用法。 **配置 EasyUI：** 为了使用 EasyUI，我们需要先在 HTML 页面中引入必要的 JS 和 CSS 文件： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>EasyUI 示例</title>  <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">  <link rel="stylesheet" type="text/css" href="../themes/icon.css">  <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>  <script type="text/javascript" src="../jquery.easyui.min.js"></script> </head> <body> ... </body> </html> ``` #### 二、拖放功能实现 **基本概念：** 拖放(Drag and Drop)是一种直观的交互方式，允许用户通过鼠标将页面中的某个元素移动到另一个位置。 **基本拖放示例：** 1. **创建可拖动元素：** ```html <div id="dd1" class="dd-demo"></div> <div id="dd2" class="dd-demo"></div> <div id="dd3" class="dd-demo"></div> ``` 2. **使元素可拖动：** - 使用默认拖放样式： ```javascript $('#dd1').draggable(); ``` - 使用 `proxy` 属性进行复制拖放： ```javascript $('#dd2').draggable({ proxy: 'clone' }); ``` - 自定义 `proxy` 进行拖放： ```javascript $('#dd3').draggable({ proxy: function (source) { var p = $('<div class="proxy">proxy</div>'); p.appendTo('body'); return p; } }); ``` **构建购物车式拖放：** 1. **显示产品列表：** ```html <ul class="products"> <li> <a href="#" class="item"> <img src="shirt1.gif" /> <div> <p>Balloon</p> <p>Price: $25</p> </div> </a> </li>  </ul> ``` 2. **创建购物车：** ```html <div class="cart"> <h1>Shopping Cart</h1> <table id="cartcontent" style="width: 300px; height: auto;"> <thead> <tr> <th field="name" width="140">Name</th> <th field="quantity" width="60" align="right">Quantity</th> <th field="price" width="60" align="right">Price</th> </tr> </thead> </table> <p class="total">Total: $0</p> <h2>Drop here to add to cart</h2> </div> ``` 3. **设置拖拽属性：** ```javascript $('.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'; } }); ``` 4. **设置可放置区域：** ```javascript $('.cart').droppable({ onDragEnter: function (e, source) { // 处理拖拽进入事件 }, onDragLeave: function (e, source) { // 处理拖拽离开事件 }, onDrop: function (e, source) { // 处理放置事件 } }); ``` 以上就是使用 EasyUI 实现基本拖放以及构建购物车式拖放的基本步骤。通过这些示例，我们可以看到 EasyUI 在实现复杂的用户交互方面非常强大和方便。接下来，可以根据实际需求进一步定制这些示例，以满足具体的应用场景。

资源推荐

资源详情

资源评论