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

MUI组件二：复选框、对话框、图片轮播、图标和输入框

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

标签：

1、checkbox（复选框）

   checkbox常用于多选的情况，比如批量删除、添加群聊等；

DOM结构

<div class="mui-input-row mui-checkbox">
  <label>checkbox示例</label>
  <input name="checkbox1" value="Item 1" type="checkbox" checked>
</div>
默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：
<div class="mui-input-row mui-checkbox mui-left">
  <label>checkbox左侧显示示例</label>
  <input name="checkbox1" value="Item 1" type="checkbox">
</div>

若要禁用checkbox，只需在checkbox上增加disabled属性即可；

代码块激活字符: mckeckbox

<!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">checkbox（复选框）</h1>
</header>
<div class="mui-content mui-active">
<div class="mui-input-row mui-checkbox ">
    <label>Checkbox</label>
    <input name="Checkbox" type="checkbox" checked>
</div>
<div class="mui-input-row mui-checkbox mui-left">
  <label>checkbox</label>
  <input name="checkbox1" type="checkbox" checked >
</div>
<div class="mui-input-row mui-checkbox mui-disabled">
    <label>disabled checkbox</label>
    <input name="checkbox" type="checkbox" disabled="disabled">
</div>
</div>
</body>
</html>
技术分享


2、dialog（对话框）

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

   mui会根据ua判断,弹出原生对话框还是h5绘制的对话框,在基座中默认会弹出原生对话框,可以配置type属性,使得弹出h5模式对话框

   两者区别:1.原生对话框可以跨webview,2.h5对话框样式统一而且可以修改对话框属性或样式。mui v3.0 版本的dialog控件支持换行（\n）显示

（1）、.alert( message, title, title, btnValue, callback, [, type] )

     message：Type: String，提示对话框上显示的内容

     title：Type: String，提示对话框上显示的标题

     btnValue：Type: String，提示对话框上按钮显示的内容

     callback：Type: Function，提示对话框上关闭后的回调函数

     type：Value: ‘div‘，是否使用h5绘制的对话框

技术分享

（2）、.confirm( message, title, title, btnValue, callback, [, type] )

     message：Type: String，提示对话框上显示的内容

     title：Type: String，提示对话框上显示的标题

     btnValue：Type: Array，提示对话框上按钮显示的内容

     callback：Type: Function，提示对话框上关闭后的回调函数

     type：Value: ‘div‘，是否使用h5绘制的对话框

技术分享

（3）、.prompt( message, placeholder, title, title, btnValue, callback, [, type] )

     message：Type: String，提示对话框上显示的内容

     placeholder：Type: String，编辑框显示的提示文字

     title：Type: String，提示对话框上显示的标题

     btnValue：Type: Array，提示对话框上按钮显示的内容

     callback：Type: Function，提示对话框上关闭后的回调函数

     type：Value: ‘div‘，是否使用h5绘制的对话框

   如果有定制对话框样式的需求(只能修改h5模式对话框)可以在mui.css中修改.mui-popup类下的样式。如果需要修改DOM结构可以按照以下方式处理.

     //修改弹出框默认input类型为password
     mui.prompt('text','deftext','title',['true','false'],null,'div')
     document.querySelector('.mui-popup-input input').type='password'
技术分享

（4）、.toast( message )

     message ：Type: String，自动消失提示框

技术分享

（5）、.closePopup()(只能关闭h5模式的对话框)关闭最后一次弹出的对话框

（6）、.closePopups()(只能关闭h5模式的对话框)关闭所有对话框

代码块激活字符: mdalert mdconfirm mdprompt mdtoast mdclosepopup mdclosepopups


3、gallery（图片轮播）

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

（1）、DOM结构

  默认不支持循环播放，DOM结构如下：

<div class="mui-slider">
  <div class="mui-slider-group">
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
  </div>
</div>

  假设当前图片轮播中有1、2、3、4四张图片，从第1张图片起，依次向左滑动切换图片，当切换到第4张图片时，继续向左滑动，接下来会有两种效果：

  支持循环：左滑，直接切换到第1张图片；

  不支持循环：左滑，无反应，继续显示第4张图片，用户若要显示第1张图片，必须连续向右滑动切换到第1张图片；

  当显示第1张图片时，继续右滑是否显示第4张图片，是同样问题；这个问题的实现需要通过.mui-slider-loop类及DOM节点来控制；

  若要支持循环，则需要在.mui-slider-group节点上增加.mui-slider-loop类，同时需要重复增加2张图片，图片顺序变为：4、1、2、3、4、1，代码示例如下：

