easy ui 简单使用


1:引入需要的js与css

    <script src="jquery-easyui-1.3.5/jquery.min.js"></script>
    <script src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>//easyui核心文件
    <script src="jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>//国际化
    <link href="jquery-easyui-1.3.5/themes/default/easyui.css" rel="stylesheet" />//主题文件
    <link href="jquery-easyui-1.3.5/themes/icon.css" rel="stylesheet" />//主题使用的图标


2:构造easy ui 控件

     js方式

     首先建立一个div标签

<div id="myd">Dialog Content.</div>
    然后选择div调用dialog就可以把普通的div渲染成easy ui的dialog控件
  $(function () {

             $("#myd").dialog({
                 width: 200,
                 height: 300,
                 title:"mydialog"
             });

         })

    easy ui 简单使用_第1张图片

    html方式效果一样

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:200px;height:300px;">
       Dialog Content.
    </div>

3:使用easyui-validatebox

    easyui-validatebox是和easy ui的form一起使用的,在提交的使用easy ui 会自己调用validate方法验证,

    所以我们在使用自己的ajax提交时需要手动调用validate方法验证一次

    if ($("#myForm").form("validate"))
      { login(); }

4:使用layout 

    layout是由上下左右中的5的panel组成

    获得中间的panel  

    var p = $("#layout").layout('panel', "center");

    获得中间panel属性中的title

    p.panel("options").title

   

   属性href是嵌入一个html页面,但只渲染body部分

   所以为了简洁全部删除直接写代码就相当于在body部分写代码


5:常用的属性

    fit一般要做控件之间的改变而改变都要设置fit为true


6:commobox取值

     .combobox('getValue')

     .combobox('getTest')




你可能感兴趣的:(easy ui 简单使用)