文档中心

弹出框组件

弹出框组件是由Web实现,提供一系列内置好的常用弹出框。
示例:

ui.popup({
    html: '<div style="height: 100px;text-align: center;font-size: 20px;
          font-weight: 600;margin-top: 10px;color:#E74C3C ">随意设计你的弹出框吧</div>',
    pos : 'center'
});

示例演示请查看:modules/ui-component/popup_section.html
组件API请查看:http://dev.bingocc.cc:8060/bingotouch-ui-doc/classes/ui.Popup.html

图片轮播

图表轮播,可以快速完成图片轮播界面的开发。
示例 (示例手指滑动效果只能在终端查看):
HTML:

<!-- 每个div中可以放置自定义的DOM,注意slider存在一些默认的样式,如果不需要就手动覆盖-->  
<div id="slider">
    <div>
        <a href="#"><img lazyload="images/1.jpg"></a>
        <p>1,那一夜的蝴蝶、花香、窗台</p>
    </div>
    <div>
        <a href="#"><img lazyload="images/2.jpg"></a>
        <p>2,花世界之猫猫奇遇记</p>
    </div>
    <div>
        <a href="#"><img lazyload="images/3.jpg"></a>
        <p>3,大城小屋</p>
    </div>
    <div>
        <a href="#"><img lazyload="images/4.jpg"></a>
        <p>4,等一只猫</p>
    </div>
    <div>
        <a href="#"><img lazyload="images/5.jpg"></a>
        <p>5,阿大在做什么梦呀</p>
    </div>
</div> 

JS:

$('#slider').slider({
    autoPlayTime : 3000,
    animationTime : 300
});

示例演示请查看:modules/ui-component/slider_section.html
组件API请查看:http://dev.bingocc.cc:8060/bingotouch-ui-doc/classes/ui.Slider.html

滑动导航

滑动导航
示例:
HTML:

<div id="nav-smartSetup">
    <ul>
        <li><a href="javascript:void(0)">要闻</a></li>
        <li><a href="javascript:void(0)">国内</a></li>
        <li><a href="javascript:void(0)">国际</a></li>
        <li><a href="javascript:void(0)">军事</a></li>
        <li><a href="javascript:void(0)">社会</a></li>
        <li><a href="javascript:void(0)">娱乐</a></li>
        <li><a href="javascript:void(0)">女人</a></li>
        <li><a href="javascript:void(0)">体育</a></li>
        <li><a href="javascript:void(0)">科技</a></li>
        <li><a href="javascript:void(0)">互联网</a></li>
        <li><a href="javascript:void(0)">教育</a></li>
        <li><a class="cur" href="javascript:void(0)">财经</a></li>
        <li><a href="javascript:void(0)">房产</a></li>
        <li><a href="javascript:void(0)">汽车</a></li>
    </ul>
</div>

JS:

$('#nav-smartSetup').navigator();

示例演示请查看:modules/ui-component/navigator_section.html
组件API请查看:http://dev.bingocc.cc:8060/bingotouch-ui-doc/classes/ui.Navigator.html

抽屉菜单组件

抽屉菜单,也称为侧边菜单栏。
示例:
HTML:

<aside id="left_push_aside" data-position="left" data-transition="push">
    <div class="header">左侧菜单</div>
    <div class="center">
       ...
    </div>
</aside>
<section id="demo_section" data-transition="slide">
    <div data-role="BTButton" data-target="left_push_aside">push</div>
</section>

JS:

ui.Menu.init({
    sectionId : 'demo_section',
    duration : 200 
});

示例演示请查看:modules/ui-component/menu_section.html
组件API请查看:http://dev.bingocc.cc:8060/bingotouch-ui-doc/classes/ui.Menu.html

滑动列表

SwipeListview,可设置列表列的操作按钮,左右滑动显示按钮。 注意列表宽度必须占满屏幕宽度
示例(示例手指滑动效果只能在终端查看):
HTML:

<ul class="list-view">
    <li>
       <div data-role="BTButton" data-icon="icon-chevron-right" data-iconpos="right">
         <div class="thumbnail">
          <span class="icon-pushpin"></span>
         </div>
         <div class="thumbnail-text">
          <h3>List1</h3>
          <p>11111111111</p>
         </div>
       </div>
    </li>
    <li>
       <div data-role="BTButton"  data-icon="icon-chevron-right" data-iconpos="right">
         <div class="thumbnail">
          <span class="icon-hammer"></span>
         </div>
         <div class="thumbnail-text">
          <h3>List2</h3>
          <p>22222222222</p>
         </div>
       </div>
    </li>
    <li>
       <div data-role="BTButton"  data-icon="icon-chevron-right" data-iconpos="right">
         <div class="thumbnail">
          <span class="icon-newspaper"></span>
         </div>
         <div class="thumbnail-text">
          <h3>List3</h3>
          <p>33333333333</p>
         </div>
       </div>
    </li>
</ul>

JS:

ui.SwipeListview.init("#swipe_listview_section .list-view",{
    leftBtn:[{color:'#8B0000',title:'左按钮1', width:'120', onTap: function(liDom){
          alert("左1")
               }}],
    rightBtn:[{color:'#8B0000',title:'右按钮1', width:'100', onTap : function(liDom){

          alert("右按钮1")
          //$(liDom).parent().remove();
                 }},
           {color:'#228B22',title:'右按钮2', width:'100', onTap : function(liDom){

             alert("右按钮2")
              }}]
});  

