這里並沒有使用js來渲染easyUI組件，通過HTML來實現。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="easyui1.3/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="easyui1.3/jquery.easyui.min.js" type="text/javascript"></script> <link href="easyui1.3/themes/gray/easyui.css" rel="stylesheet" type="text/css" /> <link href="easyui1.3/themes/icon.css" rel="stylesheet" type="text/css" /> <script src="easyui1.3/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> <script type="text/javascript"> function qq(value, name) { alert(value + "--" + name); } </script> </head> <body>
<!--這里通過toolbar 和 buttons 作為便簽屬性，並沒有使用data-options，
屬性值相當於選擇器，去選擇一個適當的DIV元素添加 toolbar 或者 buttons的位置.-->
<div id="dd" class="easyui-dialog" title="My Dialog" style="width: 400px; height: 200px; padding: 10px" toolbar="#dlg-toolbar" buttons="#dlg-buttons"> Dialog Content. </div>
<!--創建Toolbar--> <div id="dlg-toolbar"> <table cellpadding="0" cellspacing="0" style="width: 100%"> <tr> <td> <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true">Edit</a> <a href="#" class="easyui-linkbutton" iconcls="icon-help" plain="true">Help</a> </td> <td style="text-align: right">
<!--使用searchbox組件 searcher:qq 這里調用方法並沒有使用qq(value,name), 而是直接使用了qq--> <input class="easyui-searchbox" data-options="menu:'#mm',searcher:qq,prompt:'請輸入關鍵字'" /> <div id="mm" style="width: 120px"> <div data-options="name:'all',iconCls:'icon-ok'"> All News</div> <div data-options="name:'sports'"> Sports News</div> </div> </td> </tr> </table> </div>
<!--創建 Button--> <div id="dlg-buttons"> <table cellpadding="0" cellspacing="0" style="width: 100%"> <tr> <td> <img src="source/logo.jpg" style="width: 30px; height: 30px" /> </td> <td style="text-align: right"> <a href="#" class="easyui-linkbutton" iconcls="icon-save" onclick="javascript:alert('save')"> Save</a> <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dd').dialog('close')"> Close</a> </td> </tr> </table> </div> </body> </html>
效果如下圖所示：
參考：http://www.2cto.com/kf/201208/147796.html
原作者：yhc13429826359