easyui 快速入门之第一章

一：概念

easyui是基于jQuery、Angular.、Vue和React的用户界面组件的集合。
easyui提供了构建现代交互式javascript应用程序的基本功能。
使用easyui，您不需要编写许多javascript代码，通常通过编写一些HTML标记来定义用户界面。
完整的HTML5网页框架。
使用easyui开发你的产品时可以大量节省你的时间和规模。
easyui使用非常简单但功能非常强大。

准备工作：

下载地址：http://www.jeasyui.net

自行在官网中下载

环境搭建：

目录说明：

demo：例示，非常重要，以后做开发，记不起来代码，可以直接复制例示。

demo-moblie：手机端的例示，因为手机端已经有很多优秀UI框架，所以EasyUI在手机端基本没有人用的（忽略）。

locale：编码支持库

plugins：没有压缩过的插件源码

src：没有压缩过的核心源码

themes：主题样式，有个可以选择

easyloader.js：源码加载器

jquery.easyui.min.js：PC使用类库。

jquery.easyui.moblie.js：手机端使用类库

jquery.min.js：Jquery框架

搭建环境的步骤如下：

1. 导入需要的css样式文件。easyui.css icon.css 2. 导入相关的js文件
jquery.min.js
jquery.easyui.min.js
jquery.easyui-lang-zh_CN.js
3. 注意：
themes中的文件相对路径不能变。

<!-- 引入EasyUI的css依赖 -->
<link rel = "stylesheet" href = "${pageContext.request.contextPath }/js/plugins/easyui/themes/default/easyui.css"><!-- 引入EasyUI的图标依赖 -->
<link rel = "stylesheet" href = "${pageContext.request.contextPath }/js/plugins/easyui/themes/icon.css"><!-- 引入EasyUI的相关JS依赖 -->
<script type="text/javascript" src = "${pageContext.request.contextPath }/js/plugins/easyui/jquery.min.js"></script><script type="text/javascript" src = "${pageContext.request.contextPath }/js/plugins/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src = "${pageContext.request.contextPath }/js/plugins/easyui/locale/easyui-lang-zh_CN.js"></script>

入门案例：将a链接标签转换成easy样式按钮

标签： <a href="#">按钮</a>样式名： 规范: easyui-样式名<a href="#" class="easyui-linkbutton">按钮</a>js插件名：$("选中超链接").插件名();$("a").linkbutton();

①：代码模板

实现方式一：HTML标签+EasyUI样式

<!-- HTML标签+EasyUI样式 -->
<a href = "#" class = "easyui-linkbutton">东方不败</a>

实现方式二：HTML标签+编程插件方法

<!-- HTML标签+ easyui 插件方法 -->
<a style="color: green;" id="btn1" href="#">风清扬</a>

<script>//使用easyui按钮插件$("#btn1").linkbutton();
</script>

②：EasyUI的三大基础概念

属性：EsayUI框架控件（HTML）的属性（设置插件的样式。图标，宽度，高度）
事件: EasyUI 框架控件可以触发的事件（如：点击事件、双击事件等）
方法： EasyUI 框架控件，只有调用了默认执行的逻辑代码块。（修改插件属性，状态。）

③:属性设置

1.HTML方式设置

<标签 class = "easyui-样式名" data-options = "属性名:值,属性名:值,事件名:事件函数名"></标签>

 <!-- HTML标签 + esyui-样式 --><!-- iconCls 图标 --><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'large',onClick:testEvent">风清扬</a>

2.基于javascript方式设置

