引入js和css文件
|
<script type="text/javascript" src="js/jquery-easyui-1.4.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-easyui-1.4.3/jquery.easyui.min.js" charset="UTF-8"></script> <link rel="stylesheet" href="js/jquery-easyui-1.4.3/themes/default/easyui.css" /> <link rel="stylesheet" href="js/jquery-easyui-1.4.3/themes/icon.css" /> <script type="text/javascript" src="js/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script> |
在页面输入一个div
|
<body> <div id="p" style="width:500px;height:200px;padding:10px;" </div> </body> |
添加一段js
|
<script type="text/javascript"> $(function() { $(‘#p‘).dialog({ modal: true// }); }); </script> |
注意：modal: false//设置背景是否可以编辑 true不可以选择 false 可以选择
Panel
面板带图标的
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-easyui-1.4.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-easyui-1.4.3/jquery.easyui.min.js" charset="UTF-8"></script> <link rel="stylesheet" href="js/jquery-easyui-1.4.3/themes/default/easyui.css" /> <link rel="stylesheet" href="js/jquery-easyui-1.4.3/themes/icon.css" /> <script type="text/javascript" src="js/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> </script> </head> <body> 11111111111 <!--<div id="p" title="1234512345" style="width:500px;height:200px;padding:10px;" </div>--> <div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" data-options="closed:true"> <p>panel content.</p> <p>panel content.</p> </div> <!--单击open按钮显示这个panel--> <input type="button" value="open" onclick="$(‘#p‘).panel(‘open‘)" /> <!--单击close按钮关闭panel 在内存中仍然存在--> <input type="button" value="close" onclick="$(‘#p‘).panel(‘close‘)" /> <!--销毁这个panel--> <input type="button" value="destroy" onclick="$(‘#p‘).panel(‘destroy‘)" /> </body> </html> |