码迷，mamicode.com
首页 > 其他好文 > 详细

MUI组件三：列表、遮罩蒙版、数字输入框、侧滑导航和弹出菜单

时间：2016-07-13 16:41:52      阅读：389      评论：0      收藏：0      [点我收藏+]

标签：

1、list（列表）

  列表是常用的UI控件，mui封装的列表组件比较简单，只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可，如下为示例代码

<ul class="mui-table-view">
<li class="mui-table-view-cell">Item 1</li>
<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 3</li>
</ul>

  点击列表，对应列表项显示灰色高亮，若想自定义高亮颜色，只需要重写.mui-table-view-cell.mui-active即可，如下：

/*点击变蓝色高亮*/

.mui-table-view-cell .mui-active{

background-color: #0062CC;

}

若右侧需要增加导航箭头，变成导航链接，则只需在li节点下增加a子节点，并为该a节点增加.mui-navigate-right类即可，如下：

<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 1</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 2</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 3</a>
</li>
</ul>


mui支持将数字角标、按钮、开关等控件放在列表中；mui默认将数字角标放在列表右侧显示，代码如下：

 

<ul class="mui-table-view">
<li class="mui-table-view-cell">Item 1
<span class="mui-badge mui-badge-primary">11</span>
</li>
<li class="mui-table-view-cell">Item 2
<span class="mui-badge mui-badge-success">22</span>
</li>
<li class="mui-table-view-cell">Item 3
<span class="mui-badge">33</span>
</li>
</ul>


代码块激活字符:    mlist

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">input（输入表单）</h1>
</header>
<div class="mui-content mui-active">
<ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
                Item 1
            </a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
                 Item 2
            </a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
                 Item 3
            </a>
        </li>
</ul>
<h4>图文列表靠右</h4>
<ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-right" src="img/HBuilder.png">
            <div class="mui-media-body">
                幸福
                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-right" src="img/HBuilder.png">
            <div class="mui-media-body">
                木屋
                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-right" src="img/HBuilder.png">
            <div class="mui-media-body">
                CBD
                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
            </div>
        </a>
    </li>
</ul>
<h4>图文列表靠左</h4>
<ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="img/HBuilder.png">
            <div class="mui-media-body">
                幸福
                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="img/HBuilder.png">
            <div class="mui-media-body">
                木屋
                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="img/HBuilder.png">
            <div class="mui-media-body">
                CBD
                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
            </div>
        </a>
    </li>
</ul>
</div>
</body>
</html>
技术分享

 

2、遮罩蒙版

   在popover、侧滑菜单等界面，经常会用到蒙版遮罩；比如popover弹出后，除popover控件外的其它区域都会遮罩一层蒙版，用户点击蒙版不会触发蒙版下方的逻辑，而会关闭popover同时关闭蒙版；再比如侧滑菜单界面，菜单划出后，除侧滑菜单之外的其它区域都会遮罩一层蒙版，用户点击蒙版会关闭侧滑菜单同时关闭蒙版。

遮罩蒙版常用的操作包括：创建、显示、关闭，如下代码：

var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调；

mask.show();//显示遮罩

mask.close();//关闭遮罩

注意：关闭遮罩仅会关闭，不会销毁；关闭之后可以再次调用mask.show();打开遮罩；

mui默认的蒙版遮罩使用.mui-backdrop类定义（如下代码），若需自定义遮罩效果，只需覆盖定义.mui-backdrop即可；

.mui-backdrop {

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 998;

    background-color: rgba(0,0,0,.3);

}

代码块激活字符:   mmask

3、numbox(数字输入框)

   mui提供了数字输入框控件，可直接输入数字，也可以点击“+”、“-”按钮变换当前数值；默认numbox控件dom结构比较简单，如下：

<div class="mui-numbox">
  <!-- "-"按钮，点击可减小当前数值 -->
  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
  <input class="mui-numbox-input" type="number" />
  <!-- "+"按钮，点击可增大当前数值 -->
  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>

可通过data-*自定义属性设置数字输入框的参数，如下：

numbox自定义参数

（1）、data-numbox-min，输入框允许使用的最小值，默认无限制

（2）、data-numbox-max，输入框允许使用的最大值，默认无限制

（3）、data-numbox-step，每次点击“+”、“-”按钮变化的步长，默认步长为1

示例：设置取值范围为0~100，每次变化步长为10，则代码如下

<div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>
  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
  <input class="mui-numbox-input" type="number" />
  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>

代码块激活字符: mnumbox

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">number box（数字输入框）</h1>
</header>
<div class="mui-content mui-active">
<div class="mui-numbox" data-numbox-step='10' data-numbox-min='10' data-numbox-max='1000'>
    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
    <input class="mui-input-numbox" type="number" />
    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div>
</div>
</body>
</html>
技术分享

 

 

4、offcanvas侧滑导航

   mui提供了两种侧滑导航实现：webview模式和div模式，两种模式各有优劣，适用于不同的场景。

（1）、webview模式

   主页面和菜单内容在不同的webview中，两个页面根据内容需求分别组织DOM结构，mui对其DOM结构无特殊要求，故其有如下优点：

    a、菜单内容是单独的webview，故可被多个页面复用；

    b、菜单内容在单独的webview中，菜单区域的滚动不影响主界面，故可使用原生滚动，滚动更为流畅；

另一方面，webview模式也有其缺点：

    a、不支持拖动手势（跟手拖动）；

    b、主页面、菜单不同webview实现，因此若需交互（如：点击菜单触发主页面内容变化），需使用自定义事件实现跨webview通讯；

