bar组件，容器组件

目录

一、综述
二、DOM结构
三、样式
四、属性
五、方法
六、事件
七、操作
八、案例

一. 综述

bar容器组件。一般放置button，buttonGroup等组件。

组件路径：$UI/system/components/justep/bar/

组件标识：UI2/system/components/justep/bar/bar

二. DOM结构

  • bar典型dom结构
1
2
<div component="$UI/system/components/justep/bar/bar"
  class="x-bar" xid="bar1"/>

三. 样式

  • x-bar（默认）

基础样式。

四. 属性

组件具有公共属性，请参考组件公共属性

  • xid

[string][xid]组件标示

五. 方法

组件具有公共方法，请参考组件公共方法

  • 构造方法

new Bar(cfg)
动态创建Bar组件

>参数

cfg，构造Bar的初始参数参考组件属性

>返回值

Bar组件

>例：

1
2
3
4
5
6
7
8
9
var Bar = require("$UI/system/components/justep/bar/bar");
 
var parentNode = this.getElementByXid("window"); //window为新加button的父元素
var flag = {
    "xid" : "barNew",
    "class" : "x-bar",
    "parentNode" : parentNode
};
var bar = new Bar(flag);

六. 事件

  • (无)

七. 操作

  • (无)

八. 案例

1、标题
1
  • 增加bar组件
  • 在bar组件中插入H4组件
  • 设置H4中的文字垂直居中及字体颜色体样式

代码示例：

1
2
3
4
<div component="$UI/system/components/justep/bar/bar"
  class="x-bar" xid="bar2">
  <h4 xid="h41">标题</h4>
</div>
1
.x-bar h4{ padding:0; margin:0; line-height:48px; color:#fff;}
2、导航条，改变背景颜色和前景颜色
2
  • 增加bar组件
  • 在bar组件中插入H4组件及A标签
  • 修改bar组件的背景颜色
  • 设置H4及A标签的文字样式。

代码示例：

1
2
3
4
5
6
7
<div component="$UI/system/components/justep/bar/bar"
  class="x-bar navBar" xid="bar1">
  <h4 xid="h46" class="logo">LOGO</h4>
  <a xid="a1" class="active"><![CDATA[Link]]></a>
  <a xid="a2" style="height:100%;">Link</a>
  <a xid="a3" style="height:100%;">Link</a>
</div>
1
2
3
4
5
.x-bar.navBar{ background-color:#1ebda7; border-bottom:0;}
.x-bar.navBar .logo{ padding:0 5px; margin-right:15px;}
.x-bar.navBar a{ color:#fff; height:48px; line-height:48px;
 padding:0 10px;display:block;}
.x-bar.navBar a.active{ color:#333; background-color:#f1f1f1;}
3、放button和buttonGroup
1
  • 增加bar组件
  • 在bar组件中插入button组件及buttonGroup组件
  • 设置button组件及buttonGroup组件垂直居中

代码示例：

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
<div component="$UI/system/components/justep/bar/bar"
  class="x-bar boxBar" xid="bar4">
  <a component="$UI/system/components/justep/button/button"
    class="btn btn-success" label="button" xid="button1">
    <i xid="i1"/>
    <span xid="span1"/>
  </a>
  <a component="$UI/system/components/justep/button/button"
    class="btn btn-warning" label="button" xid="button2">
    <i xid="i2"/>
    <span xid="span2"/>
  </a>
  <div component="$UI/system/components/justep/button/buttonGroup"
    class="btn-group" tabbed="true" xid="buttonGroup1">
    <a component="$UI/system/components/justep/button/button"
      class="btn btn-info" label="button" xid="button7">
      <i xid="i9"/>
      <span xid="span7"/>
    </a>
    <a component="$UI/system/components/justep/button/button"
      class="btn btn-info" label="button" xid="button8">
      <i xid="i10"/>
      <span xid="span8"/>
    </a>
    <a component="$UI/system/components/justep/button/button"
      class="btn btn-info" label="button" xid="button9">
      <i xid="i11"/>
      <span xid="span9"/>
    </a>
  </div>
</div>
1
.boxBar{ margin:0; line-height:45px; border-bottom:0; }

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443