## bar组件 bar组件，容器组件 ### 目录 [一、综述](http://wex5.com/cn/?p=8573#001) [二、DOM结构](http://wex5.com/cn/?p=8573#002) [三、样式](http://wex5.com/cn/?p=8573#003) [四、属性](http://wex5.com/cn/?p=8573#004) [五、方法](http://wex5.com/cn/?p=8573#005) [六、事件](http://wex5.com/cn/?p=8573#006) [七、操作](http://wex5.com/cn/?p=8573#007) [八、案例](http://wex5.com/cn/?p=8573#008) ### 一. 综述 bar容器组件。一般放置button，buttonGroup等组件。 组件路径：$UI/system/components/justep/bar/ 组件标识：UI2/system/components/justep/bar/bar ### 二. DOM结构 * bar典型dom结构 <div component="$UI/system/components/justep/bar/bar" class="x-bar" xid="bar1"/> ### 三. 样式 * x-bar（默认） 基础样式。 ### 四. 属性 组件具有公共属性，请参考[组件公共属性](http://wex5.com/cn/webcomponents-component/#002 "组件") * xid [string][xid]组件标示 ### 五. 方法 组件具有公共方法，请参考[组件公共方法](http://wex5.com/cn/webcomponents-component/#003 "组件") * 构造方法 new Bar(cfg) 动态创建Bar组件 >参数 cfg，构造Bar的初始参数参考组件属性 >返回值 Bar组件 >例： 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、标题 [](https://box.kancloud.cn/2015-09-23_56018f677a458.jpg) * 增加bar组件 * 在bar组件中插入H4组件 * 设置H4中的文字垂直居中及字体颜色体样式 代码示例： <div component="$UI/system/components/justep/bar/bar" class="x-bar" xid="bar2"> <h4 xid="h41">标题</h4> </div> .x-bar h4{ padding:0; margin:0; line-height:48px; color:#fff;} ##### 2、导航条，改变背景颜色和前景颜色 [](https://box.kancloud.cn/2015-09-23_56018f67ef5d4.jpg) * 增加bar组件 * 在bar组件中插入H4组件及A标签 * 修改bar组件的背景颜色 * 设置H4及A标签的文字样式。 代码示例： <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> .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 [](https://box.kancloud.cn/2015-09-23_56018f684ef71.jpg) * 增加bar组件 * 在bar组件中插入button组件及buttonGroup组件 * 设置button组件及buttonGroup组件垂直居中 代码示例： <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> .boxBar{ margin:0; line-height:45px; border-bottom:0; }