彩票走势图

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

翻译|使用教程|编辑:鲍佳佳|2020-10-20 14:30:11.283|阅读 198 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

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

jQuery EasyUI v1.9.8正式版下载

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开发组件,折扣力度大到你尖叫!点击查看详情>>

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


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP