EasyUI文档学习心得
概述
jQuery EasyUI 是一组基于jQuery 的UI 插件集合,它可以让开发者在几乎完全不需要CSS以及复杂的JS代码情况下完成美观且功能强大的Web界面。
本文主要说明一些如何利用EasyUI文档快速学习的心得。官网文档介绍的比较详细,也可以使用中文文档。
官网文档:
http://www.jeasyui.com/tutorial/index.php
http://www.jeasyui.com/documentation/index.php
中文官网文档:
http://www.jeasyui.net/tutorial/
各版本中文离线文档整合地址:
http://download.csdn.net/album/detail/343
为什么说几乎不需要CSS?
EasyUI中自带了各个组件的CSS样式,并且有多种主题可选。即使默认提供的几种主题不能满足需要,也可以使用官方的主题编辑器进行修改。官方主题编辑器地址:
http://www.jeasyui.com/themebuilder/index.php
浏览器兼容性如何?
支持所有主流浏览器,支持H5,支持扩展。在1.3.5版本后自带了jQuery2.x,所以如果需要支持低版本IE浏览器请使用1.3.5之前版本。
比较重要的组件
EasyUI对自己的组件已有分类:Base(基础)、Layout(布局)、Menu and Button(菜单和按钮)、Form(表单)、Windows(窗口)、DataGrid and Tree(表格和树)、Extension(扩展)。
快速学习的话,可以直接从具体的分类里直接看。如果不想要书写CSS的话,应从Layout开始看,特别是Layout中的Layout部分(它确实是这么分类的)。Base里面包含提示框、进度条等常用组件。
个人使用最多的是DataGrid and Tree部分。
学习EasyUI有哪些条件
必要条件是需要知道一些HTML的标签、基础知识。最好是有JS和jQuery的基础。
本文大部分内容是基于有JS和jQuery基础的。
入门示例
本文主要介绍文档学习,所以入门我就贴一段HTML代码,效果是实现一个可拖拽的对话框。这个示例没有使用自定义的CSS和JS。
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /> </head> <body> <div class="easyui-dialog" style="width:500px;height:250px" data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok'"> Hello World! </div> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> </body> </html>
属性、事件、方法
文档首页率先说明了属性、事件、方法。因为EasyUI每个组件几乎都有这三个东西,并且API也是通过这三个东西展示的。开篇介绍里需要记住的,调用方法的语法:
$('selector').plugin('method', parameter);
开篇还介绍了如果添加扩展方法,比如为dialog组件添加一个移动的方法:
$.extend($.fn.dialog.methods, { mymove: function(jq, newposition){ return jq.each(function(){ $(this).dialog('move', newposition); }); } });
调用时:
$('#dd').dialog('mymove', { left: 200, top: 100 });
EasyUI中的继承
EasyUI存在继承,在每个组件的开始都会先介绍其继承关系。比如combo组件:
扩展自$.fn.validatebox.defaults。使用$.fn.combo.defaults重写默认值对象。
那么知道这个继承关系有什么用?在某些时候需要这个组件的某些属性、事件、方法,但是文档上却查不到,这里你可以试试从其继承链向上查。
比如datagrid,继承于panel,我想给datagrid设置标题、高度、宽度,但是在datagrid文档中没找到这些属性,这时可以去panel组件文档上找,由于继承的关系,这些属性也是可用的。
缺点
EasyUI一直在以版本更新的方式修正自身的缺点,并且在现在的互联网环境仍然存活,但是有些问题不可避免。
EasyUI闭源,商业版付费,这导致如果核心出现bug难以调试。而且异步直接重写了jQuery的错误处理方法,导致全局ajaxSetup不可用。
论坛不活跃,有问题可能难以靠别人或者资料解决。
总结
EasyUI个人觉得快速开发小型应用以及企业内部软件系统还是比较合适的。因为其闭源(可维护性、安全性差)、过程化的代码结构,开发大型应用上估计不是很合适。
以后如果有新的心得会继续在此补充。不过现在工作中其实已经用不到EasyUI了,也不知道其以后发展会如何,但是当初使用的时候真的用的很舒服,遇到bug的时候又十分蛋疼。在此我还是希望其越来越好。
转载于:https://www.cnblogs.com/yaoh/p/5224857.html
EasyUI文档学习心得相关推荐
- Spring文档学习
Spring文档学习 参考Spring Framework Documentation学习 1. IoC 容器 1.1 容器实例化 <beans><import resource=& ...
- UHS-II文档学习
#UHS-II文档学习 UHS-II 引脚分配 SD4.0与SD3.0相比多了底下一排引脚[10-17],UHS-II Mode使用的是三组差分信号分别为:D0.D1和RCLK差分信号.RCLK差分信 ...
- python文档学习
文章目录 python文档学习 python解释器 传入参数 交互模式的提示符 帮助信息 基础知识 python保留字 注释 多行语句 缩进 python数据类型与运算符 变量与基本类型 数字类型 集 ...
- Django 4.0文档学习(一)
本系列文章基于Django4.0版本官方网站文档学习 使用开发工具为pycharm > python -m django --version 4.0 文章目录 编写你的第一个 Django 应用 ...
- Spring Framework 5.3文档学习(一)
Spring Framework 5.3文档学习(一) Overview 1.What We Mean by "Spring" 2. History of Spring and t ...
- 《Get Started with WebRTC》文档学习
学习资料:https://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-disruptive 学习计划:2021.05.09之前,计划时长为两天 ...
- 【ember zigbee】序章:协议栈相关文档学习笔记
原文地址:https://blog.csdn.net/tainjau/article/details/90648114 文章目录 写在前面 一.材料出处 二.文档解析 2.1.EZSP Protoco ...
- POCO软件测试自学,自动化UI测试工具airtest 之V2.2 airtest文档学习POCO
图片发自简书App 一个编程大白,我在学自动化UI测试工具airtest. 一.硬件软件的准备与连接 二.学习AirtestIDE官方文档 三.用Airtest对多台手机操控 四.纯python代码操 ...
- 第三次SLA文档学习
前言 完成早期阶段后要进入提高期阶段,其实也不知道自己是否达到了早期阶段的标准.只能说特别简单的而且是极个别的词汇能够形成音图映射,听到极个别的某些句子,脑海里也会浮现出对应的图片和视频片段,这就是思 ...
最新文章
- 卸载ORACLE 11g
- 【Docker】网络模式
- Linux基础书籍推荐
- 模拟请求分页式存储管理 ---4种置换算法
- 【ArcGIS Pro微课1000例】0001:Win7系统ArcGIS Pro2.5安装权威教程(附软件安装包下载)
- 服务器显卡驱动修复,AMD发布2020年首个显卡驱动:一口气修复27个Bug
- 分布式系统 c语言,C语言分布式系统中的进程标识!
- 资产管理软件 GLPI的安装(转)
- CityEngine建模全流程解析与分享【系列文章之一】
- linux 交叉编译器作用,Linux下交叉编译器学习
- linux怎么用中文显示,linux中文显示设置
- Mybatis Plus分页Page total始终为0
- lilo是什么意思_Lilo_英文名Lilo是什么意思
- 多个元素过渡---过渡模式
- vue3 vite版本 引入本地静态图片的方式
- 使用Docker提交代码参加天池比赛流程
- 初中数学教师资格证考试成功通过前辈复习经验分享
- Comet OJ CCPC-Wannafly Winter Camp Day8 A Aqours
- AD19 更改3D效果图颜色
- java后端实现文件下载
热门文章
- word2vec需要去标点吗_word2vec训练词向量前期处理-中文分词等
- yolov3识别的类别_Gaussian YOLOv3:一个更强的YOLOv3,现已开源!
- Java常用算法三:01背包问题
- [leetcode]174. 地下城游戏
- C++11新特性之 可变参数模板
- 2017蓝桥杯B组:取数位(递归,求余和除法)
- 选择操作、投影操作、交操作
- istio-opentracing链路追踪方案
- 贺利坚老师汇编课程26笔记:LOOP指令使用再议
- 当AD19原理图导出位PCB图时报错UnkownPin和Failed to add class member可能的解决办法