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

row组件,行组件。

目录

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

一. 综述

row组件,布局组件,通过一系列的行(row)和列(col)组合来构建页面,内容只能放在列(col)里面,只有列(col)可以作为行(row)的直接子元素,从面板上放到设计器中,默认是三列,每列均分屏幕宽度,可以在组件上添加行,列,调整每列的宽度。对没有设置列宽的列(col)将均分剩余列的宽度,

组件路径:/UI2/system/components/justep/row

组件标识:$UI/system/components/justep/row/row

二. DOM结构

  • 典型的dom结构1
<div component="$UI/system/components/justep/row/row"
  class="x-row" xid="row1">
  <div class="x-col" xid="col1"/>  <!--col元素-->
  <div class="x-col" xid="col2"/>
  <div class="x-col" xid="col3"/>
</div>
  • 典型的dom结构2
<div component="$UI/system/components/justep/row/row"
  class="x-row" xid="row1">
  <div class="x-col" xid="col1">
    <div component="$UI/system/components/justep/row/row"
      class="x-row" xid="row2">
      <div class="x-col" xid="col4"/>
      <div class="x-col" xid="col5"/>
      <div class="x-col" xid="col6"/>
    </div>
  </div>
  <div class="x-col" xid="col2"/>
  <div class="x-col" xid="col3"/>
</div>

三. 样式

row的样式

  • x-row

组件标识class,

  • x-row-top,x-row-center,x-row-bottom

垂直对齐,顶端对齐,居中,底部对齐

col的样式

  • x-col

col的基础样式

  • x-col-10,x-col-20,…,x-col-90

尺寸样式,所占页面宽度的百分比

  • x-col-fixed

尺寸样式,适用于固定宽度的列,在该class的列上设置固定宽度(width:80px)或根据内容宽度变化(width:auto)

  • x-col-offset-10,x-col-offset-20,…,x-col-offset-90

偏移样式,与左边元素的偏移量,

四. 属性

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

五. 方法

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

六. 事件

  • (无)

七. 操作

  • (无)

八. 案例

1、row的使用

row1

  • row的第一个和第三个col的class设为x-col-fixed,并设宽度为80px,中间的col默认设置。

代码示例:

<div component="$UI/system/components/justep/row/row"
  class="x-row" xid="row1">
  <div class="x-col x-col-fixed x-col-center" style="width:80px;"
    xid="col5">
    <label xid="label1"><![CDATA[信息提示]]></label>
  </div>
  <div class="x-col" xid="col6">
    <input component="$UI/system/components/justep/input/input"
      class="form-control" xid="input1" placeHolder="请输入相关信息"/>
  </div>
  <div class="x-col x-col-fixed" xid="col7" style="width:80px;">
    <a component="$UI/system/components/justep/button/button"
      class="btn btn-default" label="申请" xid="button3">
        <i xid="i3"/>
       <span xid="span3">申请</span>
    </a>
  </div>
</div>
2、row的嵌套使用

row

  • 放一个row,去掉一列
  • 在第二列上右键,新增两行,上面的row显示一列,下面的row显示两列
<div component="$UI/system/components/justep/row/row"
  class="x-row clearpadding" xid="row2">
    <div class="x-col x-col-33 clearpadding rowborder" xid="col3">
        <img src="./img/pic1.jpg" alt="" xid="image4"
          class="img-responsive"/>
    </div>
    <div class="x-col x-col-67 clearpadding" xid="col4">
      <div component="$UI/system/components/justep/row/row"
        class="x-row clearpadding" xid="row5">
          <div class="x-col clearpadding" xid="col7">
            <img src="./img/pic2.jpg" xid="image5"
              class="img-responsive"/>
      </div>
    </div>
    <div component="$UI/system/components/justep/row/row"
      class="x-row clearpadding" xid="row6"
        style="border-top:5px solid #f3f3f3">
        <div class="x-col clearpadding rowborder" xid="col12">
            <img src="./img/pic3.jpg" alt="" xid="image6"
              class="img-responsive"/>
        </div>
        <div class="x-col clearpadding" xid="col13">
          <img src="./img/pic4.jpg" alt="" xid="image7"
            class="img-responsive"/>
        </div>
      </div>
   </div>
 </div>
  • 所用样式
.clearpadding{
   padding:0
}
.rowborder{
   border-right: 1px solid #f3f3f3
} 

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

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