EasyUI is a collection of jQuery-based UI plug-ins that encapsulate a large amount of CSS and JS. Front-end developers only need to understand some simple HTML tags to use EasyUI to create a functional and beautiful UI interface.
All EasyUI components have properties, methods, and events, which are the three elements of components.
1. Attributes: Attributes describe more information about the component.
By configuring these properties, EasyUI can provide different display effects or functions. For example, the panel component has title property, iconCls property, and collapsed property.
All properties are defined in jQuery.fn.{plugin}.defaults. For example, the properties of the panel are defined in jQuery.fn.panel.defaults.
If we don't set the properties of the component when creating the component, then the default properties are used.
For example, the default property console.debug($.fn.panel.defaults) of the panel panel;
If you want to modify the default properties of the component, use $.fn.panel.defaults.closable = true.
As a special reminder, attributes are only valid when the component is created (initialized). After the component is created, if a certain attribute is modified, it will be invalid.
2. Method: A method is actually a function in a component.
We can call methods in components to meet our requirements.
If the first parameter passed in after writing the EasyUI component is a string, it represents a certain method on the execution component.
style $('selector').plugin('method', [parameter]), where:
selector is the jQuery object selector.
plugin is the name of the plugin.
method is an existing method of the corresponding plugin.
parameter is a parameter object, which can be an object, a string, etc.
For example: Now I want to hide a certain panel in the page, namely $("#mypanel").panel("close").
If the first parameter passed in after writing the EasyUI component is not a string, then the component is created, and the parameter passed in is a json string; if no parameter is passed in, the component is still created.
style ('selector').plugin() (no arguments passed), ('selector').plugin() (no arguments passed),(′selector′ ).plugin()(noparameterpassed),('selector').plugin({}) (json parameter passed).
Special reminder, if you try to call a non-component component method, an error will be reported directly.
3. Event: If something happens to the component, it will respond to us through the event.
For example: if we click on a node of the tree component, the onClick event will be triggered.
All events (callback functions) are also defined in jQuery.fn.{plugin}.defaults.
Special reminder, registration events cannot be registered in the traditional way of dom, but need to be registered through components.