EasyUi
时间:2019-07-20
本文章向大家介绍EasyUi,主要包括EasyUi使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
EasyUi
EasyUi
概述:easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合
Easyui使用
- 下载
- 使用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
详细使用查阅文档:https://pan.baidu.com/s/1d779WEy-mP5fLGhbuW5OqQ 提取码:ui1w
组件三要素
属性
属性:用来描述组件的信息,比如title,closable
属性的注意事项:
(1)属性在使用,在创建的时候去指定属性,创建完之后修改属性 不能达到预期的效果
(2) 属性都是有默认的值,一般不会去修改默认,要改的话,在创建的时候去指定属性
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
- JGulp: 利用Gulp 配置的前端项目自动化工作流
- 微软Enterprise Library 4.0将支持依赖注入
- 时钟AnalogClock与DigitalClock
- 细数那些在2017年被黑客滥用的系统管理工具和协议
- Compass: 在你的应用中集成搜索功能
- 列表选择Spinner
- 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)
- 开源的虚拟机软件 VirtualBox v1.5.2
- Farseer:一个用于Silverlight和XNA的开源物理引擎
- Visual Studio 2008 debug的时候发生郁闷的错误ContextSwitchDeadlock was detected
- LINQ TO XML
- 不被未来折叠掉:AI时代下的思考
- Google 分析的基准化测试
- WebFont 三宗罪之一:WebFont 与 FOUT
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Kafka linux(centos7)安装配置kerberos并在另一台机器上使用Java服务接收消息
- SpringCloud bus 手动post可用 使用webhooks自动更新配置失效的解决小记
- 处理Storm1.2.2 日志报错 与spring boot冲突
- Java 中的 ==, equals 与 hashCode 的区别与联系
- 专家精品|密码朋克的社会实验(三):比特币发明了什么
- 面试题答案
- Vue3 为何使用 Proxy 实现数据监听
- vivo 悟空活动中台 - H5 活动加载优化
- PostgreSQL常用命令
- 实用!一键生成数据库文档,堪称数据库界的Swagger
- 布隆过滤器原理
- 缓存穿透了怎么办?
- Stata | 生成等差数列的几种方式
- 一致性算法 - Raft协议流程
- 5.16.2-如何制作ElasticSearch的Parcel和csd