示例演示请查看:modules/ui-component/swipe_listview_section.html
组件API请查看:http://dev.bingocc.cc:8060/bingotouch-ui-doc/classes/ui.SwipeListview.html

底部Tab组件

底部Tab组件,结合导航栏控件,实现一个页面有多个Tab页面切换的效果。
示例:
HTML:

<section id="tab_section" data-transition="slide">
    <tab id="tab-msg" class="active" >    
         <h1>消息消息</h1>
    </tab>
    <tab id="tab-user">
        <h1>通讯录通讯录</h1>
    </tab>
    <tab id="tab-find">
        <h1>发现发现</h1>       
    </tab>  
    <tab id="tab-me">
        <h1>我我</h1>           
    </tab>  
    <div class="footer" data-fixed="bottom">    
        <div class="navbar">
            <ul class="grid-d">
                <li>
                    <div data-role="BTButton" class="btn-active"
                  data-target="tab-msg" 
                  data-icon="icon-bubble" data-iconpos="top">消息</div>
                </li>
                <li>
                    <div data-role="BTButton" data-target="tab-user" 
                  data-icon="icon-user" data-iconpos="top">通讯录</div>
                </li>
                <li>
                    <div data-role="BTButton" data-target="tab-find" 
                  data-icon="icon-search" data-iconpos="top">发现</div>
                </li>
                <li>
                    <div data-role="BTButton" data-target="tab-me"
                  data-icon="icon-cog2" data-iconpos="top">我</div>
                </li>
            </ul>
        </div>  
    </div>
</section>

JS:

  ui.Tab({
    sectionId:"tab_section",
    onBeforeToggle :function(targetId){
        return true; //返回true则允许切换Tab
    },
    //只有在onBeforeToggle返回true,这个方法才会在Tab切换后被调用
    onAfterToggle : function(){ 
    }
  });

示例演示请查看:modules/ui-component/tab_section.html
组件API请查看:http://dev.bingocc.cc:8060/bingotouch-ui-doc/classes/ui.Tab.html

iscroll

是页面滚动更加平滑的组件,这里讲解几个特殊的用法。

页面双击放大

示例(示例效果只能在终端查看):
HTML:

<div id="zoom-wrapper">
    <div>
       ......
    </div>
</div>

JS:

ui.IScroll.zoom("#zoom-wrapper"); //zoom selector

示例演示请查看:modules/ui-component/iscroll_zoom_section.html
组件API请查看:http://dev.bingocc.cc:8060/bingotouch-ui-doc/classes/ui.IScroll.html

上拉/下拉刷新

示例:
HTML:

<!-- 要去掉iscroll-wrapper, 也不要将上拉/下拉刷新的父div命名为iscroll-wrapper -->
<div class="pullrefresh-wrapper">
    <div>
        <ul id="thelist" class="list-view" >
            <li><div data-role="BTButton">Pretty row 1</div></li>   
            <li><div data-role="BTButton">Pretty row 2</div></li>   
            <li><div data-role="BTButton">Pretty row 3</div></li>   
            <li><div data-role="BTButton">Pretty row 4</div></li>   
            <li><div data-role="BTButton">Pretty row 5</div></li>   
            <li><div data-role="BTButton">Pretty row 6</div></li>   
         </ul>   
    </div>
</div>  

JS:

//一般上拉、下拉刷新只选择一种使用, 同时出现两种只为方便演示
ui.IScroll.init(".pullrefresh-wrapper",{
    scrollBar : true,                //是否出现滚动条
    enablePullDown: true,            //是否允许下拉刷新
    enablePullUp: true,              //是否允许上拉刷新
    pullDownAction: pullDownActionDemo, //下拉刷新调用方法
    pullUpAction: pullUpActionDemo      //上拉刷新调用方法
});

//refreshCallback必须执行,这是执行完业务逻辑之后IScroll状态刷新的回调。
//例如是ajax请求,那这条语句就放在ajax的callback的最后一条。
//PS:之所以要提供回调处理,是因为IScroll不知道业务逻辑什么时候结束
function pullDownActionDemo(refreshCallback){
    //setTimeout是为了模拟ajax请求数据的时间
    setTimeout(function () {    
        var $list = $("#thelist");
        for (i=0; i<3; i++) {

            var data={
                "title":'我是下拉新增的 第' + (++generatedCount) + '个',
                "style":"color:#f9636f;"
            };

            var html=baidu.template('pullrefresh-template',data);
            $list.prepend(html);
        }

        refreshCallback && refreshCallback(); 
    }, 3500);              
}

function pullUpActionDemo(refreshCallback){
    setTimeout(function () {    
        var $list = $("#thelist");
        for (i=0; i<3; i++) {

            var data={
                "title":'我是上拉新增的 第' + (++generatedCount) + '个',
                "style":"color:#27AE60;"
            };

            var html=baidu.template('pullrefresh-template',data);
            $list.append(html);
        }
        refreshCallback && refreshCallback(); //
    }, 3500);            
}

<script id="pullrefresh-template" type="text/html">
    <li>
        <div data-role="BTButton" data-status="1" style="<%=style%>">
          <span class="btn-text"><%=title%></span>
        </div>
    </li>
</script>

示例演示请查看:modules/ui-component/iscroll_pullrefresh_section.html
组件API请查看:http://dev.bingocc.cc:8060/bingotouch-ui-doc/classes/ui.IScroll.html