jquery easyui 部分使用说明

最新推荐文章于 2025-11-26 18:40:17 发布
原创最新推荐文章于 2025-11-26 18:40:17 发布 · 247 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#jQuery #CSS #JavaScript #json #Excel #ViewUI
HTMLJS 专栏收录该内容
7 篇文章
订阅专栏
本文详细介绍了 jQuery EasyUI 框架中的多种组件及其属性，包括 Base 方法、Draggable、Droppable、Resizable 等交互组件，以及 Panel、Tabs、Accordion 等布局组件，并深入探讨了 Menu 和 Button 类组件及 Form 相关组件的使用方法。
jQuery easyui

每个方法jQuery easyui都具有一些属性，下面我们将一一介绍这些方法以及他们的属性。
先来看一些Base的方法。
EasyLoader

easyloader.base = '../';    // set the easyui base directory

easyloader.load('messager', function(){        // load the specified module

    $.messager.alert('Title', 'load ok');

});

上面代码就是EasyLoader（）方法的使用方法。

EasyLoader共有七个属性，分别是：

Modules，它的类型是object，它表示是一个预定义的模块，没有默认值。

Locales，它的类型是object，它表示是一个预定义的语言环境，没有默认值。

Base，它的类型是string，它说明是一个easyui的基础目录，必须以‘/’结束。该目录在被覆盖前自动设置为默认的easyloader.js。

Theme，它的类型是string，theme的名字就是定义的theme的目录，它的默认值为default。

Css，它的类型是boolean，当加载定义了该css文件的模块时就加载css文件，它的默认值是true。

Locale，它的类型是string，表示locale的名字，默认值为null。

Timeout，它的类型是number，如果发生了超时，它的单位是毫秒，它的默认值是2000。

 

Draggable

首先定义一个id为dd的div，

 

$('#dd').draggable(options);

这条语句就是draggable（）的使用方法。

 

Draggable（）共有九个属性，分别是：

Proxy，它的类型是string,function，

Revert，它的类型是boolean，该属性如果设置为true，当拖动停止后，该元素会回到起始的位置，默认值是false。

Cursor，它的类型是string，表示拖动时光标的css，它的默认值是move。

deltaX，它的类型是number，当拖动时元素只在X轴上移动，它的默认值是null。

deltaY，它的类型是number，当拖动时元素只在Y轴上移动，它的默认值是null。

Handle，它是类型是selector，表示该句柄开始拖动，默认值是null。

Disabled，它的类型是boolean，表示该元素停止拖动，默认值为false。

Edge，它的类型是number，表示该元素最小可拖动的范围，默认值为0。

Axis，它的类型是string，该元素在定义的轴上拖动 ，value为‘v’或者‘h’，当设置为null时就超过‘v’或者‘h’的范围。

 

Droppable

 

$('#dd').droppable(options);
       

Droppable（）只有一个属性：

Accept，类型是selector，用来确定哪些可拖动的元素会被接受，默认值为null。

 

 

Resizable

 

$('#rr').resizable(options);

 

Resizable（）有七个属性：

Disabled，类型是boolean，当设置为true时禁用大小，默认值是false。

Handles，类型是string，调整大小的方向，‘n’为北，‘e’为东，等等。默认值有n, e, s, w, ne, se, sw, nw, all。

minWidth，类型是number，缩放时的最小宽度，默认值为10。

minHeight，类型是number，缩放时的最小高度，默认值为10。

maxWidth，类型是number，缩放时的最大宽度，默认值为10。

maxHeight，类型是number，缩放时的最大高度，默认值为10。

Edge，类型是number，缩放时的最小值，默认值为5。

 

 

接下来我们看Layout方面的方法：

Panel

 

To create a panel

$('#p').panel(options);

 

To create a panel with custom tools

$('#p').panel({

  title: 'My Panel',

  tools: [{

    iconCls:'icon-new',

    handler:function(){alert('new')}

  },{

    iconCls:'icon-save'

    handler:function(){alert('save')}

  }]

});

 

To move panel to other position

$('#p').panel('move',{

  left:100,

  top:100

});

 

属性：

Title，类型是string，是显示在面板头部的标题文本，默认值为null。

