ExtJs2.0学习系列(10)--Ext.TabPanel之第二式

本文详细介绍了如何在TabPanel中动态添加标签页,并通过JS实现右键菜单,包括关闭当前页、关闭其他所有页及新建标签页等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

上一篇种我们简单的了解了下tabpanel
下面我们要介绍的是,如何动态的添加标签页! 
2.动态添加tabpanel的标签页
效果图:

点击"添加新标签页",会添加一个标签页,而且激活这个新的标签页.
html代码:

< body  style ="margin:10px;" >
    
< div >
    
< id ="AddNewTab"  href ="javascript:void(0)" > 添加新标签页 </ a >
    
</ div >
</ body >

js代码:

复制代码
Ext.onReady( function (){
     Ext.QuickTips.init();
     
var  tabsDemo = new  Ext.TabPanel({
            renderTo:Ext.getBody(),
            activeTab:
0 ,
            height:
700 ,
            frame:
true ,
            items:[{
                      title:
" autoLoad为html简单页面演示 " ,
                      autoLoad:{url:
" tab1.htm " ,scripts: true }
            }]
     });
     
// 下面是添加新标签页的关键代码,很简单方便     
      var  index = 0 ;
     Ext.get(
" AddNewTab " ).on( " click " , function (){
           tabsDemo.add({
                title:
" newtab " ,
                id:
" newtab " + index,
                html:
" new tab " ,
                closable:
true
           });
           tabsDemo.setActiveTab(
" newtab " + index);
           index
++ ;
     })
});
复制代码

简单说明:

    其实添加的话,只要add()方法就可以了,但是我们还要激活这个新的标签页,就必须setActiveTab(newtab的索引或id),关键就是我们不好判断这个索引,所以只好设置个递增的全局变量index来给newtab取名,这样我们也就能准确的获取新的不重复的newtab了,也就容易激活了。而且我们可以通过下图看出来。

 
3.稍微修改上面的例子tabpanel(官方的例子)
效果图:


我就不多说了,关键的几个参数注释了下

< body  style ="margin:10px;" >
    
< div >
       
< div  id ="AddBtn" ></ div >
    
</ div >
</ body >

js代码:

复制代码
Ext.onReady( function (){
     Ext.QuickTips.init();
     
var  tabsDemo = new  Ext.TabPanel({
            renderTo:Ext.getBody(),
            
// resizeTabs:true,宽度能自动变化,但是影响标题的显示
            activeTab: 0 ,
            height:
200 ,
            enableTabScroll:
true , // 挤的时候能够滚动收缩
            width: 200 ,
            frame:
true ,
            items:[{
                      title:
" tab advantage " ,
                      html:
" sample1 "
            }]
     });
     
     
var  index = 0 ;
     
     
// 就是下面这个函数,关键的地方,非常简单也非常实用
      function  addTab()
     {
         tabsDemo.add({
                title:
" newtab " ,
                id:
" newtab " + index,
                html:
" new tab " + index,
                closable:
true
           });
           tabsDemo.setActiveTab(
" newtab " + index);
           index
++ ;
     }
     
     
// 设置一个按钮(上面的是一个链接,应用有点不同哦)
      new  Ext.Button({
         text:
" 添加新标签页 " ,
         handler:addTab
     }).render(document.body,
" AddBtn " );
});
复制代码

4.为tabpanel标签页添加右键菜单
效果图:

点击"关闭其他所有页"后,

其他两个右键菜单还是道理相同.

复制代码
// 几个参数说明
1 .enableTabScroll: true // 前面已经说过了
2 . listeners:{ " contextmenu " : function (参数1,参数2,参数3){.}}
  
// 右键菜单事件,三个参数分别为当前tabpanel,当前标签页panle,时间对象e
3 . // 扩充2,每个标签页都有激活和去激活事件
   activate和deactivate,他们的执行函数有个参数,就是当前标签页。
  例如: items:[{
                      title:
" tab advantage " ,
                      listeners:{
                            deactivate:
function (a){alert( " 删除,a表示当前标签页 " );},
                            activate:
function (){alert( " 激活 " );}
                      },
                      html:
" sample1 "
            }]
