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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值