layout 布局、手風琴accordion、選項卡tabs

本文轉載自查看原文 2016-11-28 10:32 2705

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 1、JQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<!-- 2 css資源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
<!-- 3、圖標資源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
<!-- 4、easyui的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

<!-- 5、本地語言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">

$(function(){
    //創建打開新標簽頁的按鈕     
    $(".easyui-linkbutton").click(
            function()
            {
                //獲取組件的屬性或內容
                var tab_title=$(this).text();
                var tab_href=$(this).attr("title");
                
                
                
                if($("#tt").tabs("exists",tab_title))
                {
                    $("#tt").tabs("select",tab_title);
                }
            else
                {
                
                $("#tt").tabs('add',{
                    title:tab_title,
                    closable:true,
                    href:tab_href
                })
                    
                }
            });
        
    

    
})

</script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',split:false" style="height:80px;"></div>   
    <div data-options="region:'south',title:'底部 Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'工具',split:true" style="width:100px;"></div>  
    <div data-options="region:'west',title:'菜單',split:true" style="width:150px;">
    <div id="ac" class="easyui-accordion" data-options="fit:true,selected:0">
    <div title="員工信息">
    <a id="add_tab" style="width:100%"href="#" class="easyui-linkbutton">新標簽頁</a>
    <a style="width:100%" title="addUser.html" href="#" class="easyui-linkbutton">添加員工</a>
    <br>
    <a style="width:100%" title="editUser.html" href="#" class="easyui-linkbutton">修改員工</a>
        <br>
    <a style="width:100%" title="deleteUser.html" href="#" class="easyui-linkbutton">刪除員工</a>
    </div>
    <div title="考勤信息">這是員工考勤信息模塊</div>
    <div title="招聘信息">這是員工招聘信息模塊</div>
    <div title="培訓員工信息">這是培訓員工信息模塊</div>
    </div>    
    </div>   
    <div data-options="region:'center',title:'主窗口'" style="padding:5px;background:#eee;" class="easyui-layout">
    <div id="tt" class="easyui-tabs" data-options="fit:true">   
    <div title="Tab1" style="padding:20px;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true,selected:true" style="overflow:auto;padding:20px;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">   
        tab3    
    </div>  
     
</div>  
    
    
    </div> 
       
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 easyui源碼翻譯1.32--accordion(手風琴) easyui學習筆記6—基本的Accordion(手風琴) Jquery UI accordion手風琴菜單 EasyUI---layout布局、樹形組件、選項卡tabs java web前端easyui（layout+tree+雙tabs）布局+樹+2個選項卡tabs VUE實現Studio管理后台（五）：手風琴式折疊組件（Accordion） ionic3 模擬手風琴布局 easyui accordion—手風琴格子始終展開和多個格子展開【精心推薦】20款優秀 jQuery Accordion（手風琴）特效插件 [js插件開發教程]定制一個手風琴插件(accordion)