jQuery EasyUI学习笔记_1.easyui简介和简单应用

妖狐艹你老母 2022-09-17 06:20 181阅读 0赞

一、jQuery EasyUI简介

jQuery EasyUI框架帮助你更简单快捷地构建你的网页。

easyui是一个基于jQuery的用户接口插件集合

easyui为构建现代化的，互动的，javascript应用提供了必要的功能

使用easyui，不需要编写太多的javascript代码，只需要使用HTML定义自己的用户接口

对HTML5完全支持，而且具备良好的可扩展性

easyui为构建你的产品节省了很多时间和资源

easyui是一个轻量级的UI组件，简单易用但功能强大

二、jQuery EasyUI的简单应用

要在项目中引入jQuery EasyUI，有两种引入方式：  
第一种方式：引入总文件

<link type="text/css" rel="stylesheet" href="easyui/themes/default/easyui.css">
    <link type="text/css" rel="stylesheet" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

如何使用：  
通过js调用

第二种方式：使用载入器载入文件

<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="easyui/easyloader.js"></script>
    <script type="text/javascript">
      $(function(){
    //注意：这里的easyloader.load可以使用using代替
        easyloader.load('dialog', function(){
          $('#dd').dialog({
            title: 'My Dialog',
            width: 400,
            height: 200,
            closed: false,
            cache: false,
            modal: true
          });
        })
      });
    </script>
    <div id="dd">Dialog Content.</div>

以上两种方式都可以通过指定页面元素的class来使用相应的组件，代码如下：

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
         data-options="iconCls:'icon-save',resizable:true,modal:true">
      Dialog Content.
    </div>