Iconcls，类型是string，用一个css class显示在面板上的16x16的图标，默认值为null。

Width，类型是number，设置面板宽度，默认值是auto。

Height，类型是number，设置面板高度，默认值是auto。

Left，类型是number，设置面板左侧位置，默认值是null。

top，类型是number，设置面板顶部位置，默认值是null。

Cls，类型是string，给面板增加一个css class，默认值是null。

headerCls，类型是string，给面板头部增加一个css class，默认值是null。

bodyCls，类型是string，给面板body增加一个css class，默认值是null。

Style，类型是object，新增自定义样式的面板，默认值是{}。

Fit，类型是boolean，当设置为true时，它的大小不能超过它的父节点，默认值是false。

Border，类型是boolean，定义面板的边框，默认值为true。

doSize，类型是boolean，如果设置为true，创建面板时将调整而已大小，默认值是true。

Noheader，类型是boolean，当设置为true，不会创建面板头部，默认值是false。

Content，类型是string，面板主体内容，默认值是null。

Collapsible，类型是boolean，如果定义则显示可折叠按钮，默认值是false。

minimizable，类型是boolean，如果定义则显示最小值按钮，默认值是false。

maximizable，类型是boolean，如果定义则显示最大值按钮，默认值是false。

Closable，类型是boolean，如果定义则显示关闭按钮，默认值是false。

Tools，类型是array，自定义工具，每个工具包含两个属性：iconCls and handler，默认值是[]。

Collapsed，类型是boolean，如果定义，初始化时有collapsed效果。默认值是false。

minimized，类型是boolean，如果定义，面板初始化时为最大。默认值是false。

maximized，类型是boolean，如果定义，面板初始化时为最小。默认值是false。

Colsed，类型是boolean，如果定义，初始化时关闭，默认值是false。

Href，类型是string，一个远程的URL加载数据，然后显示在面板中，默认值为null。

Cache，类型是boolean，如果设置为ture，调用一个url链接，缓存面板的内容，默认值是ture。

loadingMessage，类型昌string，当加载远程数据，显示在面板的信息，默认值是Loading…。

 

Tabs

Markup

<div id="tt" style="width:500px;height:250px;">

    <div title="Tab1" style="padding:20px;display:none;">

        tab1

    </div>

    <div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">

        tab2

    </div>

    <div title="Tab3" icon="icon-reload" closable="true" 

 

style="padding:20px;display:none;">

        tab3

    </div>

</div>

 

To create a tabs container

$('#tt').tabs(options);

 

To add a tab panel:

$('#tt').tabs('add',{

    title:'New Tab',

    content:'Tab Body',

    closable:true

});

 

To get the selected tab panel and its tab object:

var pp = $('#tt').tabs('getSelected');

var tab = pp.panel('options').tab;    // the corresponding tab object

 

属性：

Width，类型是number，标签的宽度，默认值是auto。

Height，类型是number，标签的高度，默认值是auto。

Plain，类型是boolean，默认值是false。

Fit，类型是boolean，如果设置为true，它的容器大小不能超过父节点。

Border，类型是boolean，设置为true，显示边框，默认值是true。

scrollIncrement，类型是number，每次按下滚动按钮时滚动的像素数，默认值是100。

scrollDuration，类型是number，每次滚动最小的时间差，单位是毫秒，默认是400。

 

Accordion

 

Markup

<div id="aa" style="width:300px;height:200px;">

    <div title="Title1" icon="icon-save" style="overflow:auto;padding:10px;">

        <h3 style="color:#0099FF;">Accordion for jQuery</h3>

        <p>Accordion is a part of easyui framework for jQuery. It lets you define your 

 

accordion component on web page more easily.</p>

    </div>

    <div title="Title2" icon="icon-reload" selected="true" style="padding:10px;">

        content2

    </div>

    <div title="Title3">

        content3

    </div>

</div>

 

jQuery

$('#aa').accordion(options);

 

属性：

Width，类型是number，手风琴的高度，默认值是auto。

Height，类型是number，手风琴的宽度，默认值是auto。

Fit，类型是boolean，设为true，大小不能超过父节点，默认值是false。

Border，类型是boolean，显示边框，默认值是true。

Animate，类型是boolean，定义时显示动画效果展开或折叠面板，默认值是true。

 

Layout 

 

The layout panel must has one 'center' panel.

<div id="cc" style="width:600px;height:400px;">

    <div region="north" title="North Title" split="true" style="height:100px;"></div>

    <div region="south" title="South Title" split="true" style="height:100px;"></div>

    <div region="east" icon="icon-reload" title="East" split="true" 

 

style="width:100px;"></div>

    <div region="west" split="true" title="West" style="width:100px;"></div>

    <div region="center" title="center title" style="padding:5px;background:#eee;"></div>

</div>

 

jQuery

$('#cc').layout(options);

 

属性：

所有属性上定义<div/>标记，布局面板是由它创建的。

Title，类型是string，布局的标题文字，默认值是null。

Region，类型是string，定义布局面板的位置，该值是下列之一：north, south, east, west, center。

Border，类型是boolean，显示边框，默认值是true。

Split，类型是boolean，显示拆分条是用户可以定义大小，默认值为false。

Icon，类型是boolean，用一个icon css class，定义头部图标，默认值为null。

Href，类型是string，从一个URL加载数据，默认值是null。

 

第三类，Menu and Button

Menu 

 

Markup

<div id="mm" 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 icon="icon-save">Save</div>

        <div class="menu-sep"></div>

        <div>Exit</div>

</div>

 

jQuery

To create a menu:

$('#mm').menu(options);

 

To show a menu on special position:

$('#mm').menu('show', {

  left: 200,

  top: 100

});

 

属性：

zIndex，类型是number，增加z-index样式，默认值是110000。

Left，类型是number，菜单左侧位置，默认值是0。

Top，类型是number，菜单顶部位置，默认值是0。

Href，类型是string，显示不同的网页的网址，可以在当前浏览器窗口中显示当点击菜单项，默认值是null。

 

 

LinkButton

 

Markup

<a href="http://kakarik.blog.163.com/blog/#" id="btn" icon="icon-search">easyui</a>

 

jQuery

$('#btn').linkbutton(options);

 

属性：

Id，类型是string，该组件的ID,默认值是null。

Disabled，类型是boolean，禁用，默认值是false。

Plain，类型是boolean，显示一个普通的效果，默认值是false。

Text，类型是string，The button text，默认值是”

iconCls，类型是string，一个CSS类来显示一个在左16x16图标，默认值是null。

 

MenuButton

 

Markup

<a href="javascript:void(0)" id="mb" icon="icon-edit">Edit</a>

<div id="mm" style="width:150px;">

    <div icon="icon-undo">Undo</div>

    <div icon="icon-redo">Redo</div>

    <div class="menu-sep"></div>

    <div>Cut</div>

    <div>Copy</div>

    <div>Paste</div>

    <div class="menu-sep"></div>

    <div icon="icon-remove">Delete</div>

    <div>Select All</div>

</div>

 

jQuery

$('#mb').menubutton({

    menu: '#mm'

});

 

属性：

Disabled，类型是boolean，禁用，默认值是false。

Plain，类型是boolean，显示普通效果，默认值false。

Menu，类型是string，一个选择器来创建相应的菜单，默认值是null。

Duration，类型是number，当鼠标浮动时，定义显示菜单的时间，单位是毫秒，默认值是100.

 

SplitButton

 

Markup

<a href="javascript:void(0)" id="sb" icon="icon-ok" onclick="javascript:alert

 

('ok')">Ok</a>

 

<div id="mm" style="width:100px;">

    <div icon="icon-ok">Ok</div>

    <div icon="icon-cancel">Cancel</div>

</div>

 

jQuery

$('#sb').splitbutton({

    menu:'#mm'

});

 

属性：

Disabled，类型是boolean，禁用，默认值是false。

Poain，类型是blloean，显示普通效果，默认值是false。

Menu，类型是string，一个选择器来创建相应的菜单，默认值是null。

Duration，类型是number，当鼠标浮动时，定义显示菜单的时间，单位是毫秒，默认值是100.

 

 

来看下Form类

Form

 

Markup