（2）、div模式

   主页面和菜单内容在同一个webview下，嵌套在特定结构的div中，通过div的移动动画模拟菜单移动；故该模式有如下优点：

    a、支持拖动手势（跟手拖动）；

    b、主页面、菜单在一个页面中，可通过JS轻松实现两者交互（如：点击菜单触发主页面内容变化），没有跨webview通讯的烦恼；

   另一方面，div模式也有其缺点：

    a、不支持菜单内容在多页面的复用，需每个页面都生成对应的菜单节点；

    b、主界面和菜单内容的滚动互不影响，因此会使用div区域滚动，在低端Android手机且滚动内容较多时，可能会稍显卡顿；

   div模式支持不同的动画效果，每种动画效果需遵从不同的DOM构造；下面我们以右滑菜单为例（左滑菜单仅需将菜单父节点上的mui-off-canvas-left换成mui-off-canvas-right即可），说明每种动画对应的DOM结构。

动画1：主界面移动、菜单不动

<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
  <!-- 菜单容器 -->
  <aside class="mui-off-canvas-left">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 菜单具体展示内容 -->
        ...
      </div>
    </div>
  </aside>
  <!-- 主页面容器 -->
  <div class="mui-inner-wrap">
    <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
      <h1 class="mui-title">标题</h1>
    </header>
    <div class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 主界面具体展示内容 -->
        ...
      </div>
    </div>  
  </div>
</div>


动画2：主界面不动、菜单移动

    该种动画要求的DOM结构和动画1的DOM结构基本相同，唯一差别就是需在侧滑导航根容器class上增加一个mui-slide-in类

动画3：主界面、菜单同时移动

    该种动画要求的DOM结构较特殊，需将菜单容器放在主页面容器之下

<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
  <!-- 主页面容器 -->
  <div class="mui-inner-wrap">
     <!-- 菜单容器 -->
    <aside class="mui-off-canvas-left">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <!-- 菜单具体展示内容 -->
          ...
        </div>
      </div>
    </aside>
    <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
      <h1 class="mui-title">标题</h1>
    </header>
    <!-- 主页面内容容器 -->
    <div class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 主界面具体展示内容 -->
        ...
      </div>
    </div>  
  </div>
</div>

mui支持多种方式显示div模式的侧滑菜单：

 （1）、在主界面向右拖动（drag）；

 （2）、点击含有mui-action-menu类的控件；

 （3）、Android手机按menu键；

 （4）、通过JS API触发，如下：

       mui(‘.mui-off-canvas-wrap‘).offCanvas(‘show‘);

同样，mui支持多种方式关闭div模式的侧滑菜单：

 （1）、在手机屏幕上任意位置向左拖动（drag）；

 （2）点击主界面内任意位置；

 （3）Android手机按menu键；

 （4）Android手机按back键；

 （5）通过JS API触发，如下：

     mui(‘.mui-off-canvas-wrap‘).offCanvas(‘close‘);

代码块激活字符:   moffcanvas

 

5、popover弹出菜单

  mui框架内置了弹出菜单插件，弹出菜单显示内容不限，但必须包裹在一个含.mui-popover类的div中，如下即为一个弹出菜单内容：

<div id="popover" class="mui-popover">
  <ul class="mui-table-view">
    <li class="mui-table-view-cell"><a href="#">Item1</a></li>
    <li class="mui-table-view-cell"><a href="#">Item2</a></li>
    <li class="mui-table-view-cell"><a href="#">Item3</a></li>
    <li class="mui-table-view-cell"><a href="#">Item4</a></li>
    <li class="mui-table-view-cell"><a href="#">Item5</a></li>
  </ul>
</div>

  要显示、隐藏如上菜单，mui推荐使用锚点方式，例如：

<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>

  点击如上定义的按钮，即可显示弹出菜单，再次点击弹出菜单之外的其他区域，均可关闭弹出菜单；这种使用方式最为简洁。

若希望通过js的方式控制弹出菜单，则通过如下一个方法即可：

mui(‘.bottomPopover‘).popover(status,[anchor]);

  status：‘show‘显示popover，‘hide‘隐藏popover、‘toggle‘自动识别处理显示隐藏状态

  [anchor]：anchorElement锚点元素

mui(‘.bottomPopover‘).popover(‘toggle‘);//show hide toggle

//传入toggle参数，用户也无需关心当前是显示还是隐藏状态，mui会自动识别处理；

mui(‘.mui-popover‘).popover(‘toggle‘,document.getElementById("openPopover"));

代码块激活字符: mpopover

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">popover（弹出菜单）</h1>
</header>
<div class="mui-content mui-active">
 <style type="text/css">
 #popover{
 	height: 100px;
 	width:200px;
 }
 </style>
<div id="popover" class="mui-popover">
            <ul class="mui-table-view">
               <li class="mui-table-view-cell"><a href="#">Item1</a></li>
               <li class="mui-table-view-cell"><a href="#">Item2</a></li>
               <li class="mui-table-view-cell"><a href="#">Item3</a></li>
               <li class="mui-table-view-cell"><a href="#">Item4</a></li>
               <li class="mui-table-view-cell"><a href="#">Item5</a></li>
            </ul>
        </div>
<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>
</div>
</body>
</html>

技术分享

 

MUI组件三：列表、遮罩蒙版、数字输入框、侧滑导航和弹出菜单

标签：

原文地址：http://blog.csdn.net/qq_27626333/article/details/51891018
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！