Using JqueryEasyUI 开发应用

Jquery Easy UI API：http://www.jeasyuicn.com/api/

官方介绍网站：http://www.jeasyui.com/

Pagination------表格分页

Override defaults with $.fn.pagination.defaults.

The pagination allows the user to navigate data by page. It supports configurable options for page navigation and page length choices. The user can add customize buttons on right of pagination to enhance its functionality.



节本分页参数：total，pageSize，pageNumber，pageList，buttons，showPageList，...

分页事件Events：onSelectPage，onBeforeRefresh，onRefresh，onChangePageSize

SearchBox-----搜索框

Override defaults with $.fn.searchbox.defaults.

The searchbox prompt the user to enter search value. It can combine a menu that allows the user to select different searching category. The searching action will be executed when the user press ENTER key or click the search button on the right of component.



ProgressBar----进度条

Override defaults with $.fn.progressbar.defaults.

The progressbar provides a feedback of showing progress of an long-running operation. The progress can be updated to let the user know that some operation is currently executing.



Tooltip---------气泡工具

Override defaults with $.fn.tooltip.defaults.

When a user move the mouse pointer over an element, a tooltip message window appears to display additional information. The tooltip content can contain any html elements that come from the page or via ajax.



Panel--------面板

Override defaults with $.fn.panel.defaults.

The panel is used as a container for other contents. It is the base component for building other components such as layout, tabs, accordion, etc. It also provides built-in collapsible, closable, maximizable and minimizable behavior and other customized behavior. Panels can be easily embedded into any position of web page.



Tabs-----选项卡

Override defaults with $.fn.tabs.defaults.

The tabs display a collection of panel. It shows only one tab panel at a time. Each tab panel has the header title and some mini button tools, including close button and other customized buttons.



Accordion---停靠（菜单）

Override defaults with $.fn.accordion.defaults.

The accordion allows you to provide multiple panels and display one at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.



Layout----（窗口）布局

Override defaults with $.fn.layout.defaults.

The layout is the container that has up to five regions: north, south, east, west and center. The center region panel is required but edge region panel is optional. Every edge region panel can be resized by dragging its border, they also can be collapsed by clicking on its collapsing trigger. The layout can be nested, thus users can build what complex layout he wants.



Menu--------菜单

Override defaults with $.fn.menu.defaults.

The menu is usually used for context menus. It is the base component for building other menu component such as menubutton and splitbutton. It also can be used for both navigation and executing commands.



LinkButton--------链接按钮

Override defaults with $.fn.linkbutton.defaults.

The linkbutton is used to create a hyperlink button. It is a representation of a normal <a> tag. It can display both an icon and text, or only the icon or text. The button width can dynamic and shrink/expand to fit its text labels.



MenuButton--------菜单按钮

Extend from $.fn.linkbutton.defaults. Override defaults with $.fn.menubutton.defaults.

The menubutton is the part of drop-down menu. It is associated with a linkbutton and menu. The linkbutton is displayed while the menu is hidden. When users click or move the mouse over the linkbutton, the menu will show to allow to click on it.



SplitButton---拆分按钮

Extend from $.fn.linkbutton.defaults. Override defaults with $.fn.splitbutton.defaults.

Simalar to the menubutton, the splitbutton is also associated with linkbutton and menu. The difference between menubutton and splitbutton is that the splitbutton is split into two parts. When moving mouse over the splitbutton, a 'split' line will display. The menu only display when moving mouse over the right part of splitbutton.



Form--------表单

Override defaults with $.fn.form.defaults.

The form provides various methods to perform actions with form fields such as ajax submit, load, clear, etc. When submiting the form, the 'validate' method can be called to check whether or not a form is valid.

基本使用方法：submit，load，clear，reset,validate

常用事件：onSubmit，success，onBeforeLoad，onLoadSuccess，onLoadError.

ValidateBox---验证框

Override defaults with $.fn.validatebox.defaults.

The validatebox is designed to validate the form input fields. If users enter invalid values, it will change the background color, display the alarm icon and a tooltip message. The validatebox can be integrated with form plugin and will prevent invalid fields from submission.



ComboBox---文字选框

Extend from $.fn.combo.defaults. Override defaults with $.fn.combobox.defaults.