<标签 id = "tag"></标签>$("#tag").插件名({属性名:属性值,属性名:属性值

注意事项：

字符串类型的数值一定要有引号（单引号，或者双引号都可以）
属性之间使用逗号分隔，最后一个属性不可以有逗号

<!-- HTML标签+ easyui 插件方法 --><a style="color: green;" id="btn1" href="#">风清扬</a><script>//使用easyui按钮插件$("#btn1").linkbutton({iconCls:'icon-cancel',size:'large'});
</script>

④：事件触发设置

1.HTML方式设置[不推荐]

 <标签 class = "easyui-样式名" data-options = "属性名:值,属性名:值,事件名:事件函数名"></标签>

<a href="#" class="easyui-linkbutton" data-options="onClick:testEvent">黄浩</a><script>function testEvent(){alert("我被点了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");//调用按钮的 disable方法。//$("按钮").linkbutton('disable');$("a:first").linkbutton('disable');}</script>

2.基于javascript方式设置

<标签 id = "tag"></标签>$("#tag").插件名({属性名:属性值,属性名:属性值,事件名:function(){}
});

 <a style="color: green;" id="btn1" href="#">风清扬</a><script>//使用easyui按钮插件$("#btn1").linkbutton({onClick:function(){alert("风清扬，被点了。");}
});</script>

⑤：方法调用设置

$("标签").easyui插件名('方法名',方法传入的参数);

$('#btn1').linkbutton('resize', {width: '100%',height: 32});

我们必须要理解属性、事件、方法的使用方式，因为所有的EasyUI组件的就是千篇一律地使用上述的这三种概念的知识完成界面的构建以及事件的触发。

二：布局·layout

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

<!-- fit:true 自适应屏幕 --><div id="cc" class="easyui-layout"  data-options = "fit:true">   <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   </div>

easyui 快速入门之第一章相关推荐

Storm入门之第一章
原书下载地址译者:吴京润编辑:方腾飞译者注:本文翻译自<Getting Started With Storm>,本书中所有Storm相关术语都用斜体英文表示. 这些术语的字面意义 ...
【Aries - Unity入门】第一章行业与引擎的了解
目录 -------- [Aries - Unity入门] -------- 第一章行业与引擎的了解 1.1 什么是Unity? 1.2 Unity能做什么? 1.3 什么是引擎? 1.4 游戏行业 ...
Hadoop快速入门——第三章、MapReduce案例(字符统计)
Hadoop快速入门--第三章.MapReduce案例目录环境要求: 1.项目创建: 2.修改Maven 3.编码 4.本地文件测试 5.修改[Action]文件(修改测试文件路径) 6.导出ja ...
MyBatis快速入门——第三章、DML语句操作
MyBatis快速入门--第三章.DML语句操作目录在接口类中添加[UsersMapper.java] 修改[com.item.mapper.UsersMapper.] [action.java] ...
Hadoop快速入门——第四章、zookeeper安装
Hadoop快速入门--第四章.zookeeper安装压缩包下载地址:[https://download.csdn.net/download/feng8403000/85227883] 目录 1.上 ...
微信小程序零基础入门_第一章小程序和开发者工具的介绍
第一章小程序和开发者工具的基本介绍 1.1 小程序的开发工具微信小程序的开发者需要先通过微信公众平台注册开发者账号.在微信公众平台网页中的账号分类->小程序中有着较为详细的注册介绍,可以较为 ...
《进击吧！Blazor！》系列入门教程第一章 7.图表
作者备注 <进击吧!Blazor!>是本人与张善友老师合作的Blazor零基础入门系列视频,此系列能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力. 视频地址:http ...
Kali Linux 无线渗透测试入门指南第一章配置无线环境
第一章配置无线环境作者:Vivek Ramachandran, Cameron Buchanan 译者:飞龙协议:CC BY-NC-SA 4.0 简介如果我要在八个小时之内砍倒一棵树,我会花六 ...
kail linux配置无线网络,Kali Linux 无线渗透测试入门指南第一章配置无线环境
第一章配置无线环境作者:Vivek Ramachandran, Cameron Buchanan 译者:飞龙简介如果我要在八个小时之内砍倒一棵树,我会花六个小时来磨我的斧子. -- 亚伯拉罕· ...
Java极速入门系列:第一章Java概述、Java环境、IDEA开发工具
Java极速入门-第一章Java概述.Java环境.IDEA开发工具一.什么是Java 1.好的编程语言的特性 2.Java的特点 3.Java的运行机制 4.Java的三大体系 5.Java环境 ...

easyui 快速入门之第一章

一：概念

准备工作：

环境搭建：

目录说明：

demo：例示，非常重要，以后做开发，记不起来代码，可以直接复制例示。

demo-moblie：手机端的例示，因为手机端已经有很多优秀UI框架，所以EasyUI在手机端基本没有人用的（忽略）。

locale：编码支持库

plugins：没有压缩过的插件源码

src：没有压缩过的核心源码

themes：主题样式，有个可以选择

easyloader.js：源码加载器

jquery.easyui.min.js：PC使用类库。

jquery.easyui.moblie.js：手机端使用类库

jquery.min.js：Jquery框架

搭建环境的步骤如下：

入门案例：将a链接标签转换成easy样式按钮

①：代码模板

②：EasyUI的三大基础概念

③:属性设置

1.HTML方式设置

2.基于javascript方式设置

注意事项：

④：事件触发设置

1.HTML方式设置[不推荐]

2.基于javascript方式设置

⑤：方法调用设置

二：布局·layout

easyui 快速入门之第一章相关推荐

最新文章

热门文章