esayui 窗口特效详解

来源：互联网发布：郑州淘宝销售团队编辑：程序博客网时间：2024/06/03 03:11

<div id="w" class="easyui-window" title="Fluid Window" style="width:80%;height:200px;padding:10px;" data-options="iconCls:'icon-save',onResize:function(){$(this).window('hcenter');}"><p>The window has a width of 80%.</p></div>

窗口可拖动和可拖拽

<div id="w" class="easyui-window" title="Window with a Footer" data-options="iconCls:'icon-save',footer:'#footer'" style="width:500px;height:200px;padding:10px;">The window content.</div><div id="footer" style="padding:5px;">Footer Content.</div>

窗口底部栏位

窗口在指定范围内

<div class="easyui-panel" style="position:relative;width:500px;height:300px;overflow:auto;"><div id="w" class="easyui-window" data-options="title:'Inline Window',inline:true" style="width:250px;height:150px;padding:10px">This window stay inside its parent</div></div>

带遮罩层窗口

<div id="w" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:500px;height:200px;padding:10px;">The window content.</div>

ok cancel 按钮布局分割

<div id="w" class="easyui-window" title="Window Layout" data-options="iconCls:'icon-save'" style="width:500px;height:200px;padding:5px;"><div class="easyui-layout" data-options="fit:true"><div data-options="region:'east',split:true" style="width:100px"></div><div data-options="region:'center'" style="padding:10px;">jQuery EasyUI framework help you build your web page easily.</div><div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;"><a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="javascript:alert('ok')" style="width:80px">Ok</a><a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:alert('cancel')" style="width:80px">Cancel</a></div></div></div>

0 0