<!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/13250.html