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

小灰灰 2022-05-16 02:57 321阅读 0赞

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部分:

js部分:

图片轮播(带标题)

<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部分:

3.图文表格

图文表格左右滑动页:

<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>