码迷,mamicode.com
首页 > 其他好文 > 详细

easyUI学习

时间:2017-09-15 21:44:27      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:3.3   pad   log   dial   oda   option   onclick   type   inpu   

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学习

标签:3.3   pad   log   dial   oda   option   onclick   type   inpu   

原文地址:http://www.cnblogs.com/person008/p/7528421.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!