EasyUi

EasyUi

概述:easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合

Easyui使用

• 下载

        官网下载:http://www.jeasyui.net
        云盘下载:https://pan.baidu.com/s/1a6Hl4bhhdMAEc8s2p9m6kQ 提取码:jm8b

• 使用cv+edit

        1.解压文件copy到项目根目录
         2.导入文件

<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->   
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->   
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- easyui的插件库-->      
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

     

EasyUi创建组件方式

• HTML创建;语法: <div class='easyui-组件名'/>

  <div class="easyui-window" width="680px" height="460px" title="我的第一个组件">刷新试一下</div>

     
• js代码创建

  <a id="a2">点我</a>
  $(function(){
  	iconCls: 'icon-search'   
  })

   

---

easyui组件创建原理

平时写的class="easyui-panel" --最终底层还是要调用 panel方法来创建  a)底层通过 $.parser.auto=ture  b)调用parse方法 c)循环页面的组件 找到对应 easyui-panel d)找到之后，调用 panel({})创建组件 e)panel底层组装html

EasyUi常用组件

1.panel -- 面板:http://www.jeasyui.net/plugins/159.html

2.linkbutton -- 按钮:http://www.jeasyui.net/plugins/187.html

3.menu -- 菜单:http://www.jeasyui.net/plugins/163.html

4.tree --树型菜单:http://www.jeasyui.net/plugins/185.html

详细使用查阅文档:https://pan.baidu.com/s/1d779WEy-mP5fLGhbuW5OqQ 提取码:ui1w

组件三要素

---

属性

属性：用来描述组件的信息，比如title，closable

属性的注意事项：

(1)属性在使用，在创建的时候去指定属性，创建完之后修改属性 不能达到预期的效果

(2) 属性都是有默认的值，一般不会去修改默认，要改的话，在创建的时候去指定属性

(3)属性创建方式

a.可以直接在标签上面 写 属性名=“属性值”

b.通过data-options这个里面进行指定属性 ，data-options tools:[{},{}],就不要放到data-options外面

c. a和b结合起来使用

d.通过js在创建的时候指定

---

方法

$("#id").panel('open')；

$("#id").panel('close')；

$("#id").panel('refresh‘)；

---

创建组件

$("#id").panel({参数})

事件

$("#tree").tree({

    事件名:function(){}

    onClick:function(node){

        alert(node.text);

    }

})

来自为知笔记(Wiz)