4 .menu = new  Ext.menu.Menu() // menu组件,就不多说了,后面会专门分析下,不过不要忘记menu.showAt(e.getPoint());了
复制代码

html代码和上面的例子的html代码一样.
js代码:

复制代码
Ext.onReady( function (){
     Ext.QuickTips.init();
     
var  tabsDemo = new  Ext.TabPanel({
            renderTo:Ext.getBody(),
            
// resizeTabs:true,宽度能自动变化,但是影响标题的显示
            activeTab: 0 ,
            height:
200 ,
            enableTabScroll:
true , // 挤的时候能够滚动收缩
            width: 400 ,
            frame:
true ,

            
// 下面是比上面例子新增的关键右键菜单代码
            listeners:{
                     
// 传进去的三个参数分别为:这个tabpanel(tabsDemo),当前标签页,事件对象e
                     " contextmenu " : function (tdemo,myitem,e){
                                menu
= new  Ext.menu.Menu([{
                                         text:
" 关闭当前页 " ,
                                         handler:
function (){
                                            tdemo.remove(myitem);
                                         }
                                },{
                                         text:
" 关闭其他所有页 " ,
                                         handler:
function (){
                                            
// 循环遍历
                                            tdemo.items.each( function (item){
                                                 
if (item.closable && item != myitem)
                                                 {
                                                    
// 可以关闭的其他所有标签页全部关掉
                                                    tdemo.remove(item);
                                                 }
                                            });
                                         }
                                },{
                                         text:
" 新建标签页 " ,
                                         handler:addTab
                                }]);
                                
// 显示在当前位置
                                menu.showAt(e.getPoint());
                     }
            },

            items:[{
                      title:
" tab advantage " ,
                      html:
" sample1 "
            }]
     });
     
     
var  index = 0 ;
     
     
function  addTab()
     {
         tabsDemo.add({
                title:
" ntab " + index,
                id:
" newtab " + index,
                html:
" new tab " + index,
                closable:
true
           });
           tabsDemo.setActiveTab(
" newtab " + index);
           index
++ ;
     }
     
new  Ext.Button({
         text:
" 添加新标签页 " ,
         handler:addTab
     }).render(document.body,
" AddBtn " );
});
复制代码

关于tabpanel的简单使用就说到了这里.

资源下载链接为: https://pan.quark.cn/s/d9ef5828b597 在本文中,我们将探讨如何通过 Vue.js 实现一个带有动画效果的“回到顶部”功能。Vue.js 是一款用于构建用户界面的流行 JavaScript 框架,其组件化和响应设计让实现这种交互功能变得十分便捷。 首先,我们来分析 HTML 代码。在这个示例中,存在一个 ID 为 back-to-top 的 div 元素,其中包含两个 span 标签,分别显示“回到”和“顶部”文字。该 div 元素绑定了 Vue.js 的 @click 事件处理器 backToTop,用于处理点击事件,同时还绑定了 v-show 指令来控制按钮的显示与隐藏。v-cloak 指令的作用是在 Vue 实例渲染完成之前隐藏该元素,避免出现闪烁现象。 CSS 部分(backTop.css)主要负责样设计。它首先清除了一些默认的边距和填充,对 html 和 body 进行了全屏布局,并设置了相对定位。.back-to-top 类则定义了“回到顶部”按钮的样,包括其位置、圆角、阴影、填充以及悬停时背景颜色的变化。此外,与 v-cloak 相关的 CSS 确保在 Vue 实例加载过程中隐藏该元素。每个 .page 类代表一个页面,每个页面的高度设置为 400px,用于模拟多页面的滚动效果。 接下来是 JavaScript 部分(backTop.js)。在这里,我们创建了一个 Vue 实例。实例的 el 属性指定 Vue 将挂载到的 DOM 元素(#back-to-top)。data 对象中包含三个属性:backTopShow 用于控制按钮的显示状态;backTopAllow 用于防止用户快速连续点击;backSeconds 定义了回到顶部所需的时间;showPx 则规定了滚动多少像素后显示“回到顶部”按钮。 在 V
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值