• 《寻梦环游记》《至爱梵高》 明年奥斯卡种子选手且看且珍惜 2018-06-23
  • 海南特区改革开放30年:闯出一片辽阔的海 2018-06-23
  • 黑龙江省近三年有400多名责任人因破坏营商环境被处理 2018-06-23
  • 右玉:锣鼓喧天庆盛世 万民欢腾闹元宵 2018-06-23
  • 【手绘H5】我们的领袖习近平 2018-06-23
  • 上市公司并购新三板企业升温 2018-06-23
  • 特朗普再与世界"为敌" 多国斥其关于耶路撒冷决定 2018-06-22
  • 严防“两节”期间“四风”反弹 持续保持高压态势 2018-06-22
  • 反转!华南理工大学否认向莱阳14岁神童发送考察函 2018-06-21
  • 中国出版集团公司总裁谭跃委员:唱响新时代的好声音 2018-06-21
  • 新華網評:分享經濟,別演成分享的“獨角戲” 2018-06-20
  • 红薯会越放越甜吗 如何保存红薯最科学? 2018-06-20
  • 猪肉创八年新低部分养殖户巨亏离场 行业加速洗牌 2018-06-19
  • 招商证券:创业板反弹压力逐渐显现 2018-06-19
  • “一拖二快三”足球比分直400余名应届大学毕业生成为部队“准警官” 2018-06-19
  • 【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服务等。