改变状态栏的颜色
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
 <script type="text/javascript" charset="utf-8">
      mui.init({
      statusBarBackground: '#f7f7f7'
      });
    </script>
 生成顶部导航栏 
在Hbuilder中输入mheader，可以快速生成顶部导航栏。
  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>    //返回键left
  <h1 class="mui-title">mui学习</h1>
  </header>
titile 为图片
<body>
 
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">
                <img src="imgs/navbar_netease@2x.png"/>
        </h1>
    </header>
</body>
除顶部导航、底部选项卡两个控件之外，其它控件都建议放在.mui-content控件内，在Hbuilder中输入mbody，可快速生成包含.mui-content的代码块。
 使用系统集成的图片:
只需要在span节点上分别增加.mui-icon、.mui-icon-name两个类即可（name为图标名称，例如：weixin、weibo等），如下代码即可显示一个微信图标：
<span class="mui-icon mui-icon-weixin"></span>
mui中的图标并不是图片，而是字体
多个图标字体合成一个字体文件，避免每张图片都需要联网请求；
字体可任意缩放，而图片放大会失真、缩小则浪费像素；
可通过css任意改变颜色、设置阴影及透明效果；
 创建tableview 
ul li   class = mui-table-view   
cell   class = mui-table-view-cell
cell上自带有右箭头 class = mui-navigate-right
创建switch 
switch class = mum-switch 添加手势off - on  class = mum-switch-handle
<div class="mui-content mui-fullscreen">
<ul class="mui-table-view">
<li class="mui-table-view-cell">仅在WiFi下载图片
<div id="switch" class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
<a id="clear">清楚缓存</a>
</li>
<li class="mui-table-view-cell">
<a id="about" class="mui-navigate-right">关于36Kr</a>
</li>
  </ul>
</div>
弹框  addEventListener 添加监听事件 点击
<script type="text/javascript" charset="UTF-8" src="js/mui.min.js"></script>
<script type="text/javascript">
mui.plusReady(function(){
document.getElementById("clear").addEventListener('tap', function() {
plus.nativeUI.confirm("确认删除吗?”, function(e){},"提醒", ["确认", "取消”]);
});
});
</script>
actionsheet 长按保存图片到相册
  <script type="text/javascript" charset="UTF-8">
      mui.init({
      gestureConfig:{longtap: true}    //允许长按
      });
      var code = document.getElementById('code');
      //添加监听
      code.addEventListener('longtap', function(){      
      plus.nativeUI.actionSheet({
      cancel : '取消',
      buttons : [{title : '保存到相册'}]
      }, function(e){
      var index = e.index;
      if (e.index == 1) {
      plus.gallery.save(code.src, function () {
      mui.toast('保存成功');
      }, function(){
      mui.toast('保存失败,请重试');
      })
      }
      });
      });
    </script>
生成带有返回箭头的navigation  —mheader 待返回箭头
点击cell跳转另外一个VC    
 
mui.plusReady(function(){
 document.getElementById("about").addEventListener('tap', function() {
//plus.webview.show("about.html", 'slide-in-right', 200);
mui.openWindow({url: "about.html",show:{autoShow:true}});
  });
});
图片居中显示 
<div align="center">
<img src="data:images/logo.png" class="logo"/></div>
文章开头缩进2个文本
.artical {font-size: 14px; text-indent: 2em;}
body .mui.content margin : 0px 来消除navigation的自带的高度
 
