UI界面开发框架jQuery EasyUI入门教程常见方法的调用

jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件，助您打造适合当今 络的应用程序。

easyui的每个组件都具有属性，方法和事件。用户可以轻松扩展它们。

属性

这些属性在jQuery.fn。{plugin} .defaults中定义。例如，对话框的属性在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”是指通过方法的真正参数。例如，为对话框组件扩展名为“ mymove”的方法，代码如下所示：

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

现在，您可以调用“ mymove”方法将对话框移至指定位置：

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

jQuery EasyUI入门

下载该库，并在页面上包含EasyUI CSS和JavaScript文件。

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"><script type="text/javascript" src="easyui/jquery.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>

从标记创建组件时，从1.3版开始，“data-options”属性可用于支持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)            }">

现隆重推出“软件国产化服务季”，拥有当下最流行，最全面的UI开发组件，折扣力度大到你尖叫！点击查看详情>>

好了，这就是今天的主要内容了，你学会了吗击查看更多文章教程欢迎在评论区留下你的意见和建议！

标签：