JQuery EasyUI——基础

浏览数：25 / 时间：2015年06月09日

引用

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" 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>

注意：不同的版本文件的名称不相同，请匆直接复制。

Js和css文件说明：

easyui.css是easyui框架的主样式；
icon.css是easyui中用到的图标的样式；
jquery-1.7.2.min.js是easyui使用的基础；
jquery.easyui.min.js是easyui的核心javascript库；
easyui-lang-zh_CN.js是easyui对中文的国际化支持；
easyui.formatter.js和easyui.edit.js是项目中使用到的两个扩展js库。

控件

easyui库作为一个相对成熟的js前端框架，提供了非常丰富的UI控件，包括form表单控件、layout布局控件、窗口控件、gird数据控件等等。

控件组成部分

每一个easyui控件通常都是由属性（Properties）、事件（Events）和方法（Methods）这些组成部分。

控件自身用到的信息可以通过属性存储，控件可以利用某些属性（比如url）完成特定的操作；控件基于事件驱动，开发人员可以在控件初始化的时候，为控件绑定一些特定事件（比：form的onSubmit事件）；easyui为每个控件提供了操作控件相关内容的函数，每个函数对应特定的功能（比如：datagrid的options方法，可以获取datagrid控件的属性设置）。

使用方式

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="DialogDemo.aspx.cs" Inherits="EasyUIDemo._05_Windows.DialogDemo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        $(function () {
            $(‘#dd2‘).dialog({
                title: ‘My Dialog‘,
                width: 400,
                height: 200,
                closed: false,
                cache: false,
                href: ‘/02_Layout/LayoutDemo4.aspx‘,
                modal: true
            });
            $(‘#dd2‘).dialog(‘refresh‘, ‘/02_Layout/LayoutDemo4.aspx‘);
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <%--通过标签创建窗口--%>
    <div id="Div1" class="easyui-dialog" title="My Dialog" style="width: 500px; height: 600px;"
        iconCls="icon-save" resizable=true modal=true>
        Dialog Content.    
    </div>
    <%--通过标签创建窗口的data-options属性--%>
    <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>
    <%--通过Javascript创建窗口。--%>
    <div id="dd2">Dialog Content.</div>  

</asp:Content>

属性

所有的属性都定义在jQuery.fn.{plugin}.defaults里面。例如，对话框属性定义在jQuery.fn.dialog.defaults里面。

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="TooltipDemo.aspx.cs" Inherits="EasyUIDemo._01_Base.TooltipDemo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    
    <script type="text/javascript">
        $(function () {
            //tooltip是1.3.3新插件，tooltip：当鼠标移动到一个元素上时显示一个弹出消息框。
            $(‘#dd‘).tooltip({ 
                position: ‘right‘,     //属性：position
                content: ‘<span style="color:#fff">This is the tooltip message.</span>‘, //属性：content
                onShow: function () {   //事件：onShow
                   $(this).tooltip(‘tip‘).css({ backgroundColor: ‘#666‘, borderColor: ‘#666‘ });  
               }
            });
        });
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <a id="dd" href="#">Click here</a>
    <a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
</asp:Content>

修改属性

Easyui中控件初始化时，所有的初始化信息（包括属性的值、事件对应调用函数）都存储在一个javascript对象中，基本上所有的控件都提供了一个方法“options”，通过这个方法可以获取到这个对象。下面的例子是修改datagrid控件的url属性：

var options = $(“#datagrid”).datagrid(“options”);

options.url = “targetUrl”;

说明：easyui控件的属性都可以作为options的属性来操作，达到修改的目的，特别说明，对datagrid控件的url属性的修改会触发一次datagrid的远程调用。

事件

所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面。

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="TooltipDemo.aspx.cs" Inherits="EasyUIDemo._01_Base.TooltipDemo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    
    <script type="text/javascript">
        $(function () {
            //tooltip是1.3.3新插件，tooltip：当鼠标移动到一个元素上时显示一个弹出消息框。
            $(‘#dd‘).tooltip({ 
                position: ‘right‘,     //属性：position
                content: ‘<span style="color:#fff">This is the tooltip message.</span>‘, //属性：content
                onShow: function () {   //事件：onShow
                   $(this).tooltip(‘tip‘).css({ backgroundColor: ‘#666‘, borderColor: ‘#666‘ });  
               }
            });               });      
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <a id="dd" href="#">Click here</a>
    <a id="dd2" href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
</asp:Content>

方法

调用方法的语法：$(‘selector‘).plugin(‘method‘, parameter);

解释：

selector 是jQery对象选择器。
plugin 是插件的名称。
method 是相应插件现有的方法。
parameter 是参数对象，可以是一个对象、字符串等。

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="MenuDemo.aspx.cs" Inherits="EasyUIDemo._03_MenuAndButton.MenuDemo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        $(function () {
            $(‘#mm‘).menu(‘show‘, {  //方法：selector:#mm, plugin:menu, method:show, parameter:{left,top,onClick}
                left: 200,
                top: 100,
                onClick: function (item) {
                    alert("hello");
                }
            });
        });
        function ShowMenu(){
            $(‘#mm‘).menu(‘show‘,{    //方法：selector:#mm, plugin:menu, method:show, parameter:{left,top,onClick}
                left: 200,
                top: 100,
                onClick: function (item) {
                    alert("hello");
                }
            });
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div><a href="javascript:;" ondblclick="ShowMenu()">右键菜单</a></div>
    <div id="mm" class="easyui-menu" style="width: 120px;">
        <div>New</div>
        <div>
            <span>Open</span>
            <div style="width: 150px;">
                <div><b>Word</b></div>
                <div>Excel</div>
                <div>PowerPoint</div>
            </div>
        </div>
        <div data-options="iconCls:‘icon-save‘">Save</div>
        <div class="menu-sep"></div>
        <div>Exit</div>
    </div>
</asp:Content>

方法扩展

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="DialogExtensionDemo.aspx.cs" Inherits="EasyUIDemo._07_Extension.DialogExtensionDemo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        $(function () {
            $(‘#dd2‘).dialog({
                title: ‘My Dialog‘,
                width: 400,
                height: 200,
                closed: false,
                cache: false,
                //href: ‘/02_Layout/LayoutDemo4.aspx‘,
                modal: true
            });

            $.extend($.fn.dialog.methods, {                 //为dialog控件扩展新的方法mymove
                mymove: function (jq, newposition) {
                    return jq.each(function () {
                        $(this).dialog(‘move‘, newposition);
                    });
                }
            });
        });
        

        function ChangeSize() {
            $(‘#dd2‘).dialog(‘mymove‘, {           //调用新扩展的方法mymove
                left: 300,
                top: 100
            });
        }

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <%--通过Javascript创建窗口。--%>
    <div id="dd2"><a href="javascript:;" onclick="ChangeSize();">改变位置</a></div>  
    
</asp:Content>