EasyUI(1) -- 简介 & UI组件(layout & accordion & linkbutton & tabs & pagination)

EasyUI简介

1> 网址：www.jeasyui.com，下载并参考学习<>手册
2> 什么是jQuery-EasyUI

• 是一种第三方组织开发的一款基于jQuery的，简单易用的，功能强大的
  WEB[后台前端]JavaScript现成的组件库
• 注意：今天的EasyUI组件库的版本较高，需要高版本浏览器支持，
  中低版本浏览器会有不能正常执行的情况

3> JavaScript，AJAX，JSON，jQuery，EasyUI分别能解决什么问题

• JS：基于浏览器对web页面中的节点进行操作，比较麻烦
• jQuery：基于浏览器简化对web页面中的节点进行操作，做到了write less do more
• AJAX：基于浏览器与服务端进行局部刷新的异步通讯编程模式
• JSON：简化自定义对象的创建与AJAX数据交换轻量级文本
• EasyUI：快速基于现成的组件创建自已的web页面
• 组件：是指已经由第三方开源组织写好的，直接可以使用的功能界面，例如：form，layout，tree...
• 注意：我们学的都是零散的组件，项目中需要将其装配起来，方可构建完整的web页面，
  EasyUI只是众多前端WEB组件之一(EasyUI / EXT / GoogleUI)

4> jQuery-EasyUI快速入门----可折叠功能的面板

• 第一步：创建一个js-day05这么一个web工程
• 第二步：在WebRoot目录下创建00-base.html
• 第三步：在WebRoot目录下创建js和themes目录，导入官方文件( 参见<< jquery-easyui-1.3.6文件夹>> )
• 第四步：在00-base.html 文件的标签中引入如下文件

• 第五步：在00-base.html 文件的标签中创建如下
  标签

    
   
        内容

        内容

        内容

        内容

    

EasyUI组件:

一)Layout布局

1. 代码:

• 基本布局:

• 拆分嵌套:

2. js调用:

二)Accordion分类

1. 代码:

        
        
   
            
            
            
   
                内容1      
            
   
            
   
                内容2 
            
   
            
   
                内容3 
            
   
            
        

2. js调用:

三)LinkButton链接按钮

1. 代码:

        
            增加
        
        
            查询
        
        
            修改
        
        
            删除
        

2. js调用:

四)Tabs选项卡

1. 代码:

        
   
            
            
            
   
                tab1    
            
   
            
   
                tab2    
            
   
            
   
                tab3    
            
   
        

2. js调用:

五)Pagination分页框

1. 代码:

2. js调用: