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'
                            }
                        ]
                    });