easyui

1.介绍

2.下载

3.web项目引入

">
">

弹出框代码

        dialog content.

基础布局代码

    

        
Select language:
        

            
Java
            
C#
            
VB
            
Erlang
        
    
    

    

image.png

基础布局代码

    

        

            Search:
        
        

            

                

                    ![](easyui/images/msn.gif)
                
                

                    

                        

                            Hi,I am easyui.
                        
                        

                        
                    
                
            
        
    

2.css

3.需要两张图片

说明

下载

使用步骤

定义一个带可折叠功能的面板

    
class 类，必须是easyui-panel
title 标题，任意
iconCls 标题前边的图标是否显示
collapsible 标题栏右边是否显示可伸缩按钮
data-options="," 可用于替换iconCls和collapsible属性
    iconCls:'icon-save' 替换iconCls属性 标题前边的图标是否显示
    collapsible:true 替换collapsible属性 标题栏右边是否显示可伸缩按钮
    closable:true 是否显示关闭按钮
    minimizable:true, 最小化按钮
    maximizable:true 最大化按钮
    
style 设置控件的宽高间距

定义一个组合框（下拉框）

class 类，必须是easyui-combobox
name  是起一个名字
data-options 请求后台URL
    id,text是json的数据

json数据
[{"id":1,"text":"java"},{"id":2,"text":"python"},{"id":3,"text":"js"}]  

可拖动的元素

    
    
title


class 指定拖动的类
data-options 
style 样式，设置宽高

可变大小的窗口

  

class 指定的类
data-options 设置属性的值
style 设置一些属性

分页组件

 

class 指定的类
data-options 
    total一共有多少条目
    pageSize 一页显示多少条目
style 样式

搜索框

function shuage(value,name){ 
alert(value+":"+name) 
} 

 
 
All News
 
Sports News
 
 

class="easyui-searchbox" 是搜索框
data-options
    searcher 是点击搜索按钮的回调方法
    prompt 是输入框中显示的提示内容
    menu 是下拉选项框

id="mm" 是下拉展示框的内容

进度条

class="easyui-progressbar" 是进度条
data-options
    value 进度值

弹出提示框

Hover me

class="easyui-tooltip"
    是鼠标悬浮的提示框
title
    是显示的内容

选项卡

   
    
   
        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    
    
   

布局

   
    
   
    
   
    
   
    
   
    
   
  

去掉style就会占满整个页面

按钮

easyui  

菜单按钮

Edit   
   
    
Undo
   
    
Redo
   
    
   
    
Cut
   
    
Copy
   
    
Paste
   
    
   
    
Delete
   
    
Select All
   
 

分割按钮菜单

Ok   
   
    
Ok
   
    
Cancel