EasyUi

　　我们可以在easyui的官网下载它，下载完成后，将文件导入项目，我么需要引入五个重要的文件

<!--EasyUI的核心样式-->
        <link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css" />
        <!--EasyUI的图标样式-->
        <link rel="stylesheet" type="text/css"  href="js/easyui/themes/icon.css" />
        <!--jquery的核心JS-->
        <script type="text/javascript" src="js/easyui/jquery.min.js"></script>
        <!--jquery EasyUI的核心JS-->
        <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
        <!-- 信息本地化js文件 -->
        <script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>

　　我们首先使用easyui实现一个小的对话框：

<div class="easyui-dialog" title="对话" style="width: 300px;height: 300px;">
            你好
</div>

实现的效果：

Parser 解析器：Parser 解析器是专门解析渲染各种 UI 组件了，一般来说，我们并不需要使用它即可自动完成 UI 组件的解析工作。当然，有时可能在某些环境下需要手动解析的情况。手动解析一般是使用 class 的情况下有效，比如设置 class="easyui-dialog"。默认解析器是打开的如果设置为 false 此时组件不被解析，样式就会丢失！
解析指定 ui 组件解析时，必须要设置父类容器才可以解析到。

<script type="text/javascript">  
 //关闭解析  
 　　$.parser.auto=false;      
//解析指定节点    
　　$(function(){     
　　　　$.parser.parse("#dialog1");   
　　})     
</script>

easyui-draggable 拖动组件，具有这个属性的元素都可以被拖动。

$("#draggable").draggable({  
 //edge:500   
//axis:"h",    // 纵轴v 横轴 h      
//disabled:false,//是否可以进行拖动  
 //deltaX:200,   
revert:true,     //拖动停止时返回起始位置   
handle:"#zt"
//当然也可以在这里面定义事件
//true时 拖动执行  false 时取消拖动  
onBeforeDrag:function(e){   
alert("返回true时,在拖动前触发该事件..");   
return true;  },   
//拖动时触发 
 onStartDrag:function(e){   
alert("拖动时触发。。。");    
 },  
 
 //拖动停止时触发  
onStopDrag:function(e){   
alert("拖动停止时触发！");   
 }
  
});

easyui-resizable 可调整大小

<div id="rr1" class="easyui-resizable" dataoptions="maxWidth:300,maxHeight:500" style="width:100px;  height:100px;background-color: red">  
 这里是可调整大小区域  
</div>

maxWidth ， maxHeight 可用于限定大小！

easyui-linkbutton 按钮组件

        $("#btn").linkbutton({
            iconCls:"icon-search"
        });
        
        $("#btn").linkbutton('disable');

easyui-panel 面板组件

   collapsible boolean 定义是否显示可折叠按钮。 false
   minimizable boolean 定义是否显示最小化按钮。 false
   maximizable boolean 定义是否显示最大化按钮。 false
   closable boolean 定义是否显示关闭按钮。

$("#p").panel({
            iconCls:"icon-help",
            /*width:800,
            height:400,*/
            /*fit:true, // 子容器自适应父容器的大小*/
            border:true,
            collapsible:true,
            minimizable:true,
            maximizable:true,
            closable:true,
            tools:[
                {
                    iconCls:'icon-add',
                    handler:function(){alert('add')}
                },{
                    iconCls:'icon-edit',
                    handler:function(){alert('edit')}
                }
            ],
            collapsed:true,  // 默认面板折叠
            href:"js/data.json",
            loadingMessage:"正在加载中...",
            extractor:function(data){
                // 解析json格式的数据
                data = eval("("+data+")");
                console.log(data);
                var html = "姓名：<input type='text' value='"+data.uname+"'/>";
                return html;
            },
            onExpand:function(){
                alert("数据加载完毕！");
            }
        });

easyui-tabs 选项卡

<body>
        <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
            <div title="Tab1" style="padding:20px;" href="js/data.json">   
                tab1    
            </div>   
            <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">   
                tab2    
            </div>   
            <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">   
                tab3    
            </div>   
        </div>  
    </body>
    <script type="text/javascript">
        $("#tt").tabs({
            plain:false, // 如果设置为true，将不显示面板的背景
            fit:true, // 自适应父容器大小
            tools:[{
                        iconCls:'icon-add',
                        handler:function(){
                            alert('添加')
                        }
                    },{
                        iconCls:'icon-save',
                        handler:function(){
                            alert('保存')
                        }
                    }],
            toolPosition:"left",
            tabPosition:"top",
            headerWidth:300,
            tabHeight:50

        });
    </script>

easyui-accordion 手风琴组件

