easyUI学习
Posted 大山008
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了easyUI学习相关的知识,希望对你有一定的参考价值。
1.引入文件 :jq、easyui、图标、样式、中文格式
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
2 easyui两种实现方式
第一:html方式
<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;" data-options="iconCls:‘icon-save‘,resizable:true,modal:true"> Dialog Content. </div>
第二:jq的方式
$(‘#dd‘).dialog({ modal: true });
两种方法没有多大区别,可以混用,但一般与后台交互优先用第二种
3 panel
<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" data-options="iconCls:‘icon-save‘,closable:true, collapsible:true,minimizable:true,maximizable:true"> <p>panel content.</p> <p>panel content.</p> </div> <input type=‘button value=‘xxx’ onclick="$(‘#p‘).panel(‘open‘)" /> <input type=‘button value=‘xxx’ onclick="$(‘#p‘).panel(‘close‘)" /> //仅仅改变样式,之前节点还在 <input type=‘button value=‘xxx’ onclick="$(‘#p‘).panel(‘destory‘)" />//销毁ssuou所选中节点
其他api很详细
以上是关于easyUI学习的主要内容,如果未能解决你的问题,请参考以下文章