mui.plusReady(function() {
//创建子窗口
 plus.webview.currentWebview().append(plus.webview.create('list.html', 'list', {
       top: "44px",
       bottom: "0px"
}));
折叠面板
某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">ItemItemItemItemItemItemItemItemI<br />temItemItemItemItemItem<br /> 1</a>
<div class="mui-collapse-content">
the first page content
</div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">Item 2</a>
<div class="mui-collapse-content">
the second page content
</div>
</li>
<li class="mui-table-view-cell mui-collapse mui-active">
<a class="mui-navigate-right" href="#">Item 3</a>
<div class="mui-collapse-content">
the third page conten
</div>
</li>
</ul>
数字角标 
无需底色，则增加.mui-badge-inverted类
<!--数字角标-->
<span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary mui-badge-inverted">12</span>
<span class="mui-badge mui-badge-success">123</span>
<span class="mui-badge mui-badge-danger">1111</span>
<span class="mui-badge mui-badge-warning">12121</span>
<span class="mui-badge mui-badge-purple">2222</span>
button
无底色、有边框的按钮，增加.mui-btn-outlined类
 
&nbsp;&nbsp;<button class="mui-btn">默认</button>
<button class="mui-btn mui-btn-success">green</button>
<button class="mui-btn mui-btn-danger mui-btn-outlined">red</button>
轮播图
<!--图片轮播-->
<div class="mui-slider">
<div class="mui-slider-group">
<div class="mui-slider-item"><a href="#"><img src="data:images/1.jpg"/></a></div>
<div class="mui-slider-item"><a href="#"><img src="data:images/2.jpg"/></a></div>
<div class="mui-slider-item"><a href="#"><img src="data:images/3.jpg"/></a></div>
<div class="mui-slider-item"><a href="#"><img src="data:images/4.jpg"/></a></div>
</div>
</div>
<!--自动轮播—yans>
<script type="text/javascript">
var gallery = mui('.mui-slider');
gallery.slider({interval:5000});
</script>
图文列表
<!--图文列表-->
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media"><a href="javascript:;"><img src="data:images/8.jpg"/><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="data:images/2.jpg"/><div class="mui-media-body">
    木屋
    <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖</p>
</div></a></li>
 </ul>
个数增减
<!--numbox(数字输入框) 设置取值范围为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 type="number" class="mui-numbox-input" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
侧滑
<!--侧滑-->
<div class="mui-off-canvas-wrap mui-draggable">
<aside class="mui-off-canvas-left">
<div class="mui-scroll-wrapper">
<div class="mui-scalable">
caidanjuti zhanshi d content
</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">
zhujiemian zhanshi content
</div>
</div>
</div>
</div>
弹出菜单
<!--弹出菜单-->
<div id="popover" class="mui-popover">
<ul class="mui-table-view">
  <li class="mui-table-view-cell"><a href="#">Itrem1</a></li>
  <li class="mui-table-view-cell"><a href="#">Itrem2</a></li>
  <li class="mui-table-view-cell"><a href="#">Itrem3</a></li>
  <li class="mui-table-view-cell"><a href="#">Itrem4</a></li>
  <li class="mui-table-view-cell"><a href="#">Itrem5</a></li>
</ul>
</div>
<a href="#popover" id="apenPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>
 
弹出菜单单选款
<!--单选框-->
<div class="mui-input-row mui-radio">
<label>radio</label>
<input name="radio1" type="radio"/>
</div>
<div class="mui-input-row mui-radio">
<label>radio2</label>
<input name="radio1" type="radio"/>
</div>
<script type="text/javascript">
var list = document.querySelector('.mui-table-view.mui-table-view-radio');
list.addEventListener('select', function(e){
console("当前选中的为" + e.detail.el.innerText);
});
</script>
 
<!--语音输入框-->
<div class="mui-input-row">
<label>账号</label>
<input type="text" class="mui-input-speech mui-input-cleat" placeholder="语音输入" />
</div>
<!--搜索框-->
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder=""/>
</div>
<!--带清除按钮的搜索框-->
<div class="mui-input-row">
<input type="search" class="mui-input-clear" placeholder=""/>
</div>
<div class="mui-slider">
    <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <a class="mui-control-item" href="#item1">选项卡1</a>
        <a class="mui-control-item" href="#item2">选项卡2</a>
    </div>
    <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
    <div class="mui-slider-group">
        <div id="item1" class="mui-slider-item mui-control-content mui-active">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">第1个选项卡子项</li>
                <li class="mui-table-view-cell">第1个选项卡子项</li>
            </ul>
        </div>
        <div id="item2mobile" class="mui-slider-item mui-control-content">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">第2个选项卡子项</li>
                <li class="mui-table-view-cell">第2个选项卡子项</li>
            </ul>
        </div>
    </div>
</div>
 
 
 
 
 
 
 

mui学习的更多相关文章

  1. mui学习记录

    1.页面间传值 2.mui如何增加自定义icon图标 http://ask.dcloud.net.cn/article/128 3.设计基于HTML5的APP登录功能及安全调用接口的方式(原理篇) h ...

  2. mui学习笔记

    一.页面刷新问题 1.父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 (1).父页面A代码 window.addEventListener("pageflowrefre ...

  3. H5+ and mui学习记录

    基础 1.H5+ 定义实现了一些调用原生方法的对象 2.其他的原生方法可以通过Native.js调用 webview 3.webview是调用原生界面的H5+对象 4.单个webview只承载单个页面 ...

  4. mui学习链接

    http://dev.dcloud.net.cn/mui/snippet/ http://www.bcty365.com/content-146-2453-1.html hbuilder转rem值: ...

  5. MUI学习03-滚动图（幻灯片）及菜单项（九宫格）

    <!--标准mui.css-->引入CSS:<link rel="stylesheet" href="../css/mui.min.css"& ...

  6. MUI学习04-开关按钮

    HTML代码如下: <div class="mui-switch"> <div class="mui-switch-handle">&l ...

  7. MUI学习03-弹出菜单(弹出列表)

    弹出菜单HTML代码如下: <div class="mui-content"> <!--弹出列表-----------start--> <button ...

  8. MUI学习02-顶部导航栏

    建议:先看一下MUI注意事项 连接:http://ask.dcloud.net.cn/article/122 固定栏靠前 所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元 ...

  9. MUI学习01-MUI概括、使用前引入CSS及JS

    1.MUI含义 目标:追求性能体验,追求原生UI感觉 重要特征:轻量 优势:MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 基础:MUI以iOS平台UI为基础,补充部分 ...

随机推荐

  1. ThreeJS中的点击与交互——Raycaster的用法

    基础概念 坐标系 我们的手机屏幕是二维的,但是我们展示物体的世界是三维的,当我们在构建一个物体的时候我们是以一个三维世界既是世界坐标来构建,而转化为屏幕坐标展示在我们眼前,则需要经历多道矩阵变化,中间 ...

  2. jQuery 作业三个按钮

    作业三个按钮 <!--声明 文档--> <!DOCTYPE html> <!--定义字符集--> <html lang="zh-CN"&g ...

  3. python 数据类型 之 tuple 元组

    python 3.6.5 元组的特性和定义 与列表类型 只不过 [  ] 改成了() 特性: 1.不可变(元组本身不可变,但是可以存可变类型的element){猜测因为可变element的地址不可变而 ...

  4. web 框架本质 及python三大框架对比

    . 导入Bootstrap.css (开发版3.3.7) . 还要Bootstrap.js,并且还要引入jQuery(). . 栅格系统 . container,row必须包含在container中 ...

  5. web服务器 双网卡 路由 设置

    最近在装服务器的时候,遇到一个问题,就是这个服务器本身是一个web服务器,但它上面装有一个局域网数据交换软件,还需要访局域网. 但软件装上去了,局域网怎么也不能访问,后来了解到是因为双网卡的原因,需要 ...

  6. spring+mybatis框架搭建时遇到Mapped Statements collection does not contain value for...的错误

    http://your233.iteye.com/blog/1563240 上面的博客总结了4个可能出现的问题,如下: 1.mapper.xml中没有加入namespace 2.mapper.xml中 ...

  7. BZOJ2730 [HNOI2012]矿场搭建 - Tarjan割点

    Solution 输入中没有出现过的矿场点是不用考虑的, 所以不用考虑只有 一个点 的点双联通分量. 要使某个挖矿点倒塌, 相当于割去这个点, 所以我们求一遍割点和点双联通分量. 之后的点双联通分量构 ...

  8. Luogu 2051[AHOI2009]中国象棋 - DP

    Description 在 $n * m$ 的格子上放若干个炮, 使得每个炮都不能攻击到其他炮 Solution 定义数组f[ i ][ j ][ k ] 表示到了第 i 行, 已经有2个炮的列数为 ...

  9. win7 64位远程连接oracle11g64位

    1.首先下载即时客户端 instantclient-basic-windows.x64-11.2.0.4.0,下载地址:http://www.oracle.com/technetwork/topics ...

  10. IOS初级：SDWebImage

    简单用法 #import "ViewController.h" #import "SDWebImage/UIImageView+WebCache.h" @int ...