jQuery Easy UI 使用

最新推荐文章于 2024-03-05 21:07:08 发布

master_yao

最新推荐文章于 2024-03-05 21:07:08 发布

阅读量3k

点赞数 2

本文链接：https://blog.csdn.net/master_yao/article/details/50824670

版权

jQuery Easy UI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、首先在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文件

< 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("加载成功！");
});

master_yao

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery Easy UI 使用

jQuery Easy UI 使用 jQuery Easy UI jQuery Easy UI 搭建 jQuery Easy UI 第一步
复制链接

扫一扫

专栏目录

jQuery Easy UI 使用

一、首先在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">

<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">