EasyUI2

http://www.jeasyui.com/demo/index.php

1.draggable droppable

http://www.jeasyui.com/tutorial/dd/dnd3_demo.html

 

<form id="form1" runat="server">
    <div class="drag-item" style=" width:140px;"></div>
    <div id="0" class="aa" style=" width:140px;">11111111111111111</div>
    <div id="1" class="aa" style=" width:140px;">22222222222222222</div>
    <div id="2" class="aa" style=" width:140px;">33333333333333333</div>
    <div id="3" class="aa" style=" width:140px;">44444444444444444</div>
    <div id="4" class="bb" style=" width:140px;">55555555555555555</div>
    <div id="5" class="bb" style=" width:140px;">66666666666666666</div>
    <div id="6" class="bb" style=" width:140px;">77777777777777777</div>
    <div id="7" class="bb" style=" width:140px;">88888888888888888</div>
    <div id="sort"></div>
    <table border="1" rules="all">
    <tr><td></td><td></td><td></td></tr>
     <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
    </table>
    </form>

 <style type="text/css">

         .aa{ cursor:pointer;}
         td{ border:soild 1px; width:140px; height:20px;}
         table{ border:soild 1px; position:relative; top:300px; left:500px;}
         .color{ background:yellow}
         .assigned{border:1px solid #BC2A4D;}
</style>

  <script src="JS/jquery-1.7.1.min.js" type="text/javascript"></script>

    <script src="JS/jquery.easyui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var sIt=setInterval("sort()", 100);
        var str = new Array();
        function sort() {
            str.sort();
            for (var i = 0; i < str.length; i++) {
                var div = $(".drag-item div[id=" + str[i] + "]");
                $(".drag-item").append($(div));
            }
        }
        $(function() {
            $('.drag-item').css("display", "none");
            $('.drag-item').draggable({
                revert: true,
                deltaX: 0,
                deltaY: 0,
                onBeforeDrag: function(e) {
                    str.sort();
                    sort();
                    clearInterval(sIt);
                }
            })
            $('.aa').click(function() {
                $(this).css("background", "yellow");
                var num = $(this).attr("id");
                str.push(num);
                $(".drag-item").append($(this));
                $(".drag-item").css("display", "block");
            })
        });
    </script>
    <script type="text/javascript">
        $(function() {
            $(".bb").draggable({
                revert: true,
                proxy: 'clone',
                onDrag: function(e) {
                    //$(this).css("background", "yellow");
                }
            })
            $("td").droppable({
            onDragEnter: function(e, source) {
                    $(this).addClass('color');
                },
                onDragLeave: function(e, source) {
                    $(this).removeClass('color');
                },
                onDrop: function(e, source) {
                    $(this).removeClass('color');
                    if ($(source).hasClass('assigned')) {
                        $(this).empty().append(source);
                    } else {
                        var div = $(source).clone().addClass('assigned');
                        $(this).empty().append(div);
                        div.draggable({
                            revert: true
                        })
                    }
                }
            })
        })
    </script>

2.Menu

http://www.jeasyui.com/easyui/demo/menu.html

 

 <form id="form1" runat="server">
     <div id="yyy" style="left:20px; top:20px; width:400px; height:400px; background-color:Yellow">
     ssssss
    </div>
    <div id="xxx" style=" position:relative; left:400px; top:400px; width:400px; height:400px; background-color:Yellow">
    <div style=" margin-left:30px; margin-top:30px; background-color:Red; width:100px; height:100px;" kkk="isNum"></div>
    <div style=" margin-left:30px; margin-top:30px; background-color:Green; width:100px; height:100px;" kkk="isnotNum"></div>
    </div>
    <div id="mm" class="easyui-menu" style="width:120px;">
    <div>
      <span>插入</span>
      <div style="width:140px;">
      <div>上方插入</div>
      <div>下方插入</div>
      </div>
    </div>
    <div class="menu-sep"></div>
    <div>批量添加</div>
    <div>设为批处理开始行</div>
    <div>设为批处理结束行</div>
    <div>批处理</div>
    <div class="menu-sep"></div>
    <div iconcls="icon-cut">剪切</div>
    <div>复制</div>
    <div id="zt">粘贴</div>
    <div class="menu-sep"></div>
    <div id="jc">
    <span>继承</span>
    <div style="width:140px;">
      <div>本页全部继承</div>
      <div>所有数据全部继承</div>
      </div>
    </div>
    <div id="dz">递增</div>
    <div id="cx" iconcls="icon-undo">撤销</div>
    <div iconcls="icon-save">保存</div>
    </div>
</form>

 

<script type="text/javascript">
        $(function() {
            $("#xxx").bind('contextmenu', function(e) {
                var kkk = $(e.srcElement).attr("kkk");
                if (kkk == 'isNum') {
                    document.getElementById("dz").style.display = "block";
                    $("#zt").bind("click", function(e) {
                        alert("粘贴");
                    })
                    document.getElementById("zt").style.color = "black";
                } else {
                    document.getElementById("dz").style.display = "none";
                    $("#zt").unbind("click");
                    document.getElementById("zt").style.color = "gray";
                }
                $('#mm').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
                return false;
            });
        })
    </script>
    <script type="text/javascript">
        $(function() {
            $("#yyy").bind('contextmenu',{a:1,b:2},function(e) {
            alert($(e.srcElement).html());
            alert(e.data.a);
            })
        })
    </script>

 

3.tabs

http://www.jeasyui.com/documentation/tabs.php

http://www.jeasyui.com/easyui/demo/tabs.html

 <link href="../JS/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../JS/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="../JS/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../JS/jquery.easyui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var index = 0;
        function addTab() {
            index++;
            $('#tt').tabs('add', {
                title: 'New Tab ' + index,
                content:'<iframe scrolling="yes" frameborder="0" src="http://www.baidu.com" style="width: 100%; height: 100%;"></iframe>',
                iconCls: 'icon-save',
                closable: true,
                tools: [{
                    iconCls: 'icon-mini-refresh',
                    handler: function() {
                        alert('refresh');
                    }
                    }]      
                });
            }
            function getSelected() {
                var tab = $('#tt').tabs('getSelected');
                alert('Selected: ' + tab.panel('options').title);
            }
            function update() {
                index++;
                var tab = $('#tt').tabs('getSelected');
                $('#tt').tabs('update', {
                    tab: tab,
                    options: {
                        title: 'new title' + index,
                        iconCls: 'icon-save'
                    }
                });
            }
    </script>

 

<form id="form1" runat="server">
    <div style="margin: 10px 0">
        <a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">
            add tab</a> <a class="easyui-linkbutton" href="javascript:void(0)" onclick="getSelected()">
                getSelected</a> <a class="easyui-linkbutton" href="javascript:void(0)" onclick="update()">
                    Update</a>
    </div>
    <div id="tt" class="easyui-tabs" tools="#tab-tools" style="width: 700px; height: 250px;">
        <div title="Tab1" tools="#p-tools" style="padding: 20px;">
        </div>
        <div title="Tab2" style="padding: 20px;" cache="false" href="../Default.aspx">
            This is Tab2 with close button.
        </div>
        <div title="Tab3" iconcls="icon-reload" closable="true" style="padding: 20px;">
            <table id="test" class="easyui-datagrid" fit="true">
                <thead>
                    <tr>
                        <th field="f1" width="60">
                            field1
                        </th>
                        <th field="f2" width="60">
                            field2
                        </th>
                        <th field="f3" width="60">
                            field3
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            d1
                        </td>
                        <td>
                            d2
                        </td>
                        <td>
                            d3
                        </td>
                    </tr>
                    <tr>
                        <td>
                            d11
                        </td>
                        <td>
                            d21
                        </td>
                        <td>
                            d31
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div title="Tab4 with iframe" closable="true" style="overflow: hidden">
            <iframe scrolling="yes" frameborder="0" src="http://www.jeasyui.com/forum/index.php"
                style="width: 100%; height: 100%;"></iframe>
        </div>
        <div title="Tab5 with sub tabs" closable="true" iconcls="icon-cut" style="padding: 10px;">
            <div class="easyui-tabs" fit="true" plain="true" style="height: 100px; width: 300px;">
                <div title="Title1" style="padding: 10px;">
                    Content 1</div>
                <div title="Title2" style="padding: 10px;">
                    Content 2</div>
                <div title="Title3" style="padding: 10px;">
                    Content 3</div>
            </div>
        </div>
    </div>
    <div id="tab-tools">
		<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add" onclick="javascript:alert('add')"></a>
		<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save" onclick="javascript:alert('save')"></a>
	</div>
	<div id="p-tools">
		<a href="#" class="icon-mini-add" onclick="alert('add')"></a>
		<a href="#" class="icon-mini-edit" onclick="alert('edit')"></a>
		<a href="#" class="icon-mini-refresh" onclick="alert('refresh')"></a>
	</div>
    </form>