MUI从入门到项目实战（六）（MUI组件之dialog、gallery、grid）

一、dialog

 创建并显示对话框，弹出的对话框为非阻塞模式，用户点击对话框上的按钮后关闭( h5模式的对话框也可通过closepopup关闭 )，并通过callback函数返回用户点击按钮的索引值或输入框中的值。

                          

代码如下：

<div class="mui-content mui-scroll-wrapper" id="dialogDemo">
    <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="alertBtn">警告框</button>
    <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="confirmBtn">确认框</button>
    <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="promptBtn">输入框</button>
    <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="toastBtn">自动消失提示框</button>
</div>
<script type="text/javascript">
    (function() {
        var ele = [\'alertBtn\'];
        var btn = [\'是\', \'否\'];
        mui(\'#dialogDemo\').on(\'click\', \'button\', function(e) {
            var target = e.target.id;
            switch (target) {
                case \'alertBtn\':
                    mui.alert(\'欢迎使用MUI\');
                    break;
                case \'confirmBtn\':
                    mui.confirm(\'MUI是个好框架\', \'Hello MUI\', btn, function(e) {
                        e.index == 0 ? mui.toast(\'感谢您的支持!\') : mui.toast(\'MUI 没有得到你的认可,继续加油!\')
                    })
                    break;
                case \'promptBtn\':
                    mui.prompt(\'请输入您对MUI的评语\', \'性能好\', \'Hello MUI\', \'\', function(e) {
                        e.index == 1 && e.value != \'\' && mui.toast(\'谢谢您的评价: \' + e.value)
                    })
                    break;
                case \'toastBtn\':
                    mui.toast(\'欢迎体验Hello MUI\')
                    break;
                default:
                    break;
            }
        })
    })()
</script>

二、gallery

 图片轮播继承自slide插件，因此其DOM结构、事件均和slide插件相同

                    

注意：mui框架会默认初始化当前页面的图片轮播组件；若轮播组件内容为js动态生成时（比如通过ajax动态获取的营销信息），则需要在动态生成完整DOM (包含mui-slider下所有DOM结构) 后，手动调用图片轮播的初始化方法,代码如下：

<div class="mui-slider">
    <div class="mui-slider-group mui-slider-loop">
      <div class="mui-slider-item mui-slider-item-duplicate"><img src="images/3.jpg" /></div>
      <!--第一个内容区容器-->
      <div class="mui-slider-item">
        <!-- 具体内容 -->
        <img src="images/1.jpg"/>
      </div>
      <!--第二个内容区-->
      <div class="mui-slider-item">
        <!-- 具体内容 -->
        <img src="images/2.jpg" />
      </div>
      <!--第三个内容区-->
      <div class="mui-slider-item">
        <!-- 具体内容 -->
        <img src="images/3.jpg" />
      </div>
      <div class="mui-slider-item mui-slider-item-duplicate"><img src="images/1.jpg"/></div>
    </div>
  </div>

  <script type="text/javascript">
    (function() {
        //获得slider插件对象
        var gallery = mui(\'.mui-slider\');
        gallery.slider({
            interval: 3000 //自动轮播周期，若为0则不自动播放，默认为0；
        });
    })()
</script>

三、grid

 MUI 提供了非常简单实用的12列响应式栅格系统。使用时只需在外围容器上添加.mui-row，在列上添加 .mui-col-[sm|xs]-[1-12]，即可

                   

代码如下：

<div class="mui-row">
    <div class="mui-col-sm-6 mui-col-xs-12">
        <div class="mui-table-view-cell">
            <a class="mui-navigate-right">
                Item 1
            </a>
        </div>
    </div>
    <div class="mui-col-sm-6 mui-col-xs-12">
        <div class="mui-table-view-cell">
            <a class="mui-navigate-right">
                Item 1
            </a>
        </div>
    </div>
</div>