jQuery-easyUI的使用：基本组件的使用、使用组件的两种方式

HTML方式

<div id="mypanel" class="easyui-panel" minimizable=true maximizable=true collapsible=true closable="true"

title="我的panel" iconCls="icon-add" style="width:300px;height:300px" >

我是panel的内容

</div>

JS方式：推荐

$('#mypanel').panel({//使用什么组件就调用相应的名字方法

width:600 ,

height:300 ,

iconCls: 'icon-edit' ,

collapsible: true ,//组件都有配置项，使用json对象传进去

closable : true ,

content: '我是面板的内容'

});

$('#mywin').window({

content:'我是窗口的内容' ,

onOpen: function(){

//alert('窗口打开了');

}//注册事件

});



$('#btn').click(function(){

$('#mywin').window('open');//调用方法，组件名传入方法名，找不到就到父类找

});

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

$.messager.alert('提示信息','我是信息内容!','error');//提示信息

$.messager.confirm('标题内容' , '确认么?' ,function(r){//确认信息

if(r){

alert('点击确认');

} else {

alert('点击取消');

}

});

$.messager.prompt('提示信息' , '请输入内容:' ,function(val){//输入信息

alert(val);

});

$.messager.progress({//进度条

title: '我是进度条' ,

msg:'文本内容' ,

text: '正在加载..' ,

interval:1000

});

$.messager.show({//显示信息

title: '提示信息' ,

msg: '我是内容'

});

$('#dialog').dialog({//对话框

title:'我是对话框' ,

iconCls:'icon-ok' ,

toolbar: [//工具栏

{

text:'新增' ,

iconCls:'icon-add' ,

handler : function(){//工具栏按钮的处理函数

alert('新增了');

}

},

{

text:'修改',

iconCls:'icon-edit'

}

] ,

buttons:[//对话框最下面的按钮

{

text:'确定' ,

iconCls:'icon-ok' ,

handler : function(){

alert('确定啦');

}

},

{

text:'取消',

iconCls:'icon-cancel'

}

]

});