Home >Web Front-end >JS Tutorial >Jquery plug-in easyUI attribute summary_jquery

Jquery plug-in easyUI attribute summary_jquery

WBOY
WBOYOriginal
2016-05-16 18:11:361146browse

此属性列表请对照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.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn