java：easyui（重点示例）
Posted 咫尺天涯是路人丶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了java：easyui（重点示例）相关的知识，希望对你有一定的参考价值。
1.accordion（可折叠的）：
<!doctype html> <html lang="zh"> <head> <title>easyUI鐨勯潰鏉跨粍浠�</title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> </head> <body> <div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> <div title="Title1" data-options="iconCls:\'icon-save\'" style="overflow:auto;padding:10px;"> <h3 style="color:#0099FF;">Accordion for jQuery</h3> <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> </div> <div title="Title2" data-options="iconCls:\'icon-reload\'" style="padding:10px;"> content2 </div> <div title="Title3" data-options="selected:true"> content3 </div> </div> </body> </html>
2.datagrid（数据表格）：
<!doctype html> <html lang="zh"> <head> <title>easyUI的window组件</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> </script> </head> <body> <table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px" data-options="singleSelect:true,collapsible:true,url:\'datagrid_data1.json\',method:\'get\',pagination:true, pageSize:10"> <thead> <tr> <th data-options="field:\'itemid\',width:80">Item ID</th> <th data-options="field:\'productid\',width:100">Product</th> <th data-options="field:\'listprice\',width:80,align:\'right\'">List Price</th> <th data-options="field:\'unitcost\',width:80,align:\'right\'">Unit Cost</th> <th data-options="field:\'attr1\',width:250">Attribute</th> <th data-options="field:\'status\',width:60,align:\'center\'">Status</th> </tr> </thead> </table> </body> </html>
3.dialog（会话）：
<!doctype html> <html lang="zh"> <head> <title>easyUI的window组件</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> </script> </head> <body> <div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;" data-options="iconCls:\'icon-save\',resizable:true,modal:true,collapsible:true,maximizable:true,buttons:[{ text:\'保存\', handler:function(){ alert(\'save...\'); } },{ text:\'关闭\', handler:function(){ $(\'#dd\').dialog(\'close\'); } }]"> Dialog Content. </div> </body> </html>
4.form（表格）：
<!doctype html> <html lang="zh"> <head> <title>easyUI的面板组件</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> </head> <body> <form id="ff" method="post"> <div> <label for="name">Name:</label> <input class="easyui-validatebox" type="text" name="name" data-options="required:true" /> </div> <div> <label for="email">Email:</label> <input class="easyui-validatebox" type="text" name="email" data-options="validType:\'email\'" /> </div> <div> <label for="email">Password:</label> <input class="easyui-passwordbox" type="text" name="password" /> </div> <div> <label for="email">Birthday:</label> <input id="dd" type="text" class="easyui-datebox" required="required"> </div> <div> <label for="email">Birthday2:</label> <input id="dd" type="text" class="easyui-datetimebox" required="required"> </div> <div> <label for="email">Age:</label> <input id="dd" type="text" class="easyui-numberbox" required="required" data-options="min:1,max:150"> </div> </form> </body> </html>
5.layout（布局）：
<!doctype html> <html lang="zh"> <head> <title>easyUI鐨刲ayout</title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> </head> <body> <div id="cc" class="easyui-layout" style="width:100%;height:700px"> <div data-options="region:\'north\',title:\'North Title\',split:true" style="height:100px;"></div> <div data-options="region:\'south\',title:\'South Title\',split:true" style="height:100px;"></div> <div data-options="region:\'east\',title:\'East\',split:true" style="width:100px;"></div> <div data-options="region:\'west\',title:\'West\',split:true" style="width:100px;"></div> <div data-options="region:\'center\',title:\'center title\'" style="padding:5px;background:#eee;"></div> </div> </body> </html>
6.layout2（布局2）:
<!doctype html> <html lang="zh"> <head> <title>easyUI鐨刲ayout</title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript"> function addTabs(id){ if ($(\'#tt\').tabs(\'exists\', id)){ $(\'#tt\').tabs(\'select\', id); } else { $("#tt").tabs(\'add\',{ title:id, content:\'Tab Body\', closable:true }); } } </script> </head> <body> <div id="cc" class="easyui-layout" style="width:100%;height:700px"> <div data-options="region:\'north\',title:\'North Title\',split:true" style="height:100px;"> <h1>WELCOME!</h1> </div> <div data-options="region:\'west\',title:\'MENU\',split:true" style="width:200px;"> <div id="aa" class="easyui-accordion" style="width:192px;height:200px;"> <div title="USER MANAGER" data-options="iconCls:\'icon-save\'" style="overflow:auto;padding:10px;"> <ul> <li><span id="addUser" onclick="addTabs(\'addUser\')">ADD USER</span></li> <li><span id="listUser" onclick="addTabs(\'listUser\')">LIST USER</span></li> </ul> </div> <div title="ROLE MANAGER" data-options="iconCls:\'icon-reload\'" style="padding:10px;"> content2 </div> <div title="RIGHT MANAGER"> content3 </div> </div> </div> <div data-options="region:\'center\'" id="tt" class="easyui-tabs" style="padding:5px;background:#eee;"> <div title="index" style="padding:20px;display:none;"> tab1 </div> </div> <div data-options="region:\'south\',title:\'South Title\',split:true" style="height:100px;"> <h2>Copyright</h2> </div> </div> </body> </html>
7.message（消息）:
<!doctype html> <html lang="zh"> <head> <title>easyUI的window组件</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function[刘阳Java]_easyui-panel组件入门级_第3讲