EasyUI is a collection of jQuery-based UI (user interface) plug-ins. This article introduces the creation method of the component, introduces the function of each attribute through the style, and lists all the plug-ins of EasyUI to help learners understand the component faster.
jQuery EasyUI provides a complete set of components for creating cross-browser web pages, including powerful datagrid (data grid), treegrid (tree form), panel (panel), combo (drop-down combination) and so on. Users can use these components in combination, or use one of them alone.
Component creation: EasyUI can create components through HTML or JavaScript;
1. The way HTML creates components
Style: <label class="easyui-component name" style="style" title="panel" iconCls="icon-ok" collapsible="true"></label>
class="easyui-component name" function: tell EasyUI to convert div into easyui component;
style function: set the width and height of the component and other styles;
Title, iconCls, collapsible component function: tell EasyUI how to create this component.
Creating EasyUI components using HTML is relatively simple.
2. The method of creating components with JS code
style:
<script type="text/javascript">
$(function(){
//获取p标签，把他编程EasyUI面板组件。
$("#p").panel({
//面板属性
title:"面板",
iconCls:"icon-no"
});
})
</script>
<div>
<h1>是你的面板</h1>
</div>
The attribute with the same name works the same way HTML creates components.
Below is the list of plugins for jQuery EasyUI.
Base
- Parser parser
- Easyloader loader
- Draggable draggable
- Droppable can be placed
- Resizable adjustable size
- Pagination
- Searchbox search box
- Progressbar progress bar
- Tooltip prompt box
Layout
- Panel panel
- Tabs Tabs/Tabs
- Accordion Accordion
- Layout layout
Menu (menu) and Button (button)
- menu menu
- Linkbutton link button
- Menubutton menu button
- Splitbutton split button
Form
- Form form
- Validatebox validation box
- Combo combination
- Combobox combo box
- Combotree combination tree
- Combogrid combination grid
- Numberbox number box
- Datebox date box
- Datetimebox date time box
- Calendar Calendar
- Spinner spinner
- Numberspinner Numeric spinner
- Timespinner time spinner
- Slider slider
Window
- Window window
- Dialog dialog box
- Messager message box
DataGrid (data grid) and Tree (tree)
- Datagrid data grid
- Propertygrid property grid
- Tree tree
- Treegrid tree grid