EasyUI的简单使用

矫情吗；* 2022-08-07 13:46 277阅读 0赞

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);  
                    \}  
                \});