视频地址： http://pan.baidu.com/s/1mg2yfFi 

titleBar组件，标题栏组件

目录

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

一. 综述

titleBar组件, 属于容器组件, 带有一个标题和左右按钮区, 适合作为页面的head。

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

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

二. DOM结构

  • 典型dom结构
<div component="$UI/system/components/justep/titleBar/titleBar"
  class="x-titlebar" xid="titleBar1" title="标题">
  <div class="x-titlebar-left" xid="div1"/>
  <div class="x-titlebar-title" xid="div2">标题</div>
  <div class="x-titlebar-right reverse" xid="div3"/>
</div>

三. 样式

  • x-titlebar（默认）

基础样式。

四. 属性

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

  • title

[string] title 标题

  • xid

[string][xid] 组件标示

五. 方法

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

  • get

Object get (String name)
获取TitleBar的属性

> 参数

name：[String] 属性名，取值范围：title

> 返回值

object

> 例：

  this.comp("titleBar").get("title");
  • set

void set (json arg)
设置属性值

> 属性

arg：[json] 属性值对，结构如下：

{
“title” : {string} 显示标题
}

> 返回值

void

> 例：

this.comp("titleBtn").set({"title":"标题"});
  • setTitle

void setTitle (string name)
设置标题

> 参数

name：[string] 标题

> 返回值

void

> 例：

this.comp("titleBar").setTitle("新标题");
  • 构造方法

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

> 参数

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

> 返回值

titleBar组件

> 例：

var titleBar = require("$UI/system/components/justep/titleBar/titleBar");

var parentNode = this.getElementByXid("window"); //window为新加button的父元素
var flag = {
	"xid" : "titleBarNew",
	"title" :"新加的组件",
	"class" : "x-titlebar",
	"parentNode" : parentNode,
	"left" : {
	   "reverse" : "reverse",
	   "body" : ""
	},
	"right" : {
	   "reverse" : "reverse",
	   "body" : ""
	}
};
var titlebar = new titleBar(flag);

六. 事件

  • (无)

七. 操作

  • (无)

八. 案例

1、titleBar：左右两边显示按钮，弹出菜单
  • 增加titleBar组件
  • titleBar组件左、右侧区域插入button组件，并设置icon和class属性
  • 插入popMenu组件，修改其菜单项，设置显示位置
  • 右侧区域button关联popMenu组件的show操作，来显示popMenu组件

代码示例：

  <div component="$UI/system/components/justep/titleBar/titleBar" class="x-titlebar"
    xid="titleBar1" title="标题">
    <div class="x-titlebar-left" xid="div1">
      <a component="$UI/system/components/justep/button/button" class="btn btn-link"
        xid="button1" icon="icon-chevron-left" onClick="closeWin">
        <i xid="i1" class="icon-chevron-left"/>
        <span xid="span1"/>
      </a>
    </div>
    <div class="x-titlebar-title" xid="div2">标题</div>
    <div class="x-titlebar-right reverse" xid="div3">
      <a component="$UI/system/components/justep/button/button"
        class="btn btn-link btn-only-icon"
        xid="button9" onClick="{operation:'popMenu.show'}" icon="icon-android-more">
        <i xid="i9" class="icon-android-more"/>
        <span xid="span9"/>
      </a>
    </div>
  </div>
  <div component="$UI/system/components/justep/popMenu/popMenu" class="x-popMenu"
    xid="popMenu" anchor="button9" dismissible="true" opacity="0.1"
    direction="right-bottom">
    <div class="x-popMenu-overlay" xid="div4"/>
    <ul component="$UI/system/components/justep/menu/menu"
      class="x-menu dropdown-menu x-popMenu-content"
      xid="menu1">
      <li class="x-menu-item" xid="item1">
        <a component="$UI/system/components/justep/button/button" class="btn btn-link"
          label="联系我们" xid="button2" icon="icon-android-earth">
          <i xid="i2" class="icon-android-earth"/>
          <span xid="span2">联系我们</span>
        </a>
      </li>
      <li class="x-menu-divider divider" xid="divider2"/>
      <li class="x-menu-item" xid="item3">
        <a component="$UI/system/components/justep/button/button" class="btn btn-link"
          label="个人中心" xid="button4" icon="icon-ios7-calendar-outline">
          <i xid="i4" class="icon-ios7-calendar-outline"/>
          <span xid="span4">个人中心</span>
        </a>
      </li>
      <li class="x-menu-divider divider" xid="divider1"/>
    </ul>
  </div>
2、titleBar：改变背景颜色和前景颜色
  • 增加titleBar组件
  • 通过css修改titleBar组件的背景颜色
  • titleBar组件左右侧区域分别插入button组件，并设置icon和class属性
  • 通过css修改button组件图标和文字的大小和颜色

代码示例：

  <div component="$UI/system/components/justep/titleBar/titleBar"
    class="x-titlebar barckColor"
    xid="titleBar2">
    <div class="x-titlebar-left" xid="div4">
      <a component="$UI/system/components/justep/button/button"
        class="btn btn-link btn-icon-top button"
        label="我的" xid="button3" icon="icon-ios7-contact">
        <i xid="i3" class="icon-ios7-contact"/>
        <span xid="span3">我的</span>
      </a>
    </div>
    <div class="x-titlebar-title" xid="div5">
      <div class="form-group has-feedback text-muted" xid="formGroup1">
        <input component="$UI/system/components/justep/input/input"
          class="form-control input-sm"
          bind-click="seachBtnClick" xid="input1"/>
        <i class="icon-ios7-search-strong form-control-feedback" xid="col1"/>
      </div>
    </div>
    <div class="x-titlebar-right reverse" xid="div6">
      <a component="$UI/system/components/justep/button/button"
        class="btn btn-link btn-icon-top button"
        label="消息" xid="button4" icon="icon-chatbubbles">
        <i xid="i4" class="icon-chatbubbles"/>
        <span xid="span4">消息</span>
      </a>
    </div>
  </div>

  .x-titlebar.barckColor{ background-color:#1ebda7; color:#000;}
  .x-titlebar .btn-link{ height:auto;}
  .btn.button{ margin:0; padding:0 12px;}
  .button i{ font-size:26px;}
  .button span{ font-size:12px; }

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

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