菜鸟级Tab控件的使用

1、首先创建一个MFC对话框框架,在对话框资源上

 

从工具箱中添加上一个Tab Control 控件,根据需要

 

修改一下属性,然后右击控件,为这个控件添加一

 

个变量,将此控件跟一个CTabCtrl类变量绑定在一起

 

,这里设为m_tabctrl

 

2、创建两个新的对话框资源,其属性作如下修改:

 

Bordernone //边界为空,这样它就没了标题栏

 

Style Child // 这样这个模板就可以当作另一个窗

 

口的子窗口了。

 

   其它如果没有必要,就不用改了。

 

在上面加一些控件什么的,具体操作跟普通对话框

 

没有区别。

 

完成后从这两个对话框模板生成两个新的对话框类

 

 

3、在主对话框中为新添加进来的两个类增加两个变

 

量:

 

如:CDialog1 m_mm1;

 

CDialog2 m_mm2;

 

4、在主对话框的OnInitDialog()函数中添加如下类似

 

的代码:

 

    TCITEM item;

 

item.mask = TCIF_TEXT;

 

item.pszText = "第一页";

 

m_tabctrl.InsertItem (0,&item);

 

item.pszText ="第二页";

 

m_tabctrl.InsertItem (1,&item);

 

m_mm1.Create (IDD_DIALOG1,&m_tabctrl);

 

m_mm2.Create (IDD_DIALOG2,&m_tabctrl);

 

m_mm1.SetWindowPos

 

(NULL,10,30,400,100,SWP_SHOWWINDOW);

 

m_mm2.SetWindowPos

 

(NULL,10,30,400,100,SWP_HIDEWINDOW );  

 

解释如下:

 

两个InsertItem函数的调用是为了给标签控件增加两

 

个标签页面,文本是标题。

 

SetWindowPos()函数设置这两个对话框在Z顺序中的

 

位置,显示或隐藏状态.

 

5、在主对话中为标签控件添加一个标签选择改变(

 

TCN_SELCHANGE)的控件通知消息,以便在用户选

 

择标签时通知主对话框。在主对话框的编辑界面右

 

击标签控件,选择添加一个事件可以完成这个操作

 

 

在事件处理中添加如下代码,如下例:

 

void CtabdialogDlg::OnTcnSelchangeTab1(NMHDR

 

*pNMHDR, LRESULT *pResult)

 

{

 

CRect r;

 

m_tabctrl.GetClientRect (&r);

 

switch(m_tabctrl.GetCurSel())

 

{

 

case 0:

 

m_mm1.SetWindowPos (NULL,10,30,r.right -

 

20,r.bottom -40,SWP_SHOWWINDOW);

 

m_mm2.SetWindowPos (NULL,10,30,r.right -

 

20,r.bottom -40,SWP_HIDEWINDOW );  

 

break;

 

case 1:

 

m_mm1.SetWindowPos (NULL,10,30,r.right -

 

20,r.bottom -40,SWP_HIDEWINDOW);

 

m_mm2.SetWindowPos (NULL,10,30,r.right -

 

20,r.bottom -40,SWP_SHOWWINDOW );  

 

break;

 

}

 

*pResult = 0;

 

}

 

要想知道用户选择那个标签页,要通过

 

m_tabctrl.GetCurSel() 函数。为了不使显示的子对话

 

框覆盖标签控件的显示,所以要获得标签控件的尺

 

寸然后设置各页面的尺寸。

 

或者:

 

    m_Tab.InsertItem(0,"第一页");

 

    m_Tab.InsertItem(1,"第二页");

 

    m_Tab.InsertItem(2,"第三页");

 

    m_Tab.InsertItem(3,"第四页");

 

    m_PageA.Create(IDD_PROPPAGE_A,&m_Tab);

 

    m_PageB.Create(IDD_PROPPAGE_B,&m_Tab);

 

    m_PageC.Create(IDD_PROPPAGE_C,&m_Tab);

 

    m_PageD.Create(IDD_PROPPAGE_D,&m_Tab);

 

    m_PageA.ShowWindow(SW_SHOW);

 

    m_PageB.ShowWindow(SW_HIDE);

 

    m_PageC.ShowWindow(SW_HIDE);

 

    m_PageD.ShowWindow(SW_HIDE);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你想了解如何在 Vant UI 组件中使用 Tab 组件吗?以下是使用 Vant Tab 组件的基本步骤: 1. 首先,确保已经安装并导入 Vant UI 库。可以通过 npm 安装或者直接引入 CDN 链接。 2. 在需要使用 Tab 组件的页面中,引入 TabTabPanel 组件。 ```javascript import { Tab, TabPanel } from 'vant'; ``` 3. 在页面模板中,使用 TabTabPanel 组件来创建选项卡布局。Tab 组件用于渲染选项卡标题,TabPanel 组件用于渲染选项卡内容。 ```html <van-tab> <van-tab-panel title="选项卡1"> <!-- 选项卡1 的内容 --> </van-tab-panel> <van-tab-panel title="选项卡2"> <!-- 选项卡2 的内容 --> </van-tab-panel> <van-tab-panel title="选项卡3"> <!-- 选项卡3 的内容 --> </van-tab-panel> </van-tab> ``` 4. 可以通过设置 `v-model` 属性来实现选项卡的切换。在数据中定义一个变量,并将其绑定到 `v-model` 上。 ```html <template> <van-tab v-model="activeTab"> <van-tab-panel title="选项卡1"> <!-- 选项卡1 的内容 --> </van-tab-panel> <van-tab-panel title="选项卡2"> <!-- 选项卡2 的内容 --> </van-tab-panel> <van-tab-panel title="选项卡3"> <!-- 选项卡3 的内容 --> </van-tab-panel> </van-tab> </template> <script> export default { data() { return { activeTab: 0, // 初始选中的选项卡索引 }; }, }; </script> ``` 这样就可以在 Vant UI 中使用 Tab 组件了。根据实际需求,你可以自定义选项卡的样式和内容。希望这能帮到你!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值