JQuery EasyUI——基础

时间：2014-12-05 12:17:00 阅读：285 评论：0 收藏：0 [点我收藏+]

引用

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

JQuery EasyUI——基础

标签：style blog http io ar color os 使用 sp

原文地址：http://www.cnblogs.com/cmhunter/p/4146077.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

JQuery EasyUI——基础

目录

引用

控件

控件组成部分

使用方式

属性

修改属性

事件

方法

方法扩展