tabStrip.md 2.26 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
tabStrip
-------------
#### **tabStrip标签页**

```xml

<!--h:为命名空间,必须要加的;id可写可不写;value为默认打开的标签页,属性值对应tab页的title的值;animation表示是否启用动画,值类型为布尔值-->
 <h:tabStrip id="tabstrip" value="Paris" animation="false">
      <h:tabs>
            //title为标签页的标题
          <h:tab title="Paris">
            //此标签的html内容  
             ...
          </h:tab>
          <h:tab title="New York">
            ...
          </h:tab>
        </h:tabs>
</h:tabStrip>

```



#### **一般属性**

> **提示:**
> - 属性用法请参考kendoui API文档的tabStrip:http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip


属性名|类型
----|----
animation|Boolean
collapsible|Boolean
dataContentField|String
dataSource | kendo.data.DataSource(Function)
dataTextField|String
navigatable|true
scrollable|Boolean
tabPosition|String
value|String
activate|function
contentLoad|function
error|function
select|function
change| Function
dataBound | Function
dataBinding|function



用法示例:

```xml
<h:tabStrip value="标签2" collapsible="true" tabPosition="top">
     <h:tabs>
         <h:tab title="标签1">
             <h:button text="hello1" className="btn-primary" click="test" enable="true" icon="cancel"/>
             <h:button text="hello2" className="btn-primary" click="test" enable="true" icon="cancel"/>
         </h:tab>
         <h:tab title="标签2">
             <h:button text="hello3" className="btn-primary" click="test" enable="true" icon="cancel"/>
             <h:button text="hello4" className="btn-primary" click="test" enable="true" icon="cancel"/>
         </h:tab>
     </h:tabs>
 </h:tabStrip>


<!--或者 将tabStrip与dataSource绑定,-->

<h:dataSource id="dataSourceTabStrip">
     <h:data>
         <h:item name="tab1" content="tab1content"/>
         <h:item name="tab2" content="tab2content"/>
     </h:data>
 </h:dataSource>

 <h:tabStrip dataSource="dataSourceTabStrip" dataTextField="name" dataContentField="content" />




```

> **提示:**



> - 上述所有属性直接添加在标签内即可,(**[属性名] = "..."**),对于既是**String**类型又是**Function**类型的属性,只需要加**fn:**前缀区分即可,(**fn:函数名**)