JQuery EasyUI

jQuery EasyUI 应用

为什么要使用JQuery EasyUI呢？

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解。

Easyui组件的两种加载方式。

1.使用Class加载

<div class="easyui-dialog" style="width: 400px;height: 200px;" data-options="title:'Hello EasyUI',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
this is content!!!
</div>

优点：使用的比较方便，只需要了解html和css知识即可。
缺点：耦合性比较高，因为class用在标签上面。

2.使用JavaScript加载

<div id="box">
    this is content!!!
</div>
//使用js方式加载Easyui
<script type="text/javascript">
    $('#box').dialog({
        title:"Hello EasyUI",
        width:400,
        height:200,
        collaosible:true
    })
</script>

优点：耦合性比较低，易于扩展。
缺点：使用起来比较麻烦，对开发人员的JavaScript知识有一定的要求。

操作EasyUI组件的语法

EasyUI的每个组件都有可能有 属性，事件，方法三种语法。那么怎么去修改属性，绑定事件，调用方法呢？

1.修改属性

class方式

<div class="easyui-window" data-options="title:'窗口标题'">

JavaScript方式

$("#myDiv").window({
title:'窗口标题'
});

2.绑定事件

$("#myDiv").window({
    onClick:function(){
        window.alert("点击事件触发");
    }
});

3.调用方法

var result=$("#myDiv").window("open");

Menu and Button(菜单按钮)

测菜单栏

通过标签创建侧菜单。

<div id="cd" data-toggle="topjui-sidemenu" data-option="data:data"></div>

使用JavaScript创建侧菜单，

<div id="cd" style="width: 310px;"></div>
$('#cd').isidemenu({
    data.data
});

LinkButton（按钮）

按钮组件使用超链接按钮创建。它使用一个普通的< a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。

创建按钮

使用标签创建按钮更简单。

<a id="btn" href="a" class="easyui-linkbutton" data-option="iconCls:'icon-search'">easyui</a>

也可以使用JavaScript创建按钮。

<a id="btn" href="#">easyui</a>
    $('#btn').linkbutton({
        iconCls:'icon-search'
    });

处理按钮的点击

点击按钮将会跳转另一个页面。

<a href="test.php" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

下面这个示例提示了一个警告。

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="javascript:alert('easyui')">easyui</a>

MenuButton（菜单按钮）

通过标签按钮和菜单按钮进行创建。

<a href="javascript:void(0)" id="mb" class="easyui-menubutton" data-options="menu:'#cd',iconCls:'icon-edit'">Edit</a>
<div id="cd" style="width:150px;">
    <div data-options="iconCls:'icon-undo'">Undo</div>
    <div data-options="iconCls:'icon-redo'">Redo</div>
    <div class="menu-sep"></div>
    <div>Cut</div>
    <div>Copy</div>
    <div>Paste</div>
    <div class="menu-sep"></div>
    <div data-options="iconCls:'icon-remove'">Delete</div>
    <div>Select All</div>
</div>;

使用JavaScript进行创建菜单按钮。

<a href="javascript:void(0)" id="cd">Edit</a>
<div id="mm" style="width: 155px">
...
</div>
$('#mb').menubutton({
    iconCls: 'icon-edit',
    menu: '#mm'
});

$('#cd').menubutton({
    iconCls: 'icon-edit',
    menu: '#mm'
});

SplitButton (分割按钮)

使用标签分割按钮

<a href="javascript:void(0)" id="sb" class="easyui-splitbutton" data-options="menu:'#mm',iconCls:'icon-ok'" onclick="javascript:alert('ok')">Ok</a>
<div id="mm" style="width:100px;">
    <div data-options="iconCls:'icon-ok'">Ok</div>
    <div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>

SwitchButton（开关按钮）

用在"form"表单中的开关按钮。按钮有2个状态：“开”和“关”，用户可以点击或轻敲来切换，标签状态是可定制的。

通过标签创建开关按钮。

<input class="easyui-switchbutton" checked="">
<input class="easyui-switchbutton" data-options="onText:'Yes',offText:'No'">

通过JavaScript创建开关按钮。

<a href="javascript:void(0)" id="sb" onclick="javascript:alert('ok')>Ok</a>
     <div id="mm" style="width:100px;">
         ...
     </div>