ExtJS创建选项卡详解编程语言

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
    <head>   
        <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>  
        <script language="javascript" src="extjs/ext-all.js"></script>  
        <script language="javascript" src="Jquery/jquery-1.8.1.min.js"></script>   
        <script type="text/javascript" src="js/tabs.js"></script>   
        <title>选项卡</title>   
        <style>   
            .main{ margin:50px auto;}   
            #add{ padding-left:10px;}   
        </style>   
    </head>   
  
    <body>   
        <div class="main">   
            <div id="add"></div>   
            <div id="tab"></div>   
        </div>   
    </body>   
</html>

tabs.js

Ext.require('Ext.tab.*');   
Ext.onReady(function(){   
    var currentItem;   
    var tabs = Ext.createWidget('tabpanel', {   
        renderTo: 'tab',   
        resizeTabs: true,   
        enableTabScroll: true,   
        margin:'10',   
        width: 600,   
        height: 250,   
        defaults: {   
            autoScroll:true,   
            bodyPadding: 10   
        },   
        items: [{   
            title: '选项卡',   
            html: '选项卡内容',   
            closable: true   
        }]   
           
    });         
    var index = 0;   
       
    function addTab (closable) {   
        ++index;  
        tabs.add({   
            title: '新选项卡- ' + index,   
            html: '新选项卡内容 ' + index + '<br/><br/>',   
            closable: !!closable   
        }).show();   
    }   
  
    Ext.createWidget('button', {   
        renderTo: 'add',   
        text: '创建可关闭选项卡',   
        handler: function () {   
            addTab(true);   
        }   
    });   
  
    Ext.createWidget('button', {   
        renderTo: 'add',          text: '创建不可关闭选项卡',   
        handler: function () {   
            addTab(false);   
        },   
        style: 'margin-left: 8px;'   
    });   
});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<HTML> 
    <HEAD> 
        <TITLE></TITLE> 
        <meta http-equiv="Content-Type" content="text/html; charset=gbk"> 
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> 
        <!--<script type="text/javascript" src="extjs/ext-base.js"></script>--> 
        <script type="text/javascript" src="extjs/ext-all.js"></script> 
        <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> 
        <script type="text/javascript"> 
            Ext.onReady(function(){ 
                Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; 
                var strTabs = '[{"id":"BaseInfo","text":"基本信息","url":"http://www.baidu.com"},{"id":"fromInfo","text":"供货信息","url":"http://www.sohu.com"},{"id":"toInfo","text":"物流信息","url":"http://www.163.com"}]'; 
                var oTabs = eval('(' + strTabs + ')'); 
                if (oTabs != null && oTabs.length > 0) { 
                    document.getElementById("frmContent").src = oTabs[0].url; 
                    var tabs = new Ext.TabPanel({ 
                        renderTo: 'tabsContent', 
                        activeTab: 0, 
                        collapsed: true, 
                        items: [{ 
                            id: oTabs[0].id, 
                            title: oTabs[0].text, 
                            contentEl: 'tabItem' 
                        }] 
                    }); 
                     
                    for (var j = 1; j < oTabs.length; j++) { 
                        var oItem = {}; 
                        oItem.id = oTabs[j].id; 
                        oItem.title = oTabs[j].text; 
                        oItem.contentEl = 'tabItem';                       
                        tabs.add(oItem); 
                    } 
                     
                    tabs.addListener("tabchange", function(tabs, nowtab){ 
                        for (var s = 0; s < oTabs.length; s++) { 
                            if (oTabs[s].id == nowtab.id) { 
                                document.getElementById("frmContent").src = oTabs[s].url; 
                                break; 
                            } 
                        } 
                    }); 
                } 
                else { 
                    document.getElementById("tabsContent").style.display = "none"; 
                } 
            }); 
        </script> 
    </HEAD> 
    <BODY> 
        <div id="tabsContent" style="margin-top: 2px;"> 
            <div id="tabItem" style="width: 0px; height: 0px;"> 
            </div> 
        </div> 
        <div id="tabItemsRender" style="height: 640px; overflow: auto; border-left-style: solid; border-left-width: 1px; border-left-color: #8DB2E3; border-right-style: solid; border-right-width: 1px; border-right-color: #8DB2E3; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #8DB2E3;"> 
            <iframe id="frmContent" name="frmContent" src="http://blog.163.com/baihongtao_618/blog/" frameborder="0" height="100%" width="100%"> 
            </iframe> 
        </div> 
    </BODY> 
</HTML>

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/industrynews/13250.html

ExtJS创建选项卡详解编程语言

相关推荐

发表回复