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

jQuery easyUI简介

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

easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。
HTML 网页的完整框架。
easyui 节省了开发产品的时间和规模。
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'
});

jQuery easyUI拖放

基本的拖动和放置　　

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

　　
实例下载地址