The combobox display a editable text box and drop-down list, from which the user can select one or multiple values. The user can type text directly into the top of list, or select one or more of present values from the list.



ComboTree---树选框

Extend from $.fn.combo.defaults and $.fn.tree.defaults. Override defaults with $.fn.combotree.defaults.

The combotree combines the selection control with drop-down tree. It is similar to combobox but replace the list with tree component. The combotree supports a tree with tree-state checkboxes for convenient multiple selection.



ComboGrid---表格选框

Extend from $.fn.combo.defaults and $.fn.datagrid.defaults. Override defaults with $.fn.combogrid.defaults.

The combogrid combines a editable text box with drop-down datagrid panel, from which enables users to quickly find and select. The combogrid provides keyboard navigation support for selecting an item.



NumberBox--数字选框

Extend from $.fn.validatebox.defaults. Override defaults with $.fn.numberbox.defaults.

The numberbox is used to lets the user only input numberical values. It can convert an input element into different types of input such as numeric, percentage, currency, etc. More types of input can be defined depending on the 'formatter' and 'parser' function.



DateBox--日期选框

Extend from $.fn.combo.defaults. Override defaults with $.fn.datebox.defaults

The datebox combines a editable text box with drop-down calendar panel that allows the user to select a date. The entered string in the text box can be transformed to a valid date. The selected date can also be formatted as expected.



DateTimeBox--日期时间选框

Extend from $.fn.datebox.defaults, Override defaults with $.fn.datetimebox.defaults.

Similar to the datebox, the datetimebox allows the user to select a date and a time to display the date and time with specified format. It adds a timespinner component to the drop-down panel.



Calendar----日历

Override defaults with $.fn.calendar.defaults.

The calendar display one month calendar that allows the user to select dates and move to the next or previous month. By default, the first day of week is set to sunday. It can be changed by setting the value of 'firstDay' property.



NumberSpinner---数字加减

Extend from $.fn.spinner.defaults and $.fn.numberbox.defaults. Override defaults with $.fn.numberspinner.defaults.

The numberspinner is created based on spinner and numberbox. It can convert the inputed value into different types such as numeric, percentage, current, etc. It also allows the user to scroll to a desired value using the up/down spinner buttons.



TimeSpinner----时间加减

Extend from $.fn.spinner.defaults. Override defaults with $.fn.timespinner.defaults.

The timespinner is created based on spinner. It is same as numberspinner but display the time value. The timespinner allows the user to increase or decrease the time by clicking small spinner buttons on the right of component.



Slider-----滑动条

Override defaults with $.fn.slider.defaults.

The slider enables the user to choose a numeric value from a finite range. When moving the thumb control along the track, a tip will display to represent the current value. The user can customize slider by setting its properties.



Window---弹出窗

Extend from $.fn.panel.defaults. Override defaults with $.fn.window.defaults.

The window is a floated and draggable panel that can be used as an application window. By default a window can be moved, resized and closed. Its content can also be defined with either as static html or loaded dynamically via ajax.



Dialog---信息提示框

Extend from $.fn.window.defaults. Override defaults with $.fn.dialog.defaults.

The dialog is a special type of window, which can has a toolbar on top and a button bar on bottom. The dialog has only one close tool display on top right of header by default. Users can configure dialog behaviors to display other tools such as collapsible, minimizable, maximizable tool, etc.



Messager--消息控件

Override defaults with $.messager.defaults.

the messager provide different styles of message boxes, including alert, confirm, prompt, progress, etc. All the messager boxes are asynchronous. Users can use the callback function to do something after interacting with messager.



DataGrid---网格



PropertyGrid---属性网格



Tree-----树

Override defaults with $.fn.tree.defaults.

The tree displays hierarchical data in a tree structure in a web page. It provides users expand, collapse, drag and drop, editing and async loading functionality.



TreeGrid------树网格

Extend from $.fn.datagrid.defaults. Override defaults with $.fn.treegrid.defaults.

The treegrid is used to show hierarchical data in grid. It is based on datagrid and combines treeview and editable grid. The treegrid allows you to create customizable, async expandable rows and show hierarchical data in muliple columns.



具体详情见官网或API。