A simple, practical and exquisite jquery-based UI Library

Original Website:Http://jquery-easyui.wikidot.com/tutorial Introduction to: http://www.cnblogs.com/taven/archive/2010/03/24/1693550.html It can completely replace the jquery UI library of extjs Intruduction

This tutorial aims to use easyui framework to demonstrate how to create your web page easily.

First of all, you need to include some JS and CSS file:

 

< Link REL = " Stylesheet " Type = " Text/CSS " Href = " ../Themes/default/easyui.css " >
< Script Type = " Text/JavaScript " SRC = " ../Jquery-1.4.2.min.js " > </ Script >
< Script Type = " Text/JavaScript " SRC = " .../Jquery. easyui. Min. js " > </ Script >

Easyui predefines some icon CSS class which can show background image (16x16). If you want to use it you need to include:

 <  Link     REL  =  "  Stylesheet "     Type  =  "  Text/CSS  "     Href  =  "  ../Themes/icon.css  "  >  Contents 
 
 

  
  
 
  
Menu and button 
   
 
    
Create a simple menu
 
    
Create a link button
 
    
Create a menu button
 
    
Create a split button
 
   
 
  
  

  
Layout 
   
 
    
Build border layout for Web pages
 
    
Complex layout on panel
 
    
Create accordion
 
    
Create tabs
 
    
Create XP style left panel
 
   
 
  
  
 
  
DataGrid 
   
 
    
Convert a HTML table to DataGrid
 
    
Add a pagination to DataGrid
 
    
Get selected row data from DataGrid
 
    
Add a toolbar to DataGrid
 
    
Frozen columns for DataGrid
 
    
Dynamic Change DataGrid Columns
 
    
Formatting DataGrid Columns
 
    
Add sorting to DataGrid
 
    
Create column groups in datagrid
 
    
Checkbox select on DataGrid
 
   
 
  
  
 
  
Window 
   
 
    
My first window
 
    
Custom window tools
 
    
Window and Layout
 
    
Create Dialog
 
   
 
  
  
 
  
Tree 
   
 
    
Create tree from Markup
 
    
Create async tree
 
    
Append nodes to tree
 
   
 
  
  

  
 form 
   
 
    
 submit a form with Ajax 
 
    
 Add combotree field to a form 
 
    
 form Validation