文档中心

按钮

按钮是BingoTouch的核心部件,大部分组件主要构成元素,理解了按钮,也就理解了大部分的组件使用。意思是可以在任意标签上面使用。
示例:

<div data-role="BTButton">
    按钮
</div>
<div data-role="BTButton" data-type="image"  data-url="button.html">
    <img src="css/images/icon-more.png" alt=""/>按钮
</div>

更多按钮属性请查看:modules/ui-control/button_section.html

按钮群组

按钮组合是个容器,把按钮放进里面就能组合成想要的效果,同时拥有按钮所有的属性效果。
示例:

<div class="btn-group">
    <div data-role="BTButton">
       返回
    </div>
    <div data-role="BTButton">
       刷新
    </div>
    <div data-role="BTButton">
       菜单
    </div>
</div>

更多按钮属性请查看:modules/ui-control/group_section.html

导航栏

导航栏是整个页面的重要组成部分,它可以放在顶部,也可以放在底部,当然,它也可以放在页面中间,当tab使用。
示例:

<div class="navbar">
    <ul class="grid-c">
       <li>
         <div data-role="BTButton" class="btn-active" >首页</div>
       </li>
       <li><div data-role="BTButton" >栏目</div></li>
       <li><div data-role="BTButton" >设置</div></li>
    </ul>
</div>  

更多导航栏属性请查看:modules/ui-control/navbar_section.html

列表菜单

列表菜单是整个手机页面中最常见的组件之一,由按钮跟列表组合构成,按钮有的属性,列表也都有。
示例:

<ul class="list-view">
    <li>
        <div data-role="BTButton" data-icon="icon-chevron-right" 
          data-iconpos="right">
         <img src="images/icon01.png" alt=""/>列表按钮
       </div>
    </li>
    <li>
       <div data-role="BTButton" data-icon="icon-chevron-right"
          data-iconpos="right">
         <img src="images/icon02.png" alt=""/>列表按钮
       </div>
    </li>
    <li>
       <div data-role="BTButton" data-icon="icon-chevron-right"
          data-iconpos="right">
         <img src="images/icon03.png" alt=""/>列表按钮
       </div>
    </li>
</ul>

更多属性请查看:modules/ui-control/listview_section.html

折叠菜单

折叠菜单有2种方式,一种是在列表菜单的基础上进行改造,代码都跟列表菜单的一样,只需要做一小点更改便可,可以更列表混合使用,列表有的属性,这个也可以有;另外一种方式是传统的web方式。
示例:

<ul class="list-view list-collapse">
    <li>
       <div data-role="BTButton" data-icon="icon-chevron-down"
          data-iconpos="right">折叠按钮1</div>
       <div class="collapse-content">
         <img src="images/map.png" alt=""/>
       </div>
    </li>
    <li>
       <div data-role="BTButton" data-icon="icon-chevron-down" 
          data-iconpos="right">折叠按钮2</div>
       <div class="collapse-content">
         <img src="images/map.png" alt=""/>   
       </div>
    </li>
</ul>

更多属性请查看:modules/ui-control/collapse_section.html

下拉菜单

跟select不同,这个的下拉菜单是在按钮下方,按钮与列表的组合效果。按钮有的属性,这里也都有。
示例:

<div class="dropdown" data-menupos="bottom" data-inline="true">
    <div data-role="BTButton" data-theme="a"
        data-icon="icon-chevron-down"
        data-iconpos="right" align="center">下拉菜单</div>
    <ul class="list-view" data-theme="b" data-corner="all">
       <li><div data-role="BTButton">Button1</div></li>
       <li><div data-role="BTButton">Button2</div></li>
       <li><div data-role="BTButton">Button3</div></li>
       <li><div data-role="BTButton">Button4</div></li>
    </ul>
</div>

更多属性请查看:modules/ui-control/dropdown_section.html

日期时间控件

日期时间控件有2种风格,一种是可以编辑的,一种是滚轮形式的。调用方式同样有两种,一种是select触发,一种是按钮触发。
示例(示例效果只能在手机查看):

<div data-role="BTSelect" type="date" ><span>请选择日期1</span></div>
<div data-role="BTSelect" type="time"><span>请选择时间2</span></div>
<div data-role="BTSelect" type="wheeldate"><span>请选择日期3</span></div>
<div data-role="BTSelect" type="wheeltime"><span>请选择时间4</span></div>

更多属性请查看:modules/ui-control/datepicker_section.html