jQuery Easy UI 使用
2016-03-08 09:51
896 查看
一、首先在WebRoot目录下创建js文件夹,导入压缩好的完整的easy-ui的js包 和css样式包。
二、在HTML的页面中导入easy ui 的js
1、一次导入所有js:(建议用这种)
<1>.引用jQuery的js文件
<script type="text/javascript" src="/js/jquery-easyui/jquery.min.js"></script>
< 2>.引用Easy UI的Js文件
<script type="text/javascript" src="/js/jquery-easyui/jquery.easyui.min.js"></script>
< 3>.导入Easy UI的而easyUI Css文件
<link rel="stylesheet" type="text/css" href="css/easyui.css">
< 5>.导入Easy UI的图标Css文件<link rel="stylesheet" type="text/css" href="css/icon.css">
< 6>.导入Easy UI的主题Css文件
<link rel="stylesheet" type="text/css" href="css/theme.css">
< 7>.引用Easy UI的国际化文件 以下为让它显示中文
<script type="text/javascript" src="/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
< 8>.页面上加上UTF-8编码
<meta charset="UTF-8">
2、导入单个js:<1>.引用jQuery的Js文件
<script type="text/javascript" src="../js/jquery-easyui/jquery.min.js"></script>
< 2>.引用easyLoader.js
< script type="text/javascript" src="../js/jquery-easyui/easyloader.js"></script>
<!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/jquery.min.js" charset="utf-8"></script> <!--(指定编码方式,防止出现乱码)引入EasyUI中使用的Jquery版本-->
<script language="JavaScript" type="text/javascript" src="../jquery-easyui/jquery.easyui.min.js" charset="utf-8"></script> <!--(指定编码方式,防止出现乱码)引入EasyUi文件--> <link rel="stylesheet" type="text/css" href="../jquery-easyui/themes/default/easyui.css"> <!--引入CSS样式-->
<link rel="stylesheet" type="text/css" href="../jquery-easyui/themes/icon.css"> <!--Icon引入--> <script language="JavaScript" type="text/javascript" src="../jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<!--汉化,<span style="font-family: Arial, Helvetica, sans-serif;">easyui-lang-zh_TW.js 为台湾版</span>--> <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 分析与使用
使用脚本库总要加载一大堆的样式表和脚本文件,在 easyui 中,除了可以使用通常的方式加载之外,还提供了使用 easyloader 加载的方式。这个组件主要是为了按需加载组件而诞生。什么情况下使用它呢?
你觉得一次性导入 easyui 的核心 min js 和 css 太大
你只用到 easyui 的其中几个组件
你想使用其中的一个组件,但是你又不知道这个组件依赖了那些组件。
如果你有以上三中情况,那么推荐你使用easyLoader。它可以帮你解决这些问题。
easyloader 用来帮助我们自动加载所需的脚本文件和样式文件,这样,我们只需要在页面中引用 jquery 脚本 和 easyloader 脚本,easyloader 就可以帮助我们分析模块的依赖关系,先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui开头的标签都转化成easyui的控件。
下面我们,以使用 messager 模块为例,使用 easyloader 加载所需的模块。
我们的页面可以简单的仅仅写入下面的内容。注意,并不需要通常的样式表和一大堆的脚本引用。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <a id="btnAlert" class="easyui-linkbutton">弹出提示框</a> <script src="scripts/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="scripts/easyloader.js" type="text/javascript"></script> <script type="text/javascript"> easyloader.locale = "zh_CN"; using("messager", function () { alert("加载成功!"); $("#btnAlert").click(function () { $.messager.alert('Warning', 'The warning message'); }); }); </script> </body> </html>
注意看!只有 jquery 的脚本和 easyloader 的脚本,完全没有一大堆的样式和其他脚本文件。
load 用来使用代码来说明需要加载的模块,这是在 easyloader 中定义的一个函数,函数的第一个参数为准备加载的模块名称,第二个参数为加载成功之后的回调函数。这里用来提示已经加载成功。
load 加载的模块有两种格式,即可以是一个字符串表示的单个模块,也可以是一个字符串的数组,同时加载多个模块。
//name有两种,一种是string ,一种是string array,这样一次可以加载多个plugin,都是调用add方法进行添加 if (typeof name == 'string') { add(name); } else { for (var i = 0; i < name.length; i++) { add(name[i]); } }
easyloader.load 还有一个别名 using 定义在 window 对象上,如下所示:
window.using = easyloader.load;
所以,加载的代码也可以这样写。
using("messager", function () { alert("加载成功!"); });
加载成功之后,我们就可以在代码中使用已经加载的模块了。
页面中还使用 class 说明了一个按钮,这里使用了 class="easyui-linkbutton",easyloader 还可以帮助我们解析元素中的特殊类名,直接就在页面中使用过的模块。
easyloader 会在它所在文件夹中,寻找 plugins 子文件夹中的脚本,和 themes 文件夹中的样式表。所以需要保证文件保存在正确的位置。
不过,easyloader 还提供了一个 base 属性,用来指定寻找插件和脚本的起点。
// jquery-easyui的根目录,在加载easyloader时,会自动根据你放置的位置而改变 base:'.',
除了 base , 还有几个重要的属性
base:'.',//该属性是为了加载js,记录文件夹路径的 theme:'default', //默认主题 css:true, locale:null,
比如,希望使用中文语言包,则可以如下使用。你会看到提示框的按钮中的文字已经从 Ok 转换为了 "确定"。
easyloader.locale = "zh_CN";
using("messager", function () { alert("加载成功!"); });
相关文章推荐
- 使用JQuery实现智能表单验证功能
- JQuery中操作Css样式的方法
- JQuery为元素添加样式
- jQuery图片轮播
- 基于jQuery的一个简单的图片查看器
- placeholder的兼容处理(jQuery下)
- jQuery-1.9.1源码分析系列(十六)ajax——响应数据处理和api整理
- jQuery-1.9.1源码分析系列(十六)ajax——ajax处理流程以及核心函数
- jQuery-1.9.1源码分析系列(十六)ajax——jsonp原理
- jQuery-1.9.1源码分析系列(十六)ajax——ajax框架
- jQuery-1.9.1源码分析系列(十五) 动画处理——缓动动画核心Tween
- jQuery-1.9.1源码分析系列(十五) 动画处理
- jQuery-1.9.1源码分析系列(十四) 一些jQuery工具
- jQuery-1.9.1源码分析系列(十三) 位置大小操作
- jQuery-1.9.1源码分析系列(十一) DOM操作续——克隆节点
- jQuery-1.9.1源码分析系列(十一) DOM操作
- jQuery-1.9.1源码分析系列(六) 延时对象应用——jQuery.ready
- jQuery-1.9.1源码分析系列(十) 事件系统——事件包装
- 十五个常用的jquery代码段【转】
- jQuery-1.9.1源码分析系列(十) 事件系统——事件委托