专题3：jquery easyUI摸底

Parser

（解析器：将 easyUI定义的class翻译成对应的Html代码，然后浏览器对其渲染，框架自动调用，一般用不上）

    $.parser.parse();       // parse all the page  
    $.parser.parse('#cc');  // parse the specified node  

浏览器只认识html、css、js， easyUI就像一个中间件，根据功能将它们封装

Draggable & Droppable & Resizable

（可拖拽 & 可放置 & 可缩放：使元素具有 ‘可拖拽的能力’ 或 ’可放置拖拽元素的能力‘ 或 ’可改变大小的能力‘）

    $('#dd').draggable({  
        handle:'#title'  
    });  

    $('#dd').droppable({               // 当draggable元素 revert=true 时，
        accept:'#d1,#d3'               // 元素可拖拽，但不可改变位置，此时与 droppable 配合使用
    });  

    $('#rr').resizable({  
        maxWidth:800,  
        maxHeight:600  
    });  

使元素具有某种能力，是改变元素的行为，尽量使用js来实现

Pagination

（分页导航：根据 total、pageSize 和 onSelectPage 按页导航数据）

定义一个分页控件，尽量用html来实现

SearchBox

（搜索框：根据 ‘选择的分类’ 和 ‘输入的关键字’ 筛选数据）

      
      
      
    
  
        
All News
  
        
Sports News
  
    
  

用html定义搜索框，用js定义搜索算法，然后通过属性指定搜索算法

ProgressBar

（进度条：用图形对进度进行直观的描述）

用html定义进度条，用ajax从服务端获取 ‘进度值’，然后用js将值设置到进度条上

Panel & Tabs & Accordion

（面板 & 标签页 & 手风琴：容器元素，‘单一容器’、‘多容器-水平切换’、‘多容器-垂直切换’）

    
  
        
panel content.
  
        
panel content.
  
    
  

    
  
        
  
            tab1  
        
  
        
  
            tab2  
        
  
        
  
            tab3  
        
  
    
  

    
  
        
  
            
Accordion for jQuery
  
            
Accordion is a part of easyui framework for jQuery.   
            It lets you define your accordion component on web page more easily.
  
        
  
        
  
            content2  
        
  
        
  
            content3  
        
  
    
  

用html定义这些容器，容器的内容可用html静态定义，也可用js动态获取

LinkButton

（按钮：可以放置 ‘图片’ 和 ‘文字’ 的按钮）

    easyui

用html定义，通过扩展css能够增加按钮图标

Menu & MenuButton & SplitButton

（菜单 & 绑定菜单的按钮：展现树形结构）

        // 用div描述 树形结构
    
New
  
    
  
        Open  
        
  
            
Word
  
            
Excel
  
            
PowerPoint
  
        
  
    
  
    
Save
  
    
  
    
Exit
  

Edit     // 按钮指向一个它要绑定的menu
  
    
Undo
  
    
Redo
  
    
  
    
Cut
  
    
Copy
  
    
Paste
  
    
  
    
Delete
  
    
Select All
  

    Ok  
    
  
        
Ok
  
        
Cancel
  
    
  

用html定义好菜单和按钮，MenuButton和SplitButton的唯一区别是热区不同

ComboBox & ComboTree

（单选组合框 & 多选组合框：可填写、可选择，将两种输入方式结合到一起的控件）

                // 服务端返回Json格式的数据

                   // 设置 '支持多选'

用html定义组合框，服务端必须返回Json格式的数据

DateBox & DateTimeBox & Calendar

（日期时间控件：可选择日期时间、展示日期）

用html定义日期控件

NumberSpinner & TimeSpinner &Slider

（微调器：数字微调、时间微调、范围微调）

用html定义微调器

Window & Dialog & Messager

（窗口：普通窗口、对话框、消息框）

    Window Content

    Dialog Content.

function show1(){
	$.messager.show({
		title:'My Title',
		msg:'Message will be closed after 4 seconds.',
		showType:'show'
	});
}
function show2(){
	$.messager.show({
		title:'My Title',
		msg:'Message will be closed after 5 seconds.',
		timeout:5000,
		showType:'slide'
	});
}
function show3(){
	$.messager.show({
		title:'My Title',
		msg:'Message never be closed.',
		timeout:0,
		showType:'fade'
	});
}
function show4(){
	var win = $.messager.progress({
		title:'Please waiting',
		msg:'Loading data...'
	});
	setTimeout(function(){
		$.messager.progress('close');
	},5000)
}
function alert1(){
	$.messager.alert('My Title','Here is a message!');
}
function alert2(){
	$.messager.alert('My Title','Here is a error message!','error');
}
function alert3(){
	$.messager.alert('My Title','Here is a info message!','info');
}
function alert4(){
	$.messager.alert('My Title','Here is a question message!','question');
}
function alert5(){
	$.messager.alert('My Title','Here is a warning message!','warning');
}
function confirm1(){
	$.messager.confirm('My Title', 'Are you confirm this?', function(r){
		if (r){
			alert('confirmed:'+r);
			location.href = 'http://www.google.com';
		}
	});
}
function prompt1(){
	$.messager.prompt('My Title', 'Please type something', function(r){
		if (r){
			alert('you type:'+r);
		}
	});
}

用html定义窗口，用js调用消息框

Tree

（树：展现树形结构的数据）

                                  // 静态加载
    
  
        Folder  
        
  
            
  
                Sub Folder 1  
                
  
                    
  
                        File 11  
                    
  
                    
  
                        File 12  
                    
  
                    
  
                        File 13  
                    
  
                
  
            
  
            
  
                File 2  
            
  
            
  
                File 3  
            
  
        
  
    
  
    
  
        File21  
    
  

           // 异步Ajax加载

尽量用html定义窗口