Jquery easyuiJquery plug-in-easyUI property Summary

Source: Internet
Author: User

After finding a time to read the EasyUI plug-in, I felt very comfortable with the plug-in. I made a summary of the features of the Easy UI department.
For more information about jQuery EasyUI 1.0.5, click here.
Attributes are divided into CSS fragments and JS fragments.
CSS class definition:
1. div easyui-window generates a window paradigm.
Properties are as follows:
1) modal: whether to generate a modal window. True [Yes] false [No]
2) shadow: indicates whether the window shadow is displayed. True [predicted] false [not predicted]
2. div easyui-panel generates a panel.
Properties are as follows:
1) title: indicates that the title word is in the front of the Panel.
2) iconCls: indicates the 16x16 icon through a CSS class on the panel.
3) width: Set the panel width. Acquiesce to auto.
4) height: Set the Panel height. Acquiesce to auto.
5) left: Set the left margin of the Panel.
6) top: Set the top position of the Panel.
7) cls: Add a Class to the Panel.
8) headerCls: adds a Class to the panel header.
9) bodyCls: adds a Class to the panel content.
10) style: Add a specified paradigm to the Panel.
11) fit: When True, set the Panel size to fit its parent container. Default Value: false.
12) border: indicates the Panel boundary when defined. Acquiesce to true.
13) doSize: if it is set to True, the Panel will be repainted and the layout will be rebuilt. Acquiesce to true.
14) collapsible: the button indicating the foldable panel when defined. Default Value: false.
15) minimizable: Specifies the button that minimizes the Panel when defined. Default Value: false.
16) maximizable: Specifies the button for maximizing the Panel when defined. Default Value: false.
17) closable: indicates the button to close the Panel when defined. Default Value: false.
18) tools: Define the things bar. Each thing has two attributes: iconCls and handler.
19) collapsed: When defined, the Panel is in a tight state during initialization. Default Value: false.
20) minimized: The Panel is in the minimized state during initialization when it is defined. Default Value: false.
21) maximized: The Panel is maximized when it is defined. Default Value: false.
22) closed: The Panel is closed when it is defined. Default Value: false.
23) href: a url that loads remote data and predicts it is in the panel.
24) loadingMessage: indicates a message in the Panel when loading remote data. Acquiesce to Loading...
Transactions:
1) onLoad: It is obtained after the remote data is loaded.
2) onBeforeOpen: Get it before opening the panel.
3) onOpen: It is obtained when the Panel is opened.
4) onBeforeClose: It is obtained before the panel is closed.
5) onClose: It is obtained after the Panel is closed.
6) onBeforeDestroy: It is obtained before the panel is destroyed.
7) onDestroy: It is obtained after the Panel is destroyed.
8) onBeforeCollpase: obtained before the panel is tightened.
9) onCollapse: It is obtained after the Panel is tightened.
10) onBeforeExpand: obtained before panel expansion.
11) onExpand: obtained after the Panel is expanded.
12) onResize: It is obtained after the Panel is re-painted.
Width: the new external width.
Height: the new external height.
13) onMove: It is obtained when the Panel is moved.
Left: New Position on the left.
Top: New Position on the top.
14) onMaximize: It is obtained when the window is maximized.
15) onRestore: when the window is restored to the original clock header.
16) onMinimize: It is obtained when the window is minimized.
The essentials are as follows:
1) options: the options attribute is returned.
2) panel: return the panel object.
3) header: return the header object of the Panel.
4) body: return the panel subject object.
5) setTitle: Set the header title text.
6) open: When the forceOpen parameter is set to true, the onBeforeOpen callback function is bypassed when the Panel is opened.
7) close: When the forceClose parameter is set to true, the onBeforeClose callback function is bypassed when the Panel is closed.
8) destroy: When the forceDestroy parameter is set to true, the onBeforeDestroy callback function is bypassed when the Panel is destroyed.
9) refresh: When the href attribute is set, press F5 to load the remote data.
10) resize: Set the Panel size and layout. The options object contains the following attributes:
Width: the width of the new panel.
Height: the new panel height.
Left: left position of the new panel.
Top: the position at the top of the new panel.
11) move: move the Panel to a new position. The options object contains the following attributes:
Left: left position of the new panel.
Top: the position at the top of the new panel.
3. a easyui-linkbutton generates a link type button.
Properties are as follows:
1) disabled: disable this button when it is True. Default Value: false.
2) plain: When True, it indicates an ordinary result. Default Value: false.
Iv. input/textarea easyui-validatebox field generation verification.
Properties are as follows:
1) required: true [required] false [not required] default false
2) validType:
The length of a, length [a, B] is controlled between a and B.
B. email verification.
C. url verification collection address.
3) missingMessage: Alignment of the. Column data. 'Left', 'right', and 'center' can be used.
7) sortable: When true, this column can be sorted.
8) checkbox: When the value is true, the checkbox is allowed for this column.
Transactions:
1) onLoadSuccess: It is obtained when the remote data is loaded successfully.
2) onLoadError: It is obtained when remote data loading finds some errors.
3) onClickRow: when a user clicks a row, the parameters include:
RowIndex: the row that you click to start with 0.
RowData: records corresponding to the row to be clicked.
4) onDblClickRow: this parameter is obtained when you double-click a row. The parameters include:
RowIndex: the row that you click to start with 0.
RowData: records corresponding to the row to be clicked.
5) onSortColumn: this parameter is obtained when you sort a column. The parameters include:
Sort: name of the sorting field.
Order: Sorting field type.
6) onSelect: when the user selects a row, the parameters include:
RowIndex: the row that you click to start with 0.
RowData: records corresponding to the row to be clicked.
7) onUnselect: when the user cancels the selection of a row, the parameters include:
RowIndex: the row that you click to start with 0.
RowData: records corresponding to the row to be clicked.
The essentials are as follows:
1) options: return the selected object.
2) resize: re-adjust the size to generate the layout.
3) reload: load data from the beginning.
4) fixColumnSize: fixed column size.
5) loadData: loads local data, and the row in the past is deleted.
6) getSelected: return the records of the first selected row. If not selected, null is returned.
7) getSelections: returns all selected rows. If no records are selected, an empty array is returned.
8) clearSelections: clears the selection status of all options.
9) selectRow: select a row. The row starts from 0.
10) selectRecord: select a row by passing an ID value parameter.
11) unselectRow: deselect a row.
7. div easyui-tabs generates a tab container.
Properties are as follows:
1) width: Container width, automatic column width.
2) height: container height, automatic column height.
3) idSeed: this root id is derived from the tag panel DOM id attribute. Default 0
4) plain: When true, this Tab does not use the container background image for rendering. Default false
5) fit: When true, set the Tab size to conform to its parent container. Default false
6) border: When true, it indicates the Tab border.
7) scrollIncrement:
8) scrollDuration:
Transactions:
1) onLoad: When an ajax
The Tab panel is obtained when you need to load remote data. This parameter is similar to jQuery. ajax.
The 'success' function of has the same effect.
2) onSelect: It is obtained when you select a Tab panel.
3) onClose: It is obtained when the user closes a Tab panel.
The essentials are as follows:
1) resize: repaint the layout of the Tab container.
2) add: A new Tab panel is added. This option parameter is a configuration object. You can view the Tab Panel attributes for more information.
3) close: close the Tab. The title parameter indicates the object to be closed.
4) select: select a Tab.
5) exists: If the Tab panel exists, it indicates.
The Tab Panel attributes are as follows:
1) id: the DOM id attribute of the Tab panel.
2) text: the title text of the Tab panel.
3) content: content of the Tab.
4) href: a URL that loads remote content to fill the Tab panel.
5) cache: When the value is true, the cache Tab is effective after the href attribute is set. Default true
6) icon: Add a CSS class icon to indicate the title of the Tab panel.
7) closable: When true, the Tab Panel indicates that the button can be closed and you can click to close the Tab panel. Default false
8) selected: When true, this Tab is selected. Default false
9) width: panel width, automatic column width.
10) height: Panel height, automatic column height.
8. div menu-sep generates a menu separation line.
9. a easyui-splitbutton generates a menu column.
10. div easyui-accordion generates an accordion drop-down box. Responsible for self-panel
11. select easyui-combobox to generate a combined drop-down box.
Properties are as follows:
1) width: Container width, automatic column width.
2) listWidth: the width of the combination drop-down box.
3) listHeight: the height of the combination drop-down box.
4) valueField: bind the value Name of the basic data to the [value] in the combined drop-down box.
5) textField: bind the field name of the basic data to [text] in the combined drop-down box.
6) editable: When True, You can directly type text in the text field. Acquiesce to true.
7) url: a URL that loads list data remotely.
Transactions:
1) onLoadSuccess: It is obtained when the remote data is loaded successfully.
2) onLoadError: It is obtained when remote data loading finds some errors.
2) onSelect: It is obtained when you select a list option.
3) onChange: this parameter is obtained when the value of this field changes.
The essentials are as follows:
1) select: select a value from the drop-down list.
2) setValue: Set the specified value to this field. The 'param' parameter can be a string or a JS object. Note: The JS object contains two attributes: valueField and TextField.
3) getValue: Get the value of this field.
4) reload: requests remote list data from the beginning.
12. select easyui-combotree to generate a combined tree box.
Properties are as follows:
1) width: Container width, automatic column width.
2) treeWidth: the width of the tree drop-down box.
3) treeHeight: the height of the tree drop-down box.
4) url: a URL that loads tree data remotely.
Transactions:
1) onSelect: It is obtained when you select a tree node.
2) onChange: this parameter is obtained when the value of this field changes.
The essentials are as follows:
1) setValue: Set the specified value to this field. The 'param' parameter can be a tree node ID value or a JS object. Note: The JS object contains two attributes: id and text.
2) getValue: Get the value of this field.
3) reload: requests remote list data from the beginning.
1. body [div] easyui-layout generates a layout.
Properties are as follows:
1) title: the title of the Panel.
2) region: defines the position of the layout panel, including the following values: north, south, east, west, and center.
3) border: When True, it indicates the border of the layout panel. The default value is True.
4) split: When True, it indicates a support operator to change the Panel size. Default Value: false.
5) icon: An icon CSS class, indicating an icon in the panel header.
6) href: a URL to load data from a remote site.
1. div easyui-menu generates a menu.
Properties are as follows:
1) zIndex: Menu z-index paradigm. Note: Set the stacking sequence of elements in the z-index attribute.
2) left: left start position of the menu. Default 0.
3) top: the top position of the menu. Default 0.
4) href: indicates the URL of the difference in the current browser window when you click the menu item.
Transactions:
1) onShow: indicates the menu after obtaining it.
2) onHide: Hide the menu after obtaining it.
The essentials are as follows:
1) show: indicates a menu at a specified position. This location contains two parameters:
Left: The New left position.
Top: New top position.
2) hide: hides a menu.
15. a easyui-menubutton generates a menu button.
Properties are as follows:
1) disabled: disable this button when it is True. Default Value: false.
2) plain: When True, it indicates an ordinary result. Default Value: false.
3) menu: a selector name used to create a menu.
4) duration: When hovering over the button, define the consecutive prediction time of the menu, in milliseconds. Acquiesce 100.
1. input easyui-numberbox to generate a digital input box.
The option is as follows:
1) min: the minimum allowed value. When the input value is smaller than the minimum value, it indicates the minimum value.
2) max: the maximum allowed value. When the input value is greater than the maximum value, it indicates the maximum value.
3) precision: the exact number of decimal places after the delimiter. By default, the number of decimal places is appended.
JS definition:
1. window: generate a window.
2. Generate a tree structure.
3. The datagrid generates a table.
4. combobox generates a combined drop-down box.
5. combotree generates a combined tree box.
6. Generate a session box in. dialog. It acts as a self-window
Private attributes are as follows:
1) title: indicates the Topic Base of the session. Acquiesce to "New Dialog ".
2) collapsible: When True, the folding button can be predicted. Default Value: false.
3) minimizable: When True, the minimum button can be predicted. Default Value: false.
4) maximizable: specifies the maximum button when the value is True. Default Value: false.
5) resizable: When True, the size of the session box can be re-painted. Default Value: false.
6) toolbar: This item bar is placed at the top of the session box. Each item Bar contains attributes such as text, iconCls, disabled, and handler.
7) buttons: This button is placed at the bottom of the session box. Each button contains attributes such as text, iconCls, and handler.
7. draggable to generate a freely scalable block.
Properties are as follows:
1) handle: Select "# id" and drag it.
2) disabled: When True, stop dragging freely. Default Value: false.
3) edge: the width of the block to be dragged. Default 0.
4) axis: defines the axis when the drag block moves. The optional values are 'V' or 'H'. It is set to null when the orientation of 'V' and 'H' is exceeded.
Transactions:
1) onStartDrag: It is obtained when the target object starts to be dragged.
2) onDrag: Get it during dragging. If false is returned, it will not be dragged ).
3) onStopDrag: It is obtained when the target object is stopped and dragged.
8. linkbutton generates a chain button.
9. messager generates a message box.
The option is as follows:
1) OK: indicates the confirmation button text.
2) cancel: indicates the cancel button text.
The essentials are as follows:
1) show: a message box appears in the lower right corner of the screen. This option parameter is a configuration object, which includes:
ShowType: defines the mode predicted by the message box. Optional values include null, slide, fade, and show. Silent slide.
ShowSpeed: defines the time when the message box is completed. The default value is 600 milliseconds.
Width: defines the width of the message box. Acquiesce 250.
Height: defines the height of the message box. Acquiesce 100.
Msg: defines the text predicted by the message box.
Title: indicates the title text in the header of the message box.
Timeout: If it is defined as 0, the message box will not be closed automatically unless you manually close it. If it is defined as a non-zero value, the message box is automatically closed when the timeout ends. Unit: milliseconds.
2) alert: indicates a printing window. Its parameters are as follows:
Title: indicates the title in the header.
Msg: indicates the text content.
Icon: indicates the icon. Optional values: error, question, info, and warning.
Fn: triggers the callback function when the window is closed.
3) confirm: indicates a confirmation message box containing the OK and cancel buttons. Parameters include:
Title: indicates the title in the header.
Msg: indicates the text content.
Fn (B): callback function. If you click OK and return True, the function is processed. If you click other buttons, false is returned.
4) prompt: indicates a message box that contains the OK and Cancel buttons and prompts the user to enter some text. Parameters include:
Title: indicates the title in the header.
Msg: indicates the text content.
Fn (val): This callback function processes user input parameter values.
10. pagination generates a page number entry.
Properties are as follows:
1) total: the number of records set after page entries are created. 1.
2) pageSize: page size. 10.
3) pageNumber: the page number predicted after the page is created. 1.
4) pageList: You can change the page size. You can also change the default size of this attribute definition. Acquiesce [10, 20, 30, 50].
5) loading: defines whether the file is being loaded. Default Value: false.
6) buttons: Custom button. Each button contains two attributes:
IconCls: This CSS class indicates a background icon.
Handler: triggers a processing function when the button is clicked.
7) beforePageText: indicates a label text before the input component.
8) afterPageText: indicates a label text after the component is input.
9) displayMsg: indicates a page.
The essentials are as follows:
1) onSelectPage: It is obtained when you select a new page. The callback function includes two parameters:
PageNumber: the page number of the new page.
PageSize: the size of the new page.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.