-
jQuery EasyUI Tutorial
jEasyUI application
- jEasyUI Create a CRUD application
- jEasyUI Create a CRUD data grid
- jEasyUI Form CRUD application
- jEasyUI Create an RSS reader
jEasyUI Drag and drop
- jEasyUI Basic drag and drop
- jEasyUI Create a drag-and-drop shopping cart
- jEasyUI Create a school curriculum
jEasyUI Menus and buttons
- jEasyUI Create a simple menu
- jEasyUI Create a link button
- jEasyUI Create a menu button
- jEasyUI Create a split button
jEasyUI layout
- jEasyUI Create a border layout
- jEasyUI Create a complex layout
- jEasyUI Creates a fold panel
- jEasyUI Create a tab page
- jEasyUI Dynamically add a tab
- jEasyUI Add the AutoPlay tab
- jEasyUI Create the XP style left panel
jEasyUI Data grid
- jEasyUI Convert HTML tables to data grids
- jEasyUI Get the selected row data
- jEasyUI Add the query function
- jEasyUI Add a toolbar
- jEasyUI Create complex toolbars
- jEasyUI Sets the frozen column
- jEasyUI Dynamically change columns
- jEasyUI Format the column
- jEasyUI Set sort
- jEasyUI Custom sorting
- jEasyUI Create a column combination
- jEasyUI Add a check box
- jEasyUI Custom tab
- jEasyUI Enable in-line editing
- jEasyUI Extension editor
- jEasyUI Column operation
- jEasyUI Merge Cells
- jEasyUI Create a custom view
- jEasyUI Create a footer summary
- jEasyUI Condition Sets the line background color
- jEasyUI Create an attribute grid
- jEasyUI The extended line shows the details
- jEasyUI Create a subgrid
- jEasyUI Display massive data
- jEasyUI Add a paging component
jEasyUI window
- jEasyUI Create a simple window
- jEasyUI Customize the Window Toolbar
- jEasyUI Window and layout
- jEasyUI Create a dialog box
- jEasyUI Customize the dialog box
jEasyUI Tree menu
- jEasyUI Use the markup to create a tree menu
- jEasyUI Create an asynchronous tree menu
- jEasyUI Tree menu to add nodes
- jEasyUI Create a tree menu with check boxes
- jEasyUI Tree menu drag and drop control
- jEasyUI The Tree menu loads the parent / child nodes
- jEasyUI Create the base tree grid
- jEasyUI Create a complex tree grid
- jEasyUI Dynamic loading of tree
- jEasyUI The tree grid adds pagination
- jEasyUI Tree-lazy lazy-loading node
jEasyUI Form
- jEasyUI Create an asynchronous submission form
- jEasyUI Form validation
- jEasyUI Create a tree drop-down box
- jEasyUI Format the drop-down box
- jEasyUI Filter down the data grid
jEasyUI Reference Manual
jQuery EasyUI window - the window layout
Layout component can be embedded in the window (window) in. We can create a complex layout window, you do not even need to write any js code. jquery-easyui framework to help us do the rendering in the background and adjust the size.
As an example, we create a window (window), which consists of two parts, one to the left of a place on the right. In the left window (window) we create a tree menu (tree), in the right window (window) we create a container tabs.
<Div class = "easyui-window" title = "Layout Window" icon = "icon-help" style = "width: 500px; height: 250px; padding: 5px; background: #fafafa;"> <Div class = "easyui-layout" fit = "true"> <Div region = "west" split = "true" style = "width: 120px;"> <Ul class = "easyui-tree"> <Li> <Span> Library </ span> <Ul> <Li> <span> easyui </ span> </ li> <Li> <span> Music </ span> </ li> <Li> <span> Picture </ span> </ li> <Li> <span> Database </ span> </ li> </ Ul> </ Li> </ Ul> </ Div> <Div region = "center" border = "false" border = "false"> <Div class = "easyui-tabs" fit = "true"> <Div title = "Home" style = "padding: 10px;"> jQuery easyui framework help you build your web page easily. </ Div> <Div title = "Contacts"> No contact data. </ Div> </ Div> </ Div> <Div region = "south" border = "false" style = "text-align: right; height: 30px; line-height: 30px;"> <a class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"> Ok </a> <a class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)"> Cancel </a> </ Div> </ Div> </ Div>
Look at the above code, we only use HTML tags, a complex layout window (window) will be displayed. This is the jquery-easyui framework, simple and powerful.