JQuery easyUI: common method calls
Xiao Li 2020-11-26 13:12:55
jQuery EasyUI Committed to helping web It's easier for developers to create feature rich and beautiful UI Interface .jQuery EasyUI Provides the current fashion based on jQuery core and HTML5 Control for , Help you build applications for today's networks .

easyui Each component of has properties , Methods and events . Users can easily extend them .


These attributes are in jQuery.fn.{plugin} .defaults In the definition of . for example , The properties of the dialog box are in jQuery.fn.dialog.defaults In the definition of .


event ( Callback function ) stay jQuery.fn.{plugin} .defaults In the definition of .


Syntax for calling methods :$('selector').plugin('method',parameter);

Location :

  • selector yes jQuery Object selector .
  • plugin Is the plug-in name .
  • method Is the existing method corresponding to the plug-in .
  • parameter It's a parameter object , It can be the object , character string ,...

These methods are in jQuery.fn.{plugin} .methods In the definition of . Each method has two parameters :jq and param. The first parameter 'jq' It's necessary , It refers to the jQuery object . The second parameter “ param” It refers to passing through the real parameters of the method . for example , Expand the dialog box component name to “ mymove” Methods , The code is as follows :

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

Now? , You can call “ mymove” Method to move the dialog box to the specified location :

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

jQuery EasyUI introduction

Download the library , And include... On the page EasyUI CSS and JavaScript file .

<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>

contain EasyUI After the necessary documents , You can mark or use JavaScript Definition EasyUI Components . for example , To define panels with collapsible features , You can write the following HTML Code :

<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>

When you create a component from a tag , from 1.3 version ,“data-options” Properties can be used to support HTML5 Compatible property name . therefore , You can rewrite the above code to :

<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>

The following code shows how to create a binding “ onSelect” Event combo box .

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

Now Huidu grand launch “ Software localization service season ”, Have the most popular of the moment , The most comprehensive UI Development component ! Click below “ Learn more about ” You can view it !

本文为[Xiao Li]所创,转载请带上原文链接,感谢