• 中国新一代百亿亿次超级计算机“天河三号”原型机首次亮相[组图] 2018-08-17
  • “动静”结合丨带你感受不一样的实爆训练场 2018-08-17
  • 侠客岛:拿什么拯救你,不学普通话的香港年轻人 2018-08-17
  • 机构改革是一场政治考验 2018-08-17
  • 简讯:韩国前总统朴槿惠一审被判24年有期徒刑 2018-08-16
  • 人民网评:走向大洋,呼唤现代化的中国海军 2018-08-16
  • 北京成立学生申诉处理委员会-地方新闻-时政频道-中工网 2018-08-16
  • 虽胜不足喜!鲁能一隐忧不治愈,恐高开低走 2018-08-16
  • 小鱼儿戴胡可帽子似贵妇 临睡之前表白妈妈嘴超甜 2018-08-16
  • “北京8分钟”融入人工智能 通过互联网与国人互动 2018-08-16
  • 四部门调整完善新能源汽车推广应用财政补贴政策 2018-08-15
  • 两男子在吉大美食城“百元找零”诈骗? 2018-08-12
  • 突破!郑鹏创中国队冬残奥会个人项目最好成绩 2018-08-12
  • 今年铜陵市将治理水土流失面积36平方公里 2018-08-11
  • 篮球投注技巧 2018-08-11
  • 【jeasyui教程】jQuery EasyUI 插件

    栏目: jeasyui 发布于: 2014-11-27 21:37:57

    jQuery EasyUI 插件


    jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的 datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)等等。 用户可以组合使用这些组件,也可以单独使用其中一个。

    插件列表

    Base(基?。?/h3>

    Layout(布局)

    Menu(菜单)与 Button(按钮)

    Form(表单)

    Window(窗口)

    DataGrid(数据网格)与 Tree(树)

    插件

    easyui 的每个组件都有属性、方法和事件。用户可以很容易地对这些组件进行扩展。

    属性

    属性是定义在 jQuery.fn.{plugin}.defaults。比如,dialog 的属性是定义在 jQuery.fn.dialog.defaults。

    事件

    事件(回调函数)也是定义在 jQuery.fn.{plugin}.defaults。

    方法

    调用方法的语法:$('selector').plugin('method', parameter);

    其中:

    • selector 是 jquery 对象选择器。
    • plugin 是插件名称。
    • method 是与插件相匹配的已存在方法。
    • parameter 是参数对象,可以是对象、字符串...

    方法是定义在 jQuery.fn.{plugin}.methods。每个方法有两个参数:jq 和 param。第一个参数 'jq' 是必需的,引用 jQuery 对象。第二个参数 'param' 引用方法传递的实际参数。比如,要扩展 dialog 组件的方法名为 'mymove' 的方法,代码如下:

    $.extend($.fn.dialog.methods, {
        mymove: function(jq, newposition){
    		return jq.each(function(){
    			$(this).dialog('move', newposition);
    		});
        }
    });
    

    现在您可以调用 'mymove' 方法来移动对话框(dialog)到指定的位置:

    $('#dd').dialog('mymove', {
        left: 200,
        top: 100
    });
    

    开始使用 jQuery EasyUI

    下载库,并在您的页面中引用 EasyUI CSS 和 JavaScript 文件。

    <link rel="stylesheet" type="text/css" rel="nofollow" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" rel="nofollow" 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>
    

    一旦您引用了 EasyUI 必要的文件,您就可以通过标记或者使用 JavaScript 来定义一个 EasyUI 组件。比如,要顶一个带有可折叠功能的面板,您需要编写如下 HTML 代码:

    <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
        title="My Panel" iconCls="icon-save" collapsible="true">
        The panel content
    </div>
    

    当通过标记创建组件,'data-options' 属性被用来支持自版本 1.3 以来 HTML5 兼容的属性名称。所以您可以如下重写上面的代码:

    <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
        title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
        The panel content
    </div>
    

    下面的代码演示了如何创建一个绑定 'onSelect' 事件的组合框。

    <input class="easyui-combobox" name="language"
        data-options="
        url:'combobox_data.json',
        valueField:'id',
        textField:'text',
        panelHeight:'auto',
        onSelect:function(record){
        alert(record.text)
        }">
    

    本文转载自:w3cschool
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:【jeasyui教程】jQuery EasyUI 插件
    IT技术书籍推荐:
    疯狂Android讲义(第3版)
    疯狂Android讲义(第3版)
    李刚 (作者)
    移动互联网已经成为当今世界发展最快、市场潜力最大、前景最诱人的业务,而Android则是移动互联网上市场占有率最高的平台。 本书是《疯狂Android讲义》的第3版,本书基于最新的Android 5,并采用了Google推荐的IDE:Android Studio作为开发工具,书中每个案例、每个截图都全面升级到Android 5。本书全面介绍了Android应用开发的相关知识,全书内容覆盖了Android用户界面编程、Android四大组件、Android资源访问、图形/图像处理、事件处理机制、Android输入/输出处理、音频/视频多媒体应用开发、OpenGL与3D应用开发、网络通信编程、Android平台的Web Service、传感器应用开发、GPS应用开发、整合第三方Map服务等。