EasyUI的简单使用

    WebRoot┐
           ├js┐
               ├easyUI┐
                 ├themes┐
                 │      ├default┐
                 │      │       ├easyui.css
                 │      ├icon.css
                 ├plugins
                 ├local               
           ├jquery-1.8.3.js
           ├jquery.easyui.min.js
        META-INF
        WEB-INF
            lib
            web.xml
1.EasyUI插件使用的一般步骤
    1.导入easyui的css样式
        <link rel="stylesheet" type="text/css" href="js/easyUI/themes/default/easyui.css"/>
    2.导入easyui的图标css样式
        <link rel="stylesheet" type="rext/css" href="js/easyUI/themes/icon.css"/>
    3.导入jquery的基本核心文件
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    4.导入easyui的js文件
        <script type="text/javascript" src="js/jquery.easyui.min.js"><script>
===================================================accordion====================================================
1.accordion折叠面板的使用
    1.创建html
        <div id="accordion">
            //iconCls    指定当前显示的icon
            //selected    是否为选中
            //href        动态加载内容的路径
            <div title="title1" data-options="iconCls:'icon-ok',selected:true,href:'server.jsp'" style="width:100px">面板一的内容</div>
            <div title="title2">面板二的内容</div>
            <div title="title3">面板三的内容</div>
        </div>
    2.创建script
        <script type="text/javascript">
            $(function() {
                $("#accordion").accordion({
                    onSelect : function() {
                        //获得当前选中面表的对象
                        var title = $("#accordion").accordion("getSelected");
                        //通过对象获得选中面板的下标
                        var index=$("#accordion").accordion("getPanelIndex",title);
                        if(title && index==2){
                            //动态更改面板的内容
                            title.panel("refresh","index.jsp");
                        }
                        //根据元素的下标或元素对象 删除选定的面板
                        $("#accordion").accordion("remove",index/title);
                    }
                });
                //动态加载新的面板
                $("#accordion").accordion("add", {
                    title : "New Title",
                    content : "New Content",
                    selected : false,
                    tools:[{            //折叠栏上的工具按钮
                        iconCls:"icon-reload",
                        handler:function(){
                            $("#dg").datagrid("reload");
                        }
                    }]
                });
            });
        </script>
===================================================draggable/droppable====================================================
1.draggable和droppable可拖动面板插件的使用
    1.创建html
        <div id="main">
            <div id="d1" class="drag">1</div>
            <div id="d2" class="drag">2</div>
            <div id="d3" class="drag">3</div>
        </div>
        <div id="drop"></div>
    2.创建script
        <script type="text/javascript">
            $(function(){
                $(".drag").draggable({
                    revert:true,
                    onStartDrag:function(){
                        $(this).draggable("options").cursor="not-allowed";
                    },
                    onStopDrag:function(){
                        $(this).draggable("options").cursor="auto";
                    }
                });
                $("#drop").droppable({
                    accept:"#d1,#d3",
                    onDrop:function(e,source){
                        $(this).append(source);
                    }
                });
            });
        </script>
===================================================progressbar====================================================
2.progressbar进度条插件的使用
    1.创建html
        <div id="progressbar" class="easyui-progressbar"></div>    
    2.创建script
        <script type="text/javascript">
            //按钮触发事件
            function start(){
                var value=$("#p").progressbar("getValue");
                if(value<100){
                    value+=Math.round(Math.random()*10);
                }
                $("#p").progressbar("setValue",value);
                setTimeout(start, 200);
            }
            //自动调用运行
            var i=0;
            $("#progress").progressbar({
                value:i+=Math.round(Math.random()*10)
            });
            if(i<100){
                setTimeout(arguments.callee, 200);
            }
        </script>
======================================================datebox和datetimebox=====================================================
3.日期控件datebox和datetimebox插件的使用方法
    1.创建html
        <input type="text" id="datebox" class="easyui-datebox"/>
    2.创建script脚本进行格式转换
        $("#datebox").datebox(
                {
                    required : true,
                    formatter : function(date) {
                        var y = date.getFullYear();
                        var m = date.getMonth() + 1;
                        var d = date.getDate();
                        var h = new Date().getHours();
                        var M = new Date().getMinutes();
                        var s = new Date().getSeconds();
                        return y + '-' + (m < 10 ? ('0' + m) : m) + '-'
                                + (d < 10 ? ('0' + d) : d) + " "
                                + (h < 10 ? ("0" + h) : h) + ":"
                                + (M < 10 ? ("0" + M) : M) + ":"
                                + (s < 10 ? ("0" + s) : s);
                    }
                });
        $("#datetimebox").datetimebox(
                {
                    required : true,
                    formatter : function(date) {
                        var y = date.getFullYear();
                        var m = date.getMonth() + 1;
                        var d = date.getDate();
                        var h = date.getHours();
                        var M = date.getMinutes();
                        var s = date.getSeconds();
                        return y + '-' + (m < 10 ? ('0' + m) : m) + '-'
                                + (d < 10 ? ('0' + d) : d) + " "
                                + (h < 10 ? ("0" + h) : h) + ":"
                                + (M < 10 ? ("0" + M) : M) + ":"
                                + (s < 10 ? ("0" + s) : s);
                    }
                });