Hbulider得前端基础_mui框架总结5_日期(DateTime)&&图片轮播&&图文表格

1.日期:各种日期样式的选择

CSS部分:

html,
            body,
            .mui-content {
                height: 0px;
                margin: 0px;
                background-color: #efeff4;
            }
            h5.mui-content-padded {
                margin-left: 3px;
                margin-top: 20px !important;
            }
            h5.mui-content-padded:first-child {
                margin-top: 12px !important;
            }
            .mui-btn {
                font-size: 16px;
                padding: 8px;
                margin: 3px;
            }
            .ui-alert {
                text-align: center;
                padding: 20px 10px;
                font-size: 16px;
            }
            * {
                -webkit-touch-callout: none;
                -webkit-user-select: none;
            }

<div class="mui-content">
            <div class="mui-content-padded">
                <h5 class="mui-content-padded">常规示例</h5>
                <button id='demo1' data-options='{}' class="btn mui-btn mui-btn-block">选择日期时间 ...</button>
                <h5 class="mui-content-padded">设定年份区间</h5>
                <button id='demo2' data-options='{"type":"date","beginYear":2014,"endYear":2016}' class="btn mui-btn mui-btn-block">选择日期 ...</button>
                <h5 class="mui-content-padded">设定选中的时间</h5>
                <button id='demo3' data-options='{"value":"2015-10-10 10:10","beginYear":2010,"endYear":2020}' class="btn mui-btn mui-btn-block">选择日期时间 ...</button>
                <h5 class="mui-content-padded">指定类型</h5>
                <button id='demo4' data-options='{"type":"date"}' class="btn mui-btn mui-btn-block">选择日期 ...</button>
                <button id='demo5' data-options='{"type":"time"}' class="btn mui-btn mui-btn-block">选择时间 ...</button>
                <button id='demo6' data-options='{"type":"month"}' class="btn mui-btn mui-btn-block">选择月份 ...</button>
                <h5 class="mui-content-padded">自定义数据</h5>
                <button id='demo7' data-options='{"type":"hour","customData":{"h":[{"text":"上午","value":"上午"},{"text":"下午","value":"下午"},{"text":"晚上","value":"晚上"}]},"labels":["年", "月", "日", "时段", "分"]}' class="btn mui-btn mui-btn-block">选择时段 ...</button>
                <div id='result' class="ui-alert"></div>
            </div>
        </div>

js部分:

(function($) {
                $.init();
                var result = $('#result')[0];
                var btns = $('.btn');
                btns.each(function(i, btn) {
                    btn.addEventListener('tap', function() {
                        var optionsJson = this.getAttribute('data-options') || '{}';
                        var options = JSON.parse(optionsJson);
                        var id = this.getAttribute('id');
                        /*
                         * 首次显示时实例化组件
                         * 示例为了简洁，将 options 放在了按钮的 dom 上
                         * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                         */
                        var picker = new $.DtPicker(options);
                        picker.show(function(rs) {
                            /*
                             * rs.value 拼合后的 value
                             * rs.text 拼合后的 text
                             * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                             * rs.m 月，用法同年
                             * rs.d 日，用法同年
                             * rs.h 时，用法同年
                             * rs.i 分（minutes 的第二个字母），用法同年   
                             */
                            result.innerText = '选择结果: ' + rs.text;
                            /*
                             * 返回 false 可以阻止选择框的关闭
                             * return false;
                             */
                            /*
                             * 释放组件资源，释放后将将不能再操作组件
                             * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                             * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                             * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                             */
                            picker.dispose();
                        });
                    }, false);
                });
            })(mui);
            }catch(e){
                //TODO handle the exception
                console.log(e);
            }
           2.图片轮播(默认)

<div class="mui-content">
            <ul class="mui-table-view mui-table-view-chevron">
                <li id="switch" class="mui-table-view-cell">
                    定时轮播
                    <div class="mui-switch">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
            </ul>
        </div>
        <div id="slider" class="mui-slider">
            <div class="mui-slider-group mui-slider-loop">
                <!--额外增加的一个节点(循环轮播:第一个节点是最后一张轮播)-->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                        <img src="images/timg5.jpg" />
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="images/timg1.jpg" />
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="images/timg2.jpg" />
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="images/timg3.jpg" />
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="images/timg4.jpg" />
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="images/timg5.jpg">
                    </a>
                </div>
                <!--额外增加的一个节点(循环轮播:最后一个节点是第一张轮播)-->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                        <img src="images/timg1.jpg">
                    </a>
                </div>
            </div>
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
    </div>

js部分:

