文档章节

EasyUI入门:如何引入及简单使用

柠檬酷
 柠檬酷
发布于 2015/09/06 18:21
字数 618
阅读 41
收藏 0

也许,只有当做比较大的项目的时候,才会发现封装好的东西会为程序猿们带来多少方便。合作开发的时候更应该强调复用,才能更加发挥团队的优势。

今天使用了一些EasyUI,发现很wonderful!

比如,以前,我们为了写一个还看得过去的按钮,得先在HTML里面加入按钮,然后在CSS里面写入样式,又用JS控制它的事件,整个按钮写下来,我们已经快被烦死了,抬起头看看,我们还有label,dropList,text......等N多个这样的东西要写。后来有了JQuery了,我们的日子似乎好过了点儿,尝试过EasyUI,忽然就又体会到了封装的好处。

ok,开始进入正题,本文主要是简介在使用EasyUI进行开发时,要引入那些东西,以及一些注意事项,还有运行下我们的dialog版的“hello world” .

如下代码,我们首先要引入我们的Jquery,这个jquery的版本最好跟EasyUI里面使用的Jquery版本一至,以免出现我们使用EasyUI时莫名其妙的错误。

然后引入的是EasyUI的JS文件,注意,这两个JS文件都要指定charset.

接着是CSS文件的引入,我们选择如下的CSS文件:

接着是Icon,接着是汉化包:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>EasyUI入门</title>      </head>  <script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset="utf-8"></script>  
                                                          <!--(指定编码方式,防止出现乱码)引入EasyUI中使用的Jquery版本-->  <script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/jquery.easyui.min.js" charset="utf-8"></script>   <!--(指定编码方式,防止出现乱码)引入EasyUi文件-->  <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.2.6/themes/default/easyui.css">   <!--引入CSS样式-->  <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.2.6/themes/icon.css">   <!--Icon引入-->    <script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>  <!--汉化-->  <script>      </script><body>       <!--此处,class="easyui-dialog" 要注意,在EasyUi里面,Parser会将easyui-+****的div转换为元件,不能省去-->    <div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;"        title="这是我第一次使用EasyUI" iconCls="icon-ok"        toolbar="#dlg-toolbar" buttons="#dlg-buttons">    hello world!       </div>      </body></html>

所有文件引入完成之后,我们从官网上粘段代码来看看EasyUI的效果:

在浏览器中看到结果如图:

本文转载自:http://blog.csdn.net/lhc1105/article/details/41119163?utm_source=tuicool

柠檬酷
粉丝 4
博文 67
码字总数 3040
作品 0
西安
私信 提问
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
2018/06/28
0
0
jQuery EasyUI入门视频教程【20讲】

jQuery EasyUI入门视频教程【20讲】 jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。非职业讲师孙宇讲授,全...

Amamatthew
2014/09/28
1K
0
jquery easyui tab加载内容的几种方法

两者特点: href方式加载数据的特点: 被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段。 加载远程url时有遮罩效果,也就是“等待中……”效果,用户体...

文文1
2015/03/26
1K
0
EasyUI基础入门之Parser(解析器)

前言 JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid、面板、下拉组合等。用户可以组合使用这些组件,也可以单独使用其中一个。(使用的形式是以插件的方式提供的) EasyUI体系结构 ...

LCore
2014/07/11
2.4K
9
EasyUI 1.5.x Of Insdep Theme 1.0.0 RC1 美化主题大包已发布

关于 Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包,拥有百度编辑器、cropper、Highcharts、justgage、plupload等各类适应本主题的第三方插件美化补丁。并且各类常用Jquery插件正...

magicweng
2017/02/22
6.4K
24

没有更多内容

加载失败,请刷新页面

加载更多

Spring Security 实战干货:基于配置的接口角色访问控制

1. 前言 欢迎阅读 Spring Security 实战干货 系列文章 。对于受限的访问资源,并不是对所有认证通过的用户开放的。比如 A 用户的角色是会计,那么他就可以访问财务相关的资源。B 用户是人事,...

码农小胖哥
5分钟前
1
0
vue admin template 轻量级 后台管理系统基础模板 vuecli4 分环境打包 统一管理接口地址

本模板目的是为了能在创建项目的时候,减少不必要的时间浪费,例如api接口的封装、axios请求的封装以及基础布局等时间的浪费,故将基础功能提取出来作为公司内部的一个后台基础管理系统,为什...

羊皮卷
7分钟前
0
0
idea免费版注册码

https://www.jiweichengzhu.com/article/eb340e382d1d456c84a1d190db12755c

码农屌丝
7分钟前
0
0
跨越敏捷和devops的鸿沟

day2 更多的是理念思想和一些经验的分享吧 先来个鸡汤: 每个人都有自己的人生高山去攀越,技术人也有技术的高山,不是人生的全部,但又不可缺少的,我们要选对方向,找对方法去坚持去爬山...

ikki8776
7分钟前
2
0
MyEclipse教程:JPA开发(数据库)

1、配置JPA项目 JPA是类似于Hibernate的持久性规范,已成为Java EE 5规范的一部分。JPA使用Java 5注释来控制将普通Java类(POJO)映射到数据库表。 您可以通过创建任意受支持的基础项目类型(...

沫沫77
15分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部