duilib 小知识 OptionBox 及TabBox使用

最新推荐文章于 2024-07-29 09:59:43 发布

清水迎朝阳

最新推荐文章于 2024-07-29 09:59:43 发布

阅读量2.2k

点赞数

分类专栏： duilib 小知识篇文章标签： html css

本文链接：https://blog.csdn.net/shuilan0066/article/details/107466787

版权

duilib 小知识篇专栏收录该内容

15 篇文章

订阅专栏

duilib 快速入门

duilib入门基础一容器之 BOX、VBOX、HBOX布局及其子控件align排列方式

duilib入门基础二 HBOX容器内子控件margin定位规则

duilib入门基础三 VBOX容器内子控件margin定位规则

duilib入门基础四 BOX容器内子控件margin定位规则

duilib入门基础五简单示例之文件选择框使用

duilib入门基础六见见世面，duilib 基本控件 Button 能实现的界面一览

duilib入门基础七见见世面，duilib 基本控件复选框单选框

duilib入门基础八见见世面，duilib 基本控件滑动条

duilib入门基础九见见世面，duilib 基本控件组合框

duilib入门基础十见见世面，duilib 基本控件选项框 OptionBox

云信duilib基本控件示例下载

此篇是早期文章，关于 OptionBox使用，详细可以观看 duilib入门基础十见见世面，duilib 基本控件选项框 OptionBox 这一篇介绍

属性介绍

示例：

左侧使用的就是optionBox

同一组中，选中一个optionBox后，则组内其它OptionBox失去焦点

用法

<VBox bkcolor="white" width="100" margin="0,75,0,0">

   <OptionBox group="headPage_opt" height="99"  cursortype="hand"  name="netOptionBox" selected="true">
     <Event type="select" receiver=".\select_tab" applyattribute="selectedid=&quot;0&quot;" />
     <Event type="unselect" receiver=".\select_tab" applyattribute="selectedid=&quot;1&quot;" />
     <Event type="select" receiver="page_tab" applyattribute="selectedid=&quot;0&quot;" />
     <TabBox mouse="false" mousechild="false" name="select_tab">
                        <HBox bkcolor="white">
                             <VBox valign="center" >
                                <Control />
                                <Control  bkimage="net_h.png" width="auto" height="auto" halign="center"  />
                                <Label  margin="0,6,0,0" text="网络" halign="center" normaltextcolor="bk_wnd_darkcolor1" font="1" mouse="false" />
                                 <Control />
                            </VBox>
                        </HBox>
                        <HBox bkcolor="xnw_set_LeftPane">
                            <VBox valign="center">
                                <Control />
                                <Control  bkimage="net_n.png" width="auto" height="auto" halign="center"  />
                                <Label  margin="0,6,0,0" text="网络" halign="center" normaltextcolor="bk_wnd_darkcolor1" font="1" mouse="false" />
                                 <Control />
                            </VBox>
                        </HBox>
     </TabBox>

另外，选中OPTION时，呈现选中状态，失去焦点的时候呈现另一种状态，这里需要使用TabBox控件实现