EasyUi

Posted 2022-04-27 yshxin

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)