1.1 easyui入门

 

一，引入文件

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>

 注意引入文件的顺序

二，常用操作

获得属性  $("#panel").panel('options').title

调用方法 $('#pid').combotree('setValue', parent.id)

监听事件：

$("#panel").panel({
    onBeforeClose: function (){
     if(confirm('确定关闭吗?')){
      return true;
     }
     return false;
 }

自定义图标的使用 :
      (1)icon.css文件中添加样式  如.icon-myself;
      (2)使用样式 如iconCls:'icon-myself'

 

1.validatebox

   支持的校验email,url,length[0,100],remote

  扩展校验规则：

 

2.textbox

支持文本框中嵌套图标，以及校验规则。

 

3.form 

ajax提交$('#ff').form('submit'),非ajax提交 $('#ff').submit();
提交前校验参数 $("#ff'").form('validate')

 

4.panel

panel 由header{icon,title,tool},body{header,body,footer}组成；cls,headerCls,bodyCls控制相应的样式 。
当title属性为空时不显示header,header样式由headerCls控制

只改变工具栏默认图标   修改样式 (默认图标情况下查看html源码)如.panel-tool-collapse 的background属性

 

 5.layout 布局

东南西北中方位，可嵌套

让其高度百分百

html,body{
    margin:0px;
 height:100%;
}   <div class="easyui-layout"  style="height:100%;" >

 

6.accordion

multiple ：true打开多个panel