Home >Web Front-end >JS Tutorial >Jquery plug-in easyUI attribute summary_jquery
此属性列表请对照jQuery EasyUI 1.0.5,关于它的更多资讯请猛击这里。
属性分为CSS片段和JS片段。
CSS class definition:
1. div easyui-window Generate a window window style.
The attributes are as follows:
1) modal: Whether to generate a modal window. true[Yes] false[No]
shadow: Whether to display the window shadow. true[display] false[not display]
2. div easyui-panel Generate a panel.
The attributes are as follows:
1)title: The title text is displayed at the head of the panel.
2)iconCls: Display 16x16 icons on the panel through a CSS class.
3)width: Set the panel width. The default is auto.
4)height: Set the height of the panel. The default is auto.
5)left: Set the left margin of the panel.
6)top: Set the top position of the panel.
7)cls: Add a Class class to the panel.
8) headerCls: Add a Class class to the panel header.
9)bodyCls: Add a Class class to the panel content.
10)style: Add a specified style to the panel.
11)fit: When True, set the panel size to fit its parent container. Default is false.
12)border: Displays the panel border when defined. Default true.
13)doSize: If set to True, the panel will resize and rebuild the layout. Default true.
14) Collapsible: The button that displays the foldable panel when defined. Default is false.
15)minimizable: When defined, displays the button that minimizes the panel. Default is false.
16)maximizable: When defined, the button to maximize the panel is displayed. Default is false.
17)closable: When defined, the button to close the panel is displayed. Default is false.
18) tools: Custom toolbar, each tool contains two attributes: iconCls, handler.
19)collapsed: When defined, the panel is in a collapsed state when initialized. Default is false.
20)minimized: When defined, the panel is in a minimized state when initialized. Default is false.
21)maximized: When defined, the panel is in a maximized state when initialized. Default is false.
22)closed: When defined, the panel is closed when initialized. Default is false.
23)href: A url that loads remote data and displays it in the panel.
24) loadingMessage: When loading remote data, display a message in the panel. The default Loading...
events are as follows:
1)onLoad: activated when the remote data is loaded.
2) onBeforeOpen: Activates before the panel is opened.
3)onOpen: Activates when the panel is opened.
4) onBeforeClose: Activates before the panel is closed.
5)onClose: Activates when the panel is closed.
6) onBeforeDestroy: Activates before the panel is destroyed.
7)onDestroy: Activates when the panel is destroyed.
8) onBeforeCollpase: Activates before the panel shrinks.
onCollapse: Activates when the panel shrinks.
10)onBeforeExpand: Activates before the panel is expanded.
11)onExpand: Activates when the panel is expanded.
12)onResize: Activates when the panel is redrawn.
Width: The newly -built external width
Height: The newly built external height
13) Onmove: activation after the panel moves.
left: New position on the left.
top: New position at the top.
14)onMaximize: Activates when the window is maximized.
15)onRestore: Activate when the window is restored to its original size.
16)onMinimize: Activates when the window is minimized.
The method is as follows:
1) options: Returns the options attribute.
2) panel: Returns the panel object.
3)header: Returns the panel header object.
4)body: Returns the panel body object.
5)setTitle: Set the title text of the header.
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: Refresh the panel to load remote data after the href attribute is set.
10)resize: Set the size and layout of the panel. The options object contains the following properties:
width: New panel width.
Height: New panel height.
left: The new left position of the panel.
top: The new top position of the panel.
11)move: Move the panel to a new location.该options对象包含以下属性:
left:新的面板左侧位置。
top:新的面板顶部位置。
3、a easyui-linkbutton 生成链接类型的按钮。
属性如下:
1)disabled:当True时禁用该按钮。默认false。
2)plain:当True时显示一个普通效果。默认false。
4. input/textarea easyui-validatebox Generate field validation.
The attributes are as follows:
1)required:true[required] false[not required] default false
2)validType:
a, length[a,b] The field length is controlled in a to b between.
b. Email Verify Email.
C, URL to verify the network address.
3) missingMessage: This tool tip will pop up when the text is empty. The system has a default [English], and customization can override it.
4)invalidMessage: This tool tip pops up when the text content is invalid. The system has a default [English], which can be overridden by customization.
5. ul easyui-tree Generate a tree structure.
The attributes are as follows:
1)url: an address to obtain remote data.
2)animate: Whether to define animation effects when expanding or collapsing nodes. True [Yes] False [No] default FALSE
Node attributes are as follows:
1) Text: TEXT: Node's display text.
2)id: node ID, which is very important for loading remote data.
3)state: node status, 'open' or 'closed', the default is 'open'. When set to 'off', the node contains child nodes and the remote site loads them (without triggering a reload).
4)Attributes: Add custom attributes to the node.
5) children: Define some byte points in the form of array nodes.
The events are as follows:
1)onClick:
Activated when the user clicks a node, the node parameter contains the following attributes:
id: Node ID
text: Node text Node custom properties.
Target: DOM object clicked by the target.
2) OnLoadsuccess:
When the data is activated when the data is successfully loaded, this parameter is the same as the 'Success' function effect of jQuery.ajax.
3)onLoadError:
Activated when data loading fails, this parameter has the same effect as the 'error' function of jQuery.ajax.
The method is as follows:
1) Reload: Reload the tree data.
2)getSelected: Get the selected node and return it, if no node is selected, null will be returned.
3)collapse: Collapse a node, the target parameter is the DOM object of the node.
4)expand: Expand a node, the target parameter is the DOM object of the node.
5)append: Append some child nodes to a parent node.
param has two attributes:
parent: DOM object, append it as the parent node (them).
data: array, or node data.
6) Remove: Delete it and the sub -node below it, the target parameter is the DOM object of the node.
6. table easyui-datagrid Generate a table.
The attributes are as follows:
1)title: The title text of the DataGrid panel.
2)iconCls: A CSS class that will provide a background image as the title icon.
3) border: When true, display the border of the datagrid panel.
4) width: panel width, automatic column width.
5)height: Panel height, automatic column height.
6) Columns: The DataGrid column configuration object, check the column property to get more information.
frozenColumns: Same properties as Columns, but these columns will be fixed to the left.
8)striped: When true, the cell displays stripes. Default is false.
9) method: Request remote data through this method type. Default post.
10) nowrap: When true, the data is displayed on the same line. Default true.
11)idField: Indicate which field is an identification field.
12)url: A URL to obtain data from a remote site.
13)loadMsg: When loading data from the remote site, display a prompt message. The default is "Processing,please wait...". Custom coverage.
14)pagination: When true, a paging toolbar is displayed at the bottom of the DataGrid. Default is false.
15)rownumbers: Display row numbers when true. Default is false.
16)singleSelect: When true, only one row is currently selected. Default is false.
17)fit: When true, set the size to fit its parent container. Default is false.
18)pageNumber: The initialized page number when setting the paging attribute. The default starts from 1
19) pageSize: When setting the paging attribute, the initial page size. Default 10 lines
20) pageList: When setting the paging attribute, initialize the page size selection list. Default [10,20,30,40,50]
21)queryParams: When requesting remote data, additional parameters can also be sent.
22)sortName: Define which column can be sorted.
23)sortOrder: Define the sort order of columns, which can only be 'asc' or 'desc'. Default asc.
Column Properties are as follows:
1) Title: The title text of this column.
field: The field name corresponding to this column.
3)width: Column width.
rowspan Indicate how many rows are needed for the cell.
colspan: Indicates how many columns the cell requires.
6) Align: Explain the alignment method of COLUMN data. 'left', 'right', 'center' can all be used.
7)sortable: When true, the column is allowed to be sorted.
checkbox: When true, a checkbox is allowed to appear in this column.
The events are as follows:
1)onLoadSuccess: It is activated when the remote data is loaded successfully.
onLoadError: Activateed when some errors are found during remote data loading.
3) OnclickRow: When the user clicks to activate it, the parameters include:
Rowindex: The line index, starting from 0.
rowData: The corresponding record when the row is clicked.
4) ONDBLCLICKROW: When the user double -click to activate, the parameters include:
Rowindex: Click the line index, starting from 0.
rowData: The corresponding record when the row is clicked.
5) onsortcolumn: When the user is activated when sorting a column, the parameters include:
sort: sorting field name.
Order: Sorting field type.
6) onSelect: When the user selects a line to activate, the parameters include:
Rowindex: The line index, starting from 0.
rowData: The corresponding record when the row is clicked.
7) Onneselect: When the user cancels the selection of a row, the parameters include:
Rowindex: the line index, starting from 0.
rowData: The corresponding record when the row is clicked.
The method is as follows:
1) options: Return the selected object.
2)resize: Resize and generate layout.
3)reload: Reload data.
4)fixColumnSize: Fixed column size.
5)loadData: Load local data, past rows will be deleted.
6) getSelected: Returns the record of the first selected row, if not selected, returns null.
7)getSelections: Returns all selected rows. When no records are selected, an empty array will be returned.
8) clearSelections: Clear the selection status of all options.
9)selectRow: Select a row, the row index starts from 0.
10)selectRecord: Select a row by passing an ID value parameter.
11) unselectRow: Unselect a row.
7. div easyui-tabs Generate a tab container.
The attributes are as follows:
1)width: container width, automatic column width.
2)height: Container height, automatic column height.
3)idSeed: The root id is derived into the label panel DOM id attribute. Default 0
4)plain: When true, the Tab rendering does not use the container background image. Default false
5)fit: When true, set the Tab size to fit its parent container. Default false
6) border: When true, the Tab border is displayed.
7)scrollIncrement:
8)scrollDuration:
The events are as follows:
1)onLoad: When an ajax Tab panel needs to load remote data Activate. This parameter has the same effect as the 'success' function of jQuery.ajax.
onSelect: Activates when the user selects a Tab panel.
3)onClose: Activates when the user closes a Tab panel.
The method is as follows:
1)resize: Redraw the layout of the Tab container.
2) add: Add a new Tab panel. This option parameter is a configuration object. You can get more information by looking at the Tab panel properties.
3)close: Close the Tab panel. The title parameter displays the object you want to close.
4) select: Select a Tab panel.
5)exists: Displayed if the Tab panel exists.
The properties of the Tab panel are as follows:
1) id: The DOM id attribute of the Tab panel.
2)text: The title text of the Tab panel.
3)content: the content of the Tab panel.
4)href: A URL that loads remote content to fill the Tab panel.
can be cached when true. Default true
6)icon: Add a CSS class icon to display next to the title of the Tab panel.
7)closable: When true, the Tab panel will display a close button, which can be clicked to close.默认false
8)selected:当true时,该Tab面板将被选中。默认false
9)width:面板宽度,自动列宽。
10)height:面板高度,自动列高。
8、div menu-sep 生成一个菜单分隔线。
9、a easyui-splitbutton 生成一个菜单列。
10、div easyui-accordion 生成手风琴式下拉框。继承自panel
11. select easyui-combobox to generate a combo drop-down box.
The attributes are as follows:
1)width: container width, automatic column width.
2)listWidth: The width of the combo drop-down box.
3)listHeight: The height of the combo drop-down box.
4) valueField: Bind the value name of the basic data to the combo drop-down box [value].
5) textField: Bind the field name of the basic data to the combo drop-down box [text].
6) editable: When True, text can be typed directly in the text field. Default true.
7)url: A URL to load list data from remote.
The events are as follows:
1)onLoadSuccess: It is activated when the remote data is loaded successfully.
onLoadError: Activateed when some errors are found during remote data loading.
onSelect: Activates when the user selects a list option.
3)onChange: Activates when the value of this field changes.
The method is as follows:
1) Select: Select a value in 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 properties contained in the JS object correspond to the two properties valueField and TextField.
3)getValue: Get the value of this field.
4)reload: Request remote list data.
12. select easyui-combotree Generate a combination tree box.
The attributes 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 to load tree data from remote.
The events are as follows:
1)onSelect: activated when the user selects a tree node.
2)onChange: Activates when the value of this field changes.
The method is 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 attributes contained in the JS object correspond to the two attributes id and text.
2)getValue: Get the value of this field.
3)reload: Request remote list data.
13. body[div] easyui-layout Generate a layout.
The attributes are as follows:
1)title: The title text of the panel.
2)region:定义布局面板的位置,包含下列值:north,south, east, west, center。
3)border:当True时显示布局面板的边框。默认为True。
4)split: 当True时显示一个分割符以使用户改变面板的尺寸。默认false。
5)icon:一个图标CSS类,在面板头部显示一个图标。
6)href:一个URL,以从远程站点加载数据。
14、div easyui-menu 生成一个菜单。
属性如下:
1)zIndex: Menu z-index样式。注释:z-index 属性设置元素的堆叠顺序。
2)left:菜单左起位置。默认0。
3)top: 菜单顶部位置。默认0。
4)href:当点击菜单项时能在当前浏览器窗口显示不同的网址。
事件如下:
1)onShow:激活后显示菜单。
2)onHide:激活后隐藏菜单。
方法如下:
1)show:在指定的位置显示一个菜单。该位置上包含两个参数:
left:新的左起位置。
top:新的顶部位置。
2)hide:隐藏一个菜单。
15、a easyui-menubutton 生成一个菜单按钮。
属性如下:
1)disabled:当True时禁用该按钮。默认false。
2)plain:当True时显示一个普通效果。默认false。
3)menu:一个选择器名称,用来创建相应的菜单。
4)duration: 当悬停该按钮时,定义菜单的持续显示时间,单位为毫秒。默认100。
16、input easyui-numberbox 生成一个数字输入框。
选项如下:
1)min:允许的最小值。当输入值小于最小值时,显示最小值。
2)max:允许的最大值。当输入值大于最大值时,显示最大值。
3)precision:分隔符后能精确的小数点位数。整数默认会追加小数点位数。
JS定义:
1、 .window 生成一个window窗口。
2、 .tree 生成一个树形结构。
3、 .datagrid 生成一个表格。
4、 .combobox 生成一个组合下拉框。
5、 .combotree 生成一个组合树形框。
6、 .dialog 生成一个对话框。它继承自window
私有属性如下:
1)title:该对话框标题文本。默认"New Dialog"。
2)collapsible:当True时可显示折叠按钮。默认false。
3)minimizable:当True时可显示最小化按钮。默认false。
4)maximizable:当True时可显示最大化按钮。默认false。
5)resizable:当True时能重绘对话框大小。默认false。
6)toolbar:该工具栏置于对话框的顶部,每个工具栏包含:text, iconCls, disabled, handler等属性。
7)buttons:这个按钮置于对话框的底部,每个按钮包含:text, iconCls, handler等属性。
7、 .draggable 生成一个可自由拖动的块。
属性如下:
1)handle:选择"#id"进行拖动。
2)disabled:当True时停止自由拖动。默认false。
3)edge:开始拖动拖动块时的宽度。默认0。
4)axis:当拖动块移动时定义轴,可选值是'v'或者'h',当超出'v'和'h'的方位时将设置为null。
事件如下:
1)onStartDrag:当目标对象开始拖动时激活。
2)onDrag:在拖动期间激活。返回false将不会实际拖动它(的位置)。
3)onStopDrag:当目标对象停止拖动时激活。
8、 .linkbutton 生成一个链式按钮。
9. .messager Generate a message box.
The options are as follows:
1)ok: Display the OK button text.
2)cancel: Display the cancel button text.
The method is 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 of message box display. Optional values include: null, slide, fade, show. Default slide.
showSpeed: defines the message box display mode. time. Default is 600 milliseconds.
width: Define the width of the message box. Default is 250.
Height: Define the height of the message box. Default is 100.
Msg: Defines the text displayed in the message box.
Title: Display title text at the top of the message box panel.
timeout: If defined as 0, the message box will not automatically close unless the user closes it manually. If defined to a non-zero value, the message box will automatically close it at the end of the timeout. The unit is milliseconds.
2)alert: Display a print window. Its parameters are as follows:
title: Display title text in the header.
msg: Display text content.
icon: Display icon. Optional values: error, question, info, warning.
Fn: When the window is closed, triggers the callback function.
3)confirm: Display a confirmation message box containing OK and Cancel buttons. Parameters include:
Title: Display title text in the header.
msg: Display text content.
Fn (B): The callback function. When the user clicks the OK button and returns true, the function will be processed. Other buttons return false and not handle it.
4)prompt: Display a message box containing OK and Cancel buttons and prompt the user to enter some text. Parameters include:
title: Display title text in the header.
msg: Display text content.
Fn (Val): The back -to -regulating function processs the parameter value of the user input.
10. .pagination Generate a page number toolbar.
The attributes are as follows:
1) total: the number of records set when the paging bar is created. Default 1.
2)pageSize: page size. Default is 10.
3)pageNumber: The page number displayed when the paging is created. Default 1.
4)pageList: Users can change the size of the page. You can also change the default size defined by this property. Default [10,20,30,50].
5) loading: Define whether it is loading. Default is false.
6) buttons: Define custom buttons, each button contains two attributes:
iconCls: This CSS class will display a background icon.
Handler: Trigger a processing function when clicking the button.
7)beforePageText: Display a label text before the input component.
8)afterPageText: Display a label text after the input component.
9)displayMsg: Display a page information.
The method is as follows:
1) onSelectPage: Activate when the user selects a new page. The callback function includes two parameters:
pageNumber: the page number of the new page.
pageSize: The size of the new page.