高级标签(Advanced Tabs)

Posted 周二, 06/17/2008 - 13:42 by admin


上一节简单介绍了标签(tabs)的用法,下面我们来看一下它的一些高级功能,动态添加标签.

演示(demo)地址在文章最后.

效果图如下:

例子包括两个文件tabs-adv.html 和 tabs-adv.js

tabs-adv.html


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Advanced Tabs</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>

    <link rel="stylesheet" type="text/css" href="tabs-example.css" />
    <script type="text/javascript" src="TabCloseMenu.js"></script>
    <script type="text/javascript" src="tabs-adv.js"></script>

    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
    <script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
    <h1>Advanced Tabs</h1>
    <p>Note that the js and css is not minified so it is readable. See <a href="tabs-adv.js">tabs-adv.js</a> for the tab creation code.</p>

    <p>This TabPanel is built entirely with javascript and demonstrates:</p>
    <ul class="list">
        <li>Auto tab resizing</li>
        <li>Tab scrolling</li>
        <li>Tabs with icons</li>
        <li>Tab plugins (context menu)</li>
        <li>Adding tabs with JS</li>
    </ul><br>

    <div id="tabs" style="margin:15px 0;"></div>
</body>
</html>

tabs-adv.js


/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * 
 * 
 * extjs.com/license
 */

Ext.onReady(function(){

    var tabs = new Ext.TabPanel({
        renderTo:'tabs',
        resizeTabs:true, // turn on tab resizing
        minTabWidth: 115,
        tabWidth:135,
        enableTabScroll:true,
        width:600,
        height:250,
        defaults: {autoScroll:true},
        plugins: new Ext.ux.TabCloseMenu()
    });

    // tab generation code
    var index = 0;
    while(index < 7){
        addTab();
    }
    function addTab(){
        tabs.add({
            title: 'New Tab ' + (++index),
            iconCls: 'tabs',
            html: 'Tab Body ' + (index) + '<br/><br/>'
                    + Ext.example.bogusMarkup,
            closable:true
        }).show();
    }

    new Ext.Button({
        text: 'Add Tab',
        handler: addTab,
        iconCls:'new-tab'
    }).render(document.body, 'tabs');
});

演示地址: http://extjs.org.cn/extjs/examples/tabs/tabs-adv.html

  • 要发表评论，请先登录