<div class="mui-slider">
  <div class="mui-slider-group mui-slider-loop">
    <!--支持循环，需要重复图片节点-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
    <!--支持循环，需要重复图片节点-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
  </div>
</div>


（2）、JS Method

   mui框架内置了图片轮播插件，通过该插件封装的JS API，用户可以设定是否自动轮播及轮播周期，如下为代码示例：

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});

   因此若希望图片轮播不要自动播放，而是用户手动滑动才切换，只需要通过如上方法，将interval参数设为0即可。

   若要跳转到第x张图片，则可以使用图片轮播插件的gotoItem方法，例如：

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider().gotoItem(index);//跳转到第index张图片，index从0开始；

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

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});


代码块激活字符: msl

<!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">gallery（图片轮播）</h1>
</header>
<div class="mui-content mui-active">
<h4>图文表格</h4>
<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="http://placehold.it/400x300">
            <div class="mui-media-body">文字说明1</div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-6">
        <a href="#">
            <img class="mui-media-object" src="http://placehold.it/400x300">
            <div class="mui-media-body">文字说明2</div>
        </a>
    </li>
</ul>
<h4>图片轮播</h4>
<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="http://placehold.it/400x300">
      </a>
    </div>
    <!-- 第一张 -->
    <div class="mui-slider-item">
      <a href="#">
        <img src="http://placehold.it/400x300">
      </a>
    </div>
    <!-- 第二张 -->
    <div class="mui-slider-item">
      <a href="#">
        <img src="http://placehold.it/400x300">
      </a>
    </div>
    <!-- 第三张 -->
    <div class="mui-slider-item">
      <a href="#">
        <img src="http://placehold.it/400x300">
      </a>
    </div>
    <!-- 第四张 -->
    <div class="mui-slider-item">
      <a href="#">
        <img src="http://placehold.it/400x300">
      </a>
    </div>
    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
    <div class="mui-slider-item mui-slider-item-duplicate">
      <a href="#">
        <img src="http://placehold.it/400x300">
      </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>
</div>
<h4>slider插件</h4>
<div class="mui-slider">
  <div class="mui-slider-group">
    <!--第一个内容区容器-->
    <div class="mui-slider-item">
      <!-- 具体内容 -->
    </div>
    <!--第二个内容区-->
    <div class="mui-slider-item">
      <!-- 具体内容 -->
    </div>
  </div>
</div>
</div>
</body>
</html>

技术分享

 

 

4、icon(图标)

   mui默认提供了手机App开发常用的字体图标，使用时，只需要在span节点上分别增加.mui-icon、.mui-icon-name两个类即可（name为图标名称，例如：weixin、weibo等），如下代码即可显示一个微信图标：

<span class="mui-icon mui-icon-weixin"></span>

代码块激活字符: micon

<!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">icon（图标）</h1>
</header>
<div class="mui-content mui-active">
<span class="mui-icon mui-icon-weixin"></span>
<span class="mui-icon mui-icon-qq"></span>
<span class="mui-icon mui-icon-circle"></span>
<span class="mui-icon mui-icon-help-filled"></span>
</div>
</body>
</html>

技术分享

 

5、input（输入增强）

  mui目前提供的输入增强包括：快速删除和语音输入两项功能。要删除输入框中的内容，使用输入法键盘上的删除按键，只能逐个删除字符，mui提供了快速删除能力，只需要在对应input控件上添加.mui-input-clear类，当input控件中有内容时，右侧会有一个删除图标，点击会清空当前input的内容；另外，为了方便快速输入，mui集成了HTML5+的语音输入，只需要在对应input控件上添加.mui-input-speech类，就会在该控件右侧显示一个语音输入的图标，点击会启用科大讯飞语音输入界面。

代码块激活字符: minput

<!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">
<div class="mui-input-row">
    <label>Input</label>
    <input type="text" placeholder="普通输入框">
</div>
<div class="mui-input-row">
    <label>Input</label>
    <input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div>
<div class="mui-input-row mui-search">
    <input type="search" class="mui-input-clear" placeholder="收索框">
</div>
<div class="mui-input-row">
    <label>Input</label>
    <input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div>
</div>
</body>
</html>

技术分享

 

 

MUI组件二：复选框、对话框、图片轮播、图标和输入框

标签：

原文地址：http://blog.csdn.net/qq_27626333/article/details/51890729
踩
(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
迷上了代码！