首页 > 代码库 > JQuery EasyUI——基础
JQuery EasyUI——基础
目录
demo目录是easyui使用示例；
- locale目录是国际化支持（语言）；
- src目录是部分easyui插件的源码；
- plugins目录是easyui使用的插件；
- themes目录包含多套easyui可使用的主题。
通常在项目中使用的话，demo目录、src目录可以不用，locale可以去除没用的js库，主题如果只使用默认的主题，也可以去除不用的主题。项目中，extends目录是项目中，基于easyui框架做的一些扩展。
引用
<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——基础
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。