这里并没有使用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=" 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=" 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=" 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=" 100%"> <tr> <td> <img src="source/logo.jpg" style=" 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