jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。
easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。HTML 网页的完整框架。easyui 节省了开发产品的时间和规模。easyui 非常简单，但是功能非常强大。
jQuery easyUI下载
jQuery easyUI
如何开始使用
1.直接在HTML声明
<div class="easyui-dialog" style="width:400px;height:200px" data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}"> dialog content. </div>2.编写 JavaScript 代码来创建组件。
<input id="cc" style="width:200px" />$('#cc').combobox({ url: ..., required: true, valueField: 'id', textField: 'text' });
基本的拖动和放置
首先，我们创建三个<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> 元素，我们通过创建一个克隆（clone）了原来元素的代理（proxy）让其可以拖动。
$('#dd2').draggable({ proxy:'clone' });
对于第三个<div> 元素，我们通过创建自定义代理（proxy）让其可以拖动。
$('#dd3').draggable({ proxy:function(source){ var p = $('<div class="proxy">proxy</div>'); p.appendTo('body'); return p; } });
实例下载地址
创建可拖动的购物车 显示页面上的商品
<ul class="products"> <li> <a href="#" class="item"> <img src="images/shirt1.gif"/> <div> <p>Balloon</p> <p>Price:$25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="images/shirt2.gif"/> <div> <p>Feeling</p> <p>Price:$25</p> </div> </a> </li> <!-- other products --> </ul>正如您所看到的上面的代码，我们添加一个包含一些 <li> 元素的<ul> 元素来显示商品。所有商品都有名字和价格属性，它们包含在<p>元素中。
创建购物车
<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>
我们使用数据网格（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'，所以拖动元素将由克隆产生。 放置选择商品到购物车中 每当放置商品的时候，我们首先得到商品名称和价格，然后调用 'addProduct' 函数来更新购物篮。
$('.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){ var name = $(source).find('p:eq(0)').html(); var price = $(source).find('p:eq(1)').html(); addProduct(name, parseFloat(price.split('$')[1])); } }); var data = {"total":0,"rows":[]}; var totalCost = 0; function addProduct(name,price){ function add(){ for(var i=0; i<data.total; i++){ var row = 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); }实例下载地址
创建学校课程表
我们将创建两个表格：在左侧显示学校科目，在右侧显示时间表。 您可以拖动学校科目并放置到时间表单元格上。 学校科目是一个<div class="item">元素，时间表单元格是一个 <td class="drop"> 元素。
显示学校科目
<div class="left"> <table> <tr> <td><div class="item">English</div></td> </tr> <tr> <td><div class="item">Science</div></td> </tr> <!-- other subjects --> </table> </div>显示时间表
<div class="right"> <table> <tr> <td class="blank"></td> <td class="title">Monday</td> <td class="title">Tuesday</td> <td class="title">Wednesday</td> <td class="title">Thursday</td> <td class="title">Friday</td> </tr> <tr> <td class="time">08:00</td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> </tr> <!-- other cells --> </table> </div>拖动在左侧的学校科目
$('.left .item').draggable({ revert:true, proxy:'clone' });
放置学校科目在时间表单元格上
$('.right td.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 { var c = $(source).clone().addClass('assigned'); $(this).empty().append(c); c.draggable({ revert:true }); } } });
正如您所看到的上面的代码，当用户拖动在左侧的学校科目并放置到时间表单元格中时，onDrop 回调函数将被调用。我们克隆从左侧拖动的源元素并把它附加到时间表单元格上。 当把学校科目从时间表的某个单元格拖动到其他单元格，只需简单地移动它即可。
实例下载地址
转载于:https://www.cnblogs.com/HengZhiStudioFront-end/p/9045672.html
相关资源：JAVA上百实例源码以及开源项目