jqueryui和easyui比较 jquery easyui 教程

转载

墨韵流香 2023-08-06 13:26:38

文章标签 jqueryui和easyui比较 jQuery easyUI 前端 JavaScript 文章分类 jQuery 前端开发

jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。

jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。

一.简介

1.什么是 jQuery EasyUI

jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。

easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。
HTML 网页的完整框架。
easyui 节省了开发产品的时间和规模。
easyui 非常简单，但是功能非常强大。

2.引用文件

easyui解压后的目录与文件

jqueryui和easyui比较 jquery easyui 教程_JavaScript

<!-- jquery核心库 -->
<script type="text/javascript" src="easyui/jquery.min.js"></script> 
<!-- easyui核心库 --> 
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- easyui核心UI文件 css -->  
<link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css"/>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
 <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- easyui图标 -->
<link href="easyui/themes/icon.css" rel="stylesheet" type="text/css"/>

1.demo：easyui普通网页演示页面代码库（可以从中参考很多组件的用法，是个非常好用的demo库。）

2.demo-mobile：easyui手机端网页演示页面代码库（可以从中参考很多组件的用法，是个非常好用的demo库。）

3.locale：easyui国际化资源文件库（需要用到国际化的时候就需要在页面中引用该包路径下的文件。）

4.plugins：easyui核心功能组件分解后的独立插件库（需要配合easyloader.js一起使用。）

5.src：easyui部分非核心组件的源代码库（核心大组件的源代码并未公布，比如datagrid、combo和tree等。）

6.themes：easyui的皮肤库（皮肤库中会收录所有网上能找得到的皮肤，所以大家不用再去自己乱搜了。）

7.changelog.txt：easyui版本官方更新日志文件[英文版]（该文件内容可以参考API当中的更新说明。）

8.easyloader.js：easyui组件加载器（easyui提供了2种组件加载方式，这就是其中一种，当使用该方式的时候可以不必引入jquery.easyui.min.js文件，具体用法请参看api文档。）

9.jquery.easyui.min.js：easyui的完整组件包文件（当使用了该文件的时候就可以不必引入easyloader.js文件，具体用法请参考官方demo或api文档。）

10.jquery.min.js：jQuery框架库文件，该版本的jQuery库提供的是最新的1.11.1版，能够支持IE6、7、8。

11.licence_gpl.txt：GNU开源协议文档。

12.readme.txt：官方的说明，主要告诉你你可以购买商业版来获得完整源代码以及官方的支持。

3.dialog示例

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>EasyUI入门——创建EasyUI的Dialog</title>
    <!-- jquery核心库 -->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
    <!-- easyui核心库 --> 
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <!-- easyui核心UI文件 css -->  
    <link href="../easyui/themes/default/easyui.css" rel="stylesheet" type="text/css"/>
    <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
    <!-- easyui图标 -->
    <link href="../easyui/themes/icon.css" rel="stylesheet" type="text/css"/>
    
  <script type="text/javascript">
      $(function(){
          //console.info($('#dd2'));
          /*使用JavaScript动态创建EasyUI的Dialog的步骤：
          1、定义一个div，并给div指定一个id
          2、使用Jquery选择器选中该div，然后调用dialog()方法就可以创建EasyUI的Dialog
          */
          $('#dd2').dialog();//使用默认的参数创建EasyUI的Dialog
          //使用自定义参数创建EasyUI的Dialog
          $('#dd3').dialog({
              title: '使用JavaScript创建的Dialog',
              width: 400,
              height: 200,
              closed: false,
              cache: false,
              modal: true
          });
      });
  </script>
  
  </head>
  
  <body>
      <!--使用纯html的方式创建创建EasyUI的Dialog的步骤：
      1、定义一个div
      2、将div的class样式属性设置成easyui-dialog，这样就可以将普通的div变成EasyUI的Dialog了
      -->
    <div  id="dd1" title="EasyUI Dialog" style="width: 500px;height: 300px;">
        Hello World!
    </div>
    <div id="dd2">Dialog Content</div>
    <div id="dd3">Dialog Content</div>
  </body>
</html>

4.布局介绍

easyUI布局容器包括东、西、南、北、中五个区域，其中中心面板是必须的，而东、西、南、北这四个面板是可选的，如果布局里面不需要东、西、南、北这四个面板，那么可以把相应的div删掉，另外，如果需要创建复杂的easyUI布局，那么可以通过嵌套东、西、南、北、中五个面板来实现。下面简单演示一下EasyUI布局。

