bar組件 · wex5

## 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、標題 [![1](https://box.kancloud.cn/2015-09-23_56018f677a458.jpg)](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、導航條，改變背景顏色和前景顏色 [![2](https://box.kancloud.cn/2015-09-23_56018f67ef5d4.jpg)](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 [![1](https://box.kancloud.cn/2015-09-23_56018f684ef71.jpg)](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; }