<form id="ff" method="post">

...

</form>

 

jQuery

To make the form become ajax submit form

$('#ff').form({

        url:...,

        onSubmit: function(){

                // do some check

                // return false to prevent submit;

        },

        success:function(data){

                alert(data)

        }

});

 

 

To do a submit action

$('#ff').form('submit', {

        url:...,

        onSubmit: function(){

                // do some check

                // return false to prevent submit;

        },

        success:function(data){

                alert(data)

        }

});

 

属性：

url，类型是string，表单提交URL网址，默认值是null。

 

ComboBox 

 

Markup

<select id="cc" name="dept" style="width:200px;">

    <option value="aa">aitem1</option>

    <option>bitem2</option>

    <option>bitem3</option>

    <option>ditem4</option>

    <option>eitem5</option>

</select>

 

jQuery

$('#cc').combobox(options);

 

To create from remote data:

$('#cc').combobox({

    url:'combobox_data.json',

    valueField:'id',

    textField:'text'

});

 

The remote data format sample:

[{

    "id":1,

    "text":"text1"

},{

    "id":2,

    "text":"text2"

},{

    "id":3,

    "text":"text3",

    "selected":true

},{

    "id":4,

    "text":"text4"

},{

    "id":5,

    "text":"text5"

}]

 

属性：

Width，类型是number，元件宽度，默认值是auto。

listWidth，类型是number，下拉列表的宽度，默认值是null。

listHeight，类型是number，下拉列表的高度，默认值是null。

valueField，类型是stirng，基础数据值名称绑定到这个组合框，默认值是value。

textField，类型是string，基础数据字段名称绑定到这个组合框，默认值是text。

Editable，类型是boolean，用户可以直接进入并输入文本，默认值是ture。

Disabled，类型是boolean，禁用，默认值是false。

url，类型是string，从一个URL加载列表数据，默认值是null。

Data，类型是array，此列表要加载数据，默认值是null。

Required，类型是boolean，此区域需要输入，默认值是null。

missingMessage，类型是string，工具提示文本时出现的文本框是空的，默认值是This field is required.

 

 

ComboTree

 

Markup

<select id="cc" style="width:200px;"></select>

 

jQuery

$('#cc').combotree({

    url:'tree_data.json'

});

 

属性：

Width，类型是number，元件宽度，默认值是auto。

treeWidth，类型是number，tree list的宽度，默认值是null。

treeHeight，类型是number，tree list的高度，默认值是null。

url，类型是string，从一个URL加载列表数据，默认值是null。

Data，类型是array，此列表要加载数据，默认值是null。

Disabled，类型是boolean，禁用，默认值是false。

Required，类型是boolean，此区域需要输入，默认值是null。

missingMessage，类型是string，工具提示文本时出现的文本框是空的，默认值是This field is required.

 

 

NumberBox

 

Usage

Markup

<input type="text" id="nn"></input>

 

jQuery

$('#nn').numberbox(options);

 

属性：

Disabled，类型是boolean，禁用，默认值是false。

Min，类型是number，允许的最小值，默认值是null。

Max，类型是number，允许的最大值，默认值是null。

Precision，类型是number，最高精确到小数点后显示分隔符，默认值是0。

 

 

ValidateBox

 

Usage

Markup

<input id="vv" required="true" validType="email">

 

 

jQuery

$('#vv').validatebox(options)

 

Validate Rule

The validate rule is defined by using required and validType property, here are the rules 

 

already implemented:

       email: Match email regex rule.

       url: Match URL regex rule.

       length[0,100]: Between x and x characters allowed.

 

To custom validate rule, override $.fn.validatebox.defaults.rules that defines a validator 

 

function and invalid message. For example, to define a minLength valid type:

$.extend($.fn.validatebox.defaults.rules, {

    minLength: {

        validator: function(value, param){

            return value.length >= param[0];

        },

        message: 'Please enter at least {0} characters.'

    }

});

 

Now you can use the minLength validtype:

<input class="easyui-validatebox" validType="minLength[5]">

In the above code, we define a input box that should be inputed at least 5 characters.

 

属性：

Required，类型是boolean，此区域需要输入，默认值是null。

validType