EasyUi

时间:2019-07-20
本文章向大家介绍EasyUi,主要包括EasyUi使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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);

    }

})



原文地址:https://www.cnblogs.com/yshxin/p/11216554.html