【讨论班】jQuery easyUI学习（一）

---

---

jQuery easyUI简介

---

---

jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。　　

　　

• easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
• easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
• 使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。
• HTML 网页的完整框架。
• easyui 节省了开发产品的时间和规模。
• easyui 非常简单，但是功能非常强大。　　
  　　
  　　
  　　

jQuery easyUI下载　

jQuery easyUI　　

　　　
　　
　

如何开始使用　　

1.直接在HTML声明

dialog content.

　　
　　
2.编写 JavaScript 代码来创建组件。

　　

$('#cc').combobox({
    url: ...,
    required: true,
    valueField: 'id',
    textField: 'text'
});

---

---

jQuery easyUI拖放

---

---

基本的拖动和放置　　

首先，我们创建三个<div>元素：　　

　　

　　
对于第一个 <div> 元素，我们通过默认值让其可以拖动。
　　

$('#dd1').draggable();
　　

　
对于第二个 <div> 元素，我们通过创建一个克隆（clone）了原来元素的代理（proxy）让其可以拖动。　　

$('#dd2').draggable({
proxy:'clone'
});
　　

　
对于第三个 <div> 元素，我们通过创建自定义代理（proxy）让其可以拖动。

$('#dd3').draggable({
proxy:function(source){
var p = $('

proxy

');
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>元素中。　　

创建购物车　　
　　

Shopping Cart

Name	Quantity	Price

Total: $0

Drop here to add to cart

　　

　　
我们使用数据网格（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 回调函数将被调用。我们克隆从左侧拖动的源元素并把它附加到时间表单元格上。 当把学校科目从时间表的某个单元格拖动到其他单元格，只需简单地移动它即可。
　　

　　
实例下载地址