TAB 标签视图

在前端开发中,经常需要在一组元素中控制选中或通过选中某一项显示和隐藏其他元素,TAB 标签视图用来实现多元素中选中一项比如导航选择、标签选择、菜单项选择等功能。

与其他组件不同,TAB 不是一个标签,而是一个属性,这个属性定义在其他的标签之上,可以是 DIV、TABLE 等。

TAB 属性从原有的 FocusView 组件重构而来,FocusView 组件第一版编写于 2005 年,用来实现类似的功能,不仅支持焦点视图,还支持多选、鼠标事件等功能。目前 TAB 已经是第五版,简化功能的同时增加了与当前 root.js 框架互动的支持。

TAB 的使用非常简单,只有几个属性和事件。

以上为 Master 项目中设置语言的逻辑,这里以此为例说明一下 TAB 组件的属性和事件。

每个标签选项的属性有:

在支持 Expres 字符串的属性中增强属性上,有三个可用的变量:

事件有两个,但是会定义在使用tab属性的元素上,而不是 TAB 上。

TAB 组件与 SELECT 逻辑有些像,区别在于 SELECT 会生成生成相关的子元素,但 TAB 只是绑定到现有的元素上。

TAB 本质上是一个扩展属性,所属的类名为 HTMLTabAttribute,通过应用元素的tab属性访问这个类的实例,如$('#Languages').tab,但一般用不到。


参考链接


微信公众号
码农老吴  |  星源工作室  |  开发月志  |  问题反馈
联系我们:wu@qross.io     手机/微信:18618171102
京 ICP 备 20027445 号
$(h1)!