界面开发基础教程jQuery EasyUI:常见方法调用
小黎 2020-11-26 13:12:55
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开发组件!点击下方“了解更多”即可查看!

版权声明
本文为[小黎]所创,转载请带上原文链接,感谢
https://www.seoxiehui.cn/article-267572-1.html
相似文章

2021-08-09