效果图:
[img]http://dl2.iteye.com/upload/attachment/0087/3572/9a8554ae-eae1-31e2-b66c-75648863e966.png[/img]
js代码:
Ext.onReady(function(){
??? var tabDemo = new Ext.TabPanel({
??? ??? renderTo:Ext.getBody(),
??? ??? width:300,
??? ??? activeTab:0,//当前激活标签
??? ??? frame:true,
??? ??? closable:true,
??? ??? items:[{
??? ??? ??? ??? contentEl:'tabOne',//标签页的页面元素id
??? ??? ??? ??? title:'嘎嘎',
??? ??? ??? ??? closable:true//是否实现关闭按钮,默认false
??? ??? ??? ???
??? ??? ??? },{
??? ??? ??? ??? contentEl:'tabTwo',
??? ??? ??? ??? title:'你们好啊,小伙伴们',
??? ??? ??? ??? closable:true,
??? ??? ??? }]
??? })
})
html代码:
<body>
??? <div>
??? ??? <div id="tabOne" class="x-hide-display">我是tabOne</div>
??? ??? <div id="tabTwo" class="x-hide-display">我是tabTwo</div>
??? </div>
</body>
<!--注意class类型,设为x-hide-display,以正常显示-->
//几个相关参数
1.tabPosition:"bottom"//选项卡的位置,枚举值bottom,top.默认为top(只有top的时候才能选项卡的滚动!)
2.tabTip:"提示"//必须先调用Ext.QuickTips.init();才有效果
在一个选项卡中加载一个完整页面
使用iframe作为tab的标签页内容
效果图:
[img]http://dl2.iteye.com/upload/attachment/0087/3598/ee219b8a-d77e-3696-9b9f-72f91a572af1.png[/img]
点击连接-->"我的博客"
[img]http://dl2.iteye.com/upload/attachment/0087/3600/3545ee5e-9c46-3fb7-9a12-4732da0c9cc5.png[/img]
js代码如下:
Ext.onReady(function(){
??? Ext.QuickTips.init();
??? var tabDemo = new Ext.TabPanel({
??? ??? renderTo:Ext.getBody(),
??? ??? activeTab:0,
??? ??? height:700,//当用viewport布局时,height可以省去
??? ??? frame:true,
??? ??? items:[{
??? ??? ??? ??? contentEl:'mainFrame',
??? ??? ??? ??? title:'加载页面的标签页',
??? ??? ??? ??? closable:true
??? ??? ??? }]
??? })
})
html代码如下:
<body>
??? <div>
??? ??? <a href="javascript:void(0)"
??? ??? onclick="parent.frames['mainFrame'].location='http://wlxt-8436.iteye.com/'"
??? ??? ??? ??? >我的博客</a>
??? ??? <iframe id="mainFrame" name="mainFrame" src="http://www.163.com/"
??? ??? ??? ??? ??? frameborder='0' height='100%'
??? ??? ??? ??? width="100%" style="overflow:hidden"></iframe>
??? </div>
</body>
详细解决方案
ext TabPanel学习(一)
热度:436 发布时间:2013-08-01 15:23:18.0
相关解决方案
- WEB-INF 上的jsp文件,用ext tabpanel autoload url如何访问
- tabpanel+formpanel组件不显示的有关问题
- JQuery TabPanel 插件,有些类似Chrome 浏览器选择项卡
- tabPanel 的一种形式
- tabPanel button 对象的创造 (2)
- Ext TabPanel tab页的掩藏方法
- EXTjs TabPanel listeners事件怎么让它加载完html后执行?实在是查不到
- extjs TabPanel 多行题目
- tabpanel 使用有关问题
- Ext.ux.TabPanel 在IE7上的bug
- extjs4 tabpanel 动态平添一个tab 后,无法再点击 tab 进行切换
- Extjs 角犄角落整理(一)tabpanel title不固定以及title加tooltip
- TabPanel 在IE下无法正常显示,Firefox正常
- EXTJs 掩藏 TABPanel window panel 水平 横轴 横向 滚动条
- extjs tabPanel 加载jsp出错 由于出现异常 80020101 而导致此项操作无法完成(单独访问该JSP一切正常)
- Extjs tabpanel 的tab最大化有关问题研究
- Ext tabpanel 隐藏选项卡,该怎么解决
- 使用extjs tabpanel autoload页面,ie下有时显示内容,有时不显示解决方案
- ExtJS4学习笔记(十一)---TabPanel