<script type="text/javascript">
    mui.init({
        swipeBack:false   //启用右滑关闭功能
    });
    var slider=mui("#slider");
    document.getElementById("switch").addEventListener('toggle',function(e){
        if(e.detail.isActive)
        {
            slider.slider({
                interval:5000
            });
        }else{
            slider.slider({
                interval:0
            });
        }
    });
</script>

图片轮播(带标题)

<div class="mui-content">
            <ul class="mui-table-view mui-table-view-chevron">
                <li id="switch" class="mui-table-view-cell">
                    定时轮播
                    <div class="mui-switch">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
            </ul>
            <div id="slider" class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">
                    <!--额外增加的一个节点(循环轮播:第一个节点是最后一张轮播)-->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="images/timg5.jpg" />
                            <p class="mui-slider-title">幸福时光</p>
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="images/timg1.jpg">
                            <p class="mui-slider-title">青春的岁月</p>
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="images/timg2.jpg">
                            <p class="mui-slider-title">时光之行</p>
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="images/timg3.jpg">
                            <p class="mui-slider-title">城市之光</p>
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="images/timg4.jpg">
                            <p class="mui-slider-title">雕刻时光</p>
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="images/timg5.jpg">
                            <p class="mui-slider-title">幸福时光</p>
                        </a>
                    </div>
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="images/timg1.jpg">
                            <p class="mui-slider-title">青春的岁月</p>
                        </a>
                    </div>
                </div>
                <div class="mui-slider-indicator mui-text-right">
                    <div class="mui-indicator mui-active"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                </div>
            </div>
        </div>

 

 

js部分:

<script type="text/javascript">
    mui.init({
        swipeBack:true  //启用右滑关闭功能
    });
    var slider=mui("#slider");
    document.getElementById("switch").addEventListener('toggle',function(e){
            if (e.detail.isActive) {
                slider.slider({
                    interval:5000
                });
            } else{
                slider.slider({
                    interval:0
                });
            }    
    });
</script>

3.图文表格

<div class="mui-content" style="background-color: #fff;">
            <h5 style="background-color: #EFEFF4;">慢生活</h5>
            <ul class="mui-table-view mui-grid-view">
                <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="#">
                        <img class="mui-media-object" src="images/timg1.jpg"/>
                        <div class="mui-media-body">幸福</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="#">
                        <img class="mui-media-object" src="images/timg2.jpg" />
                        <div class="mui-media-body">青春</div>
                    </a>                    
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="#">
                        <img class="mui-media-object" src="images/timg3.jpg" />
                        <div class="mui-media-body">美好</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="#">
                        <img class="mui-media-object" src="images/timg4.jpg" />
                        <div class="mui-media-body">时尚</div>
                    </a>
                </li>
            </ul>
        </div>

图文表格左右滑动页:

<div class="mui-content">
            <div class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">
                    
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <ul class="mui-table-view mui-grid-view">
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#">
                                    <img  class="mui-media-object" src="images/timg3.jpg">
                                    <div class="mui-media-body">世界的颜色</div>
                                </a>
                            </li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#">
                                    <img class="mui-media-object" src="images/timg4.jpg">
                                    <div class="mui-media-body">静看世界</div>
                                </a>
                            </li>
                        </ul>                        
                    </div>
                    
                    
                   
                    
                    <div class="mui-slider-item">
                        <ul class="mui-table-view mui-grid-view">
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#">
                                    <img class="mui-media-object" src="images/timg1.jpg">
                                    <div class="mui-media-body">青春赞歌</div>
                                </a>
                            </li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#">
                                    <img class="mui-media-object" src="images/timg2.jpg">
                                    <div class="mui-media-body">美丽黄昏</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="mui-slider-item">
                        <ul class="mui-table-view mui-grid-view">
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#">
                                    <img class="mui-media-object" src="images/timg3.jpg">
                                    <div class="mui-media-body">世界的颜色</div>
                                </a>
                            </li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#">
                                    <img class="mui-media-object" src="images/timg4.jpg">
                                    <div class="mui-media-body">静看世界</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <ul class="mui-table-view mui-grid-view">
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#">
                                    <img class="mui-media-object" src="images/timg1.jpg">
                                    <div class="mui-media-body">青春赞歌</div>
                                </a>
                            </li>
                            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                                <a href="#">
                                    <img class="mui-media-object" src="images/timg2.jpg">
                                    <div class="mui-media-body">美丽黄昏</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>        
                <div class="mui-slider-indicator" style="position: static;background-color: #fff;">
                    <span class="mui-action mui-action-previous mui-icon mui-icon-back"></span>
                    <div class="mui-number">
                        <span>1</span>/2
                    </div>
                    <span class="mui-action mui-action-next mui-icon mui-icon-forward"></span>
                </div>
            </div>
        </div>