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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值