4.1 通过div创建easyUI布局

easyUI的layout可以通过div来创建，使用div来创建easyUI的layout，那么div的html代码结构必须要如下的结构：

<!DOCTYPE html>
<html>
  <head>
    <title>通过div创建EasyUI的layout布局</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <!-- 引入JQuery -->
      <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
      <!-- 引入EasyUI -->
      <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
      <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
      <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
      <!-- 引入EasyUI的样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
      <!-- 引入EasyUI的图标样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
  </head>
  
  <body>
      <!--给div指定class属性指定easy的easyui-layout样式，这样就可以通过div创建easyui的layout -->
      <div class="easyui-layout" style="width:600px;height:400px;margin:0 auto;">
          <!-- 布局中如果不需要north这个面板，那么可以删掉这个div --> 
        <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
        <!-- 布局中如果不需要south这个面板，那么可以删掉这个div -->   
        <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
        <!-- 布局中如果不需要east这个面板，那么可以删掉这个div -->   
        <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
        <!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->  
        <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
        <!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 --> 
        <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>  
     </div>  
  </body>
</html>

4.2、通过body创建easyUI布局

<!DOCTYPE html>
<html>
  <head>
    <title>EasyUI布局</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <!-- 引入JQuery -->
      <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
      <!-- 引入EasyUI -->
      <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
      <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
      <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
      <!-- 引入EasyUI的样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
      <!-- 引入EasyUI的图标样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
  </head>
  <!--给body指定class属性指定easy的easyui-layout样式，这样就可以 使用body创建easyui的layout -->
  <body class="easyui-layout">
      <!-- 布局中如果不需要north这个面板，那么可以删掉这个div --> 
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <!-- 布局中如果不需要south这个面板，那么可以删掉这个div -->   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
    <!-- 布局中如果不需要east这个面板，那么可以删掉这个div -->   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
    <!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->  
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 --> 
    <div data-options="region:'center',title:'center title',href:'center.html'" style="padding:5px;"></div>  
 </body>  
  
</html>

4.3、使用嵌套easyui-layout来创建复杂布局

<!DOCTYPE html>
<html>
  <head>
    <title>EasyUI布局</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <!-- 引入JQuery -->
      <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
      <!-- 引入EasyUI -->
      <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
      <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
      <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
      <!-- 引入EasyUI的样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
      <!-- 引入EasyUI的图标样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
  </head>
  <!--给body指定class属性指定easy的easyui-layout样式，这样就可以 使用body创建easyui的layout -->
  <body class="easyui-layout">  
    <div data-options="region:'north',title:'North Title'" style="height:100px"></div>
    <!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->  
    <div data-options="region:'west',title:'West'" style="width:100px;"></div>
    <div data-options="region:'center'">
        <!-- 嵌套布局 --> 
        <div class="easyui-layout" data-options="fit:true">  
           <!-- 布局中如果不需要north这个面板，那么可以删掉这个div --> 
            <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
            <!-- 布局中如果不需要south这个面板，那么可以删掉这个div -->   
            <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
            <!-- 布局中如果不需要east这个面板，那么可以删掉这个div -->   
            <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
            <!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->  
            <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
            <!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 --> 
            <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>  
        </div>  
    </div>  
  </body>  
</html>

4.4、通过Javascript创建easyUI布局

<!DOCTYPE html>
<html>
  <head>
    <title>通过JavaScript来创建EasyUI布局</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <!-- 引入JQuery -->
      <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
      <!-- 引入EasyUI -->
      <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
      <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
      <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
      <!-- 引入EasyUI的样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
      <!-- 引入EasyUI的图标样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
      <script type="text/javascript">
          $(function(){
              //画面加载完成之后就调用layout()方法将body变成easy的layout
              $('#easyUILayoutBody').layout();   
          });
      </script>
  </head>
  <!--给body指定class属性指定easy的easyui-layout样式，这样就可以 使用body创建easyui的layout -->
  <body id="easyUILayoutBody">  
    <div data-options="region:'north',title:'North Title'" style="height:100px"></div>
    <!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->  
    <div data-options="region:'west',title:'West'" style="width:100px;"></div>
    <div data-options="region:'center',title:'center'"></div>  
  </body>  
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：mysql切割字符串遍历不用存储过程 mysql 数据切割

下一篇：android int 范围 android中include

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