<body>
        <div id="aa" class="easyui-accordion" style="width:150px;height:400px;" animate=true>   
            <div title="学生管理" data-options="iconCls:'icon-tip'" style="overflow:auto;padding:10px;">   
                <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">学生信息</a> <br>
                <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">学生学分</a>
            </div>   
            <div title="教师管理" data-options="iconCls:'icon-tip'" style="padding:10px;">   
                <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">教师信息</a> <br>
                <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">教师绩效</a>
            </div> 
            <div title="专业管理" data-options="iconCls:'icon-tip'">   
                  <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">数学专业</a> <br>
                  <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">计算机专业</a>
            </div>  
            <div title="系统管理" data-options="iconCls:'icon-tip'">   
                  <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">账户管理</a> <br>
                  <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">修改密码</a> <br>
                  <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-add" onclick="addPanel()">添加分类</a>
                  <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-cancel" onclick="removePanel()">删除分类</a>
            </div>   
        </div> 
    </body>

easyui-layout 布局组件

//此处在body中添加class easyui-layout   然后在创建五个div，分别对应不同的位置，可根据自己的需要删除添加div
<body class="easyui-layout">
          <div data-options="region:'north',split:true" style="height:100px;" border=false></div>   
        <div data-options="region:'south',split:true" style="height:100px;"></div>   
        <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>  
        <div data-options="region:'west',title:'菜单导航栏',split:true" border=false style="width:170px;"></div>   
        <div data-options="region:'center'" style="padding:5px;background:#eee;"></div>   
    </body>

easyui-layout，tabs，accordions联合组成的简单页面

<body class="easyui-layout" >   
        
        <!--上面 logo start -->
        <div data-options="region:'north',split:true" style="height:100px;" border=false>
            <img src="img/logo.png"  style="height:100px;width: 100%;"/>
        </div>
        <!--上面 logo end -->
        
        <div data-options="region:'south',split:true" style="height:70px;text-align: center;font-size: 15px;color: gray;">
            上海尚学堂松江校区地址：上海市松江区荣乐东路2369弄45号绿地伯顿大厦2层 咨询电话：021-67690939
            <br />
            Copyright 2006-2017 上海尚学堂智能科技有限公司 的icp备案号 （沪ICP备16053543号） 
        </div>   
        
        <!--<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>  -->
       
       <!--左边 菜单导航栏 start-->
       <div data-options="region:'west',title:'菜单导航栏',split:true" border=false style="width:170px;">
            
            <div id="aa" class="easyui-accordion" fit=true animate=true>   
                <div title="学生管理" data-options="iconCls:'icon-tip'" style="overflow:auto;padding:10px;">   
                    <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit" onclick="openTabs('学生信息','student.html')">学生信息</a> <br>
                    <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit" onclick="openTabs('学生学分','student_score.html')">学生学分</a>
                </div>   
                <div title="教师管理" data-options="iconCls:'icon-tip'" style="padding:10px;">   
                    <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit"  onclick="openTabs('教师信息')">教师信息</a> <br>
                    <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit" onclick="openTabs('教师绩效')">教师绩效</a>
                </div> 
                <div title="专业管理" data-options="iconCls:'icon-tip'">   
                      <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">数学专业</a> <br>
                      <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">计算机专业</a>
                </div>  
                <div title="系统管理" data-options="iconCls:'icon-tip'">   
                      <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">账户管理</a> <br>
                      <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">修改密码</a> <br>
                      <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-add" onclick="addPanel()">添加分类</a>
                      <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-cancel" onclick="removePanel()">删除分类</a>
                </div>   
            </div> 
        </div>   
         <!--左边 菜单导航栏 end-->
        
        
        <div data-options="region:'center'" style="padding:5px;" border=false>
            
            <div id="tt" class="easyui-tabs" fit=true >   
                <div title="主页" style="padding:20px;">   
                    <h1>欢迎来到XXX系统！！！</h1>    
                </div>
            </div>
            
        </div>   
    </body> 
    <script type="text/javascript">
        /**
         * 打开选项卡
         *     判断选项卡是否存在   exists 表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。
         *         不存在 新建选项卡 
         *         如果存在 选中当前选项卡 select 选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
         * @param {Object} title
         */
        function openTabs(title,url){
            console.log(title);
            // 判断选项卡是否存在
            var exists = $("#tt").tabs("exists",title);
            if (exists) { //如果返回true，说明选项卡存在，选中当前选项卡
                $("#tt").tabs("select",title);
            } else { //如果返回false，说明选项卡不存在，新建选项卡
                $('#tt').tabs('add',{
                    title: title,
                    selected: true,
                    closable:true,
                    iconCls:'icon-edit',
                    href:url
                });
            }
        }
        
        
        /**
         * 添加新的面板
         */
        function addPanel() {
            $("#aa").accordion("add",{
                title:"新的面板",
                selected:false,
                iconCls:"icon-tip",
                href:"js/data.json"
            });
        }
        
        function removePanel() {
            $("#aa").accordion("remove","新的面板");
        }
        
        
    </script>

EasyUi的使用方法

EasyUi

猜你喜欢