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

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

        今天使用了一些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的效果:

       

     

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

    

    

           

       二,使用easyloader方式

                               如果觉得上面的引入文件的方式太烦琐了,我们可以使用easyloader的方式,动态加载我们要使用到的JS,CSS,或者模块。

                 

                   这时,我们只需引入:

<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/easyloader.js"></script>

              使用时:

             

                   

                      使用easyloader后,可以用ID创建对象,也可以用class,但是因为parser的存在,使用class的时候,无需再在load方法里面指定类型,因为class里面本身就包含了类型。

    

时间: 2024-10-06 03:28:41

EasyUI入门:如何引入及简单使用的相关文章

jQuery EasyUI 入门必看_jquery

学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 5.是否兼容低版本 IE 6.下载及运行 jQuery EasyUI 在正式了解 jQuery EasyUI 之前,我们先了解一下什么是 jQuery EasyUI.它的学习条件.市场上的同类产品.所支持的浏览器等.然后配置运行 jQuery EasyUI. 一.什么是 jQuery EasyUI jQuery EasyUI 是一

asp入门教程:ASP Request 简单介绍

asp入门教程:ASP Request 简单介绍,在ASP Request对象是用来获取信息的用户.它有两种方法form 与querystring的, 下面我们来看看request.from 这里是专门用于表单如. <form name=a action=? > <input name=b value='this is request.form' /> </form> asp代码如下. <% response.write request.from("b&

Windows 8风格应用开发入门 二十一 构建简单媒体播放器

<快速构建Windows 8风格应用20-MediaElement>博文中提到了如何使用MediaElement对象进行播放视频的简单功能,但是在实际应用中需要更复杂的功能,例如:控制视频播放的控件.全屏模式.进度条等等其他功能. 本篇博文中示例使用应用程序中包含的媒体文件,当然我们也可以通过网络或者本地[使用FileOpenPicker]进行加载某一媒体文件. MSDN中关于媒体播放器的示例代码下载地址:XAML media playback sample. 构建基本的MediaElemen

Swift 入门教程之:简单基本语法

一.基础语法:   Swift 是 iOS 和 OS X 应用开发的一门新语言.然而,如果你有 C 或者 Objective-C 开发经验的话,你会发现 Swift 的很多内容都是你熟悉的. Swift 的类型是在 C 和 Objective-C 的基础上提出的,Int是整型:Double和Float是浮点型:Bool是布尔型:String是字符串.Swift 还有两个有用的集合类型,Array和Dictionary,请参考集合类型. 就像 C 语言一样,Swift 使用变量来进行存储并通过变量

一起谈.NET技术,Visual Studio DSL 入门 3---创建一个简单的DSL模型

     从这节开始我们就开始我们的DSL之旅, 首先确保你已经安装了Visual Studio Sdk,并且使用的是Visual Studio 2008.我们先大概创建一个简单的DSL项目,通过这个项目来了解dsl的开发环境和流程. 1. 打开VS.NET ,新建--项目, 点击其它项目类型--扩展性(Extensibility). 这里列出来了vs.net扩展类型的项目,包括Addin,VSPackage,Dsl等项目类型,选择"Domain Specific Lan  guage Desi

Visual Studio DSL 入门 3---创建一个简单的DSL模型

从这节开始我们就开始我们的DSL之旅, 首先确保你已经安装了Visual Studio Sdk,并且使用的是Visual Studio 2008.我们先大概创建一个简单的DSL项目,通过这个项目来了解dsl的开发环境和流程. 1. 打开VS.NET ,新建--项目, 点击其它项目类型--扩展性(Extensibility). 这里列出来了vs.net扩展类型的项目,包括Addin,VSPackage,Dsl等项目类型,选择"Domain Specific Lan  guage Designer&

JavaScritp入门:编写一个简单的JavaScript程序

核心提示:编写第一个JavaScript程序,通过它可说明JavaScript的脚本是怎样被嵌入到HTML文档中的. 下面我们通过一个例子,编写第一个JavaScript程序. 通过它可说明JavaScript的脚本是怎样被嵌入到HTML文档中的.test1.html文档: 图1-1 程序运行的结果 说明: test1.html是HTML文档,其标识格式为标准的HTML格式; 如同HTML标识语言一样, JavaScript程序代码是一些可用字处理软件浏览的文本,它在描述页面的HTML相关区域出

Visual Studio DSL入门 3 --- 创建一个简单的DSL模型

1. 打开VS.NET ,新建--项目, 点击其它项目类型--扩展性(Extensibility). 这里列出来了vs.net扩展类型的项目,包括Addin,VSPackage,Dsl等项目类型,选择" Domain Specific Lan guage Designer",点击确定 2.接下来进入DSL创建向导,将会提供四种DSL模型模板提供我们选择,其实他们只是给我们提供了不同的Sample提供查看,也方便我们更方便的开始. Class Diagrams 由UML类图组成,包含类,

JMeter入门(2):一个简单实例

场景描述: 自己建立一个服务器端,接受参数:name和age,并将这些数据保存到数据库中: http://localhost:8080/Server/SaveServlet?name=xxx&age=xxx 我们通过JMeter对其进行压力测试: 目标:开1000个线程,每个线程循环1次,全部操作在3秒内完成: 结构如下: 结果如下: 最新内容请见作者的GitHub页:http://qaseven.github.io/