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)" οnclick="addTab()">
add tab</a> <a class="easyui-linkbutton" href="javascript:void(0)" οnclick="getSelected()">
getSelected</a> <a class="easyui-linkbutton" href="javascript:void(0)" οnclick="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" οnclick="javascript:alert('add')"></a>
<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save" οnclick="javascript:alert('save')"></a>
</div>
<div id="p-tools">
<a href="#" class="icon-mini-add" οnclick="alert('add')"></a>
<a href="#" class="icon-mini-edit" οnclick="alert('edit')"></a>
<a href="#" class="icon-mini-refresh" οnclick="alert('refresh')"></a>
</div>
</form>