mui快速上手

官方网站http://dev.dcloud.net.cn/mui

头部

 <header class="mui-bar mui-bar-nav">
            <!-- 后退按钮a标签：mui-action-back mui-icon mui-icon-left-nav mui-pull-left -->
            <!-- mui.js会自动的去添加事件 -->
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <!-- 标题h1标签：mui-title -->
            <h1 class="mui-title">主页</h1>
</header>

面板

 <div class="mui-content">
            <ul class="mui-table-view mui-card">
                <!-- 第一个折叠内容 -->
                <li class="mui-table-view-cell mui-collapse">
                    <!-- 这个折叠内容的展示内容（mui-navigate-right：三角） -->
                    <a href="#" class="mui-navigate-right">面板1</a>
                    <!-- 这个折叠内容的隐藏部分（将来被展开） -->
                    <div class="mui-collapse-content">
                        <!-- 隐藏的小项 -->
                        <p>我是隐藏的内容1</p>
                    </div>
                </li>
                
                <!-- 第二个折叠内容，加了mui-active样式之后，会自动的展开 -->
                <li class="mui-table-view-cell mui-collapse mui-active">
                    <!-- 这个折叠内容的展示内容（mui-navigate-right：三角） -->
                    <a href="#" class="mui-navigate-right" >面板2</a>
                    <!-- 这个折叠内容的隐藏部分（将来被展开） -->
                    <div class="mui-collapse-content">
                        <!-- 隐藏的小项 -->
                        <p>我是隐藏的内容2</p>
                    </div>
                </li>               
            </ul>
        </div>

按钮

<!--按钮样式-->
<!--样式1-->
        <div class="mui-content">
    	   
            <button type="button" class="mui-btn mui-btn-primary">蓝色</button>
            <button type="button" class= "mui-btn mui-btn-success">绿色</button>
            <button type="button" class="mui-btn mui-btn-warning">黄 色</button>
            <button type="button" class="mui-btn mui-btn-danger">紅 色</button>
            <button type="button" class="mui-btn mui-btn-royal">紫色</button>
<!--样式2  -->     
            <button type="button" class="mui-btn mui-btn-outlined">默认</button>
            <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝 色</button>
            <button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿色</button>
            <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黄色</button>
            <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">江色</button>
            <button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button>
        </div>

隐藏菜单

<!--隐藏菜单-->
        <button type="button" class= "mui-btn" onclick="showMenu();">打开隐藏菜单</button>
        <div id="menuu" class="mui-popover mui-popover-bottom mui-popover-action ">
        <!-- 可选择菜单 -->
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="#">菜单1</a>
                </li>
                <li class="mui-table-view-cell">
                    <a href="#">菜单2</a>
                </li>
            </ul>
        <!-- 取消菜单 -->
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="#menuu"><b>取消</b></a>
                </li>
            </ul>
        </div>

js

function showMenu(){
		mui('#menuu').popover('toggle');
	}

数字样式

<!--数字样式-->
<span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary">12</span>
<span class="mui-badge mui-badge-success">123</span>
<span class="mui-badge mui-badge-warning">3</span>
<span class="mui-badge mui-badge-danger">45</span>
<span class="mui-badge mui-badge-purple">456</span>

<span class="mui-badge mui-badge-inverted">1</span>
<span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>
<span class="mui-badge mui-badge-success mui-badge-inverted">3</span>
<span class="mui-badge mui-badge-warning mui-badge-inverted">4</span>
<span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>
<span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>

复选框及其传参

<!--复选框-->
<div class="mui-input-row mui-checkbox">
  <label>checkbox示例</label>
  <input name="checkbox1"  type="checkbox" checked>
</div>

<div class="mui-input-row mui-checkbox mui-left">
  <label>checkbox左侧显示示例1</label>
  <input name="checkbox1" type="checkbox" value="checkbox左侧显示示例1" class="fu">
</div>
<div class="mui-input-row mui-checkbox mui-left">
  <label>checkbox左侧显示示例2</label>
  <input name="checkbox1"  type="checkbox" value="checkbox左侧显示示例2" class="fu">
</div>

<div class="mui-input-row mui-checkbox mui-left">
  <label>checkbox左侧显示示例3</label>
  <input name="checkbox1" value="Item 1" type="checkbox" value="checkbox左侧显示示例3" class="fu">
</div>
<button onclick="getCheckBoxValue()">获取复选值</button>

js

//复选框选择
   function getCheckBoxValue(){
   	var res=getCheckBoxRes('fu');
   	if(res.length<1){
   		mui.toast('请选择');
   		return;
   	}
   	mui.toast(res);
   }
   function getCheckBoxRes(className){
   	    console.log(1);
		var getObje=document.getElementsByClassName(className);
		var checkVal=new Array();
		var k=0;
		console.log(getObje[1].value);
		console.log(1);
		for(i=0;i<getObje.length;i++){
			if(getObje[i].checked){
				checkVal[k]=getObje[i].value;
				k++;
			}
		}
		return checkVal;
		console.log(checkVal);
   }

list
样式一

<div class="mui-con">
  <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>
</div>

样式二

<ul class="mui-table-view mui-table-view-radio">
	<li class="mui-table-view-cell">
		<a class="mui-navigate-right " >Item 1</a>
	</li>
	<li class="mui-table-view-cell mui-selected">
		<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>

样式三

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

样式四

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

样式五

<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="../images/shuijiao.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="../images/muwu.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="../images/cbd.jpg">
            <div class="mui-media-body">
                CBD
                <p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
            </div>
        </a>
    </li>
</ul>

单选框及其获取值

<!--单选框-->
<div class="mui-input-row mui-radio mui-left">
	<label>radio1</label>
	<input name="radio1" type="radio" class="re" value="radio1"> 
</div> 
<div class="mui-input-row mui-radio mui-left">
	<label>radio2</label>
	<input name="radio1" type="radio" class="re" value="radio2">
</div> 
<button onclick="getRadioValue()">获取单选值</button>

js

//单选框选择
   function getRadioValue(){
   	var res=getRadioRes('re');
   	if(res==null){
   		mui.toast('请选择');
   		return;
   	}
   	mui.toast(res);
   }
   function getRadioRes(className){
   	    console.log(1);
		var getObje=document.getElementsByClassName(className);
		var checkVal=null;
		console.log(getObje[1].value);
		console.log(1);
		for(i=0;i<getObje.length;i++){
			if(getObje[i].checked){
				checkVal=getObje[i].value;
			}
		}
		return checkVal;
		console.log(checkVal);
   }

进度条

<div class="mui-content">
  <div style="padding: 20px;">
   <div id="demo1" class="mui-progressbar">
	  <span></span>
   </div>
  </div>
  <div style="padding: 0px 20px;">
    <button type="button" onclick="setPro()">展示进度条</button>
  </div>
</div>

js

function setPro(){
   var jdt= mui("#demo1")
   var bb=0;
   setInterval(function(){
      jdt.progressbar({progress:bb}).show();
      bb+=10;
   },1000)
	
}

滑块

<div class="mui-input-row mui-input-range" >
	<label>Range</label>
	<input type="range" min="0" max="100" id="rang1">
</div>
<div style="padding: 0px 20px;">
    <button type="button" onclick="setVal()">获取滑块值</button>
  </div>
  

js

function setVal(){
	var obj=mui('#rang1');
	var val=obj[0].value;
	mui.toast(val);
	
	
}

开关及其获取状态

<!--开关-->
<div class="mui-switch">
  <div class="mui-switch-handle"></div>
</div>
 <!-- 开关打开状态，多了一个.mui-active类 -->
<div class="mui-switch mui-active">
  <div class="mui-switch-handle"></div>
</div>
<!-- 简洁模式开关关闭状态 -->
<div class="mui-switch mui-switch-mini">
  <div class="mui-switch-handle"></div>
</div>
<!-- 简洁模式开关打开状态 -->
<div class="mui-switch mui-switch-mini mui-active">
  <div class="mui-switch-handle"></div>
</div>
<!-- 蓝色开关关闭状态 -->
<div class="mui-switch mui-switch-blue">
  <div class="mui-switch-handle"></div>
</div>
<!-- 蓝色开关打开状态 -->
<div class="mui-switch mui-switch-blue mui-active" id="mySwich">
  <div class="mui-switch-handle"></div>
</div>
 <div style="padding: 0px 20px;">
    <button type="button" onclick="seton()">获取蓝色开关状态</button>
  </div> 

js

function seton(){
	var huak=document.getElementById('mySwich');
	if(huak.classList.contains('mui-active')){
	 mui.toast('on');
	}else{
	 mui.toast('off');
	}
}

卡片

<!--卡片 --> 
 <div class="mui-card">
	<!--页眉，放置标题-->
	<div class="mui-card-header">
	     <img src="../images/logo.png" />
	     <div class="mui-media-body">
		         页眉
		<p>发表于 2016-06-30 15:30</p>
	</div></div>
	<!--内容区-->
	<div class="mui-card-content">内容区<img src="../images/logo.png" /></div>
	<!--页脚，放置补充信息或支持的操作-->
	<div class="mui-card-footer">页脚</div>
</div>

蒙版

<!--蒙版-->
<div class="mui-content">
  <button type="button" onclick="shouMask()">显示蒙版</button>   
</div>

js

function shouMask(){
var mask = mui.createMask(callback1);//callback为用户点击蒙版时自动执行的回调；
mask.show();//显示遮罩

}
function callback1(){
 mui.toast('123000000');
}

底部栏

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" >
        <span class="mui-icon mui-icon-home" ></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" id='tab2'>
        <span class="mui-icon mui-icon-phone" onclick="test()"></span>
        <span class="mui-tab-label">电话</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-email" ></span>
        <span class="mui-tab-label">邮件</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">设置</span>
    </a>
</nav>  

js

//底部栏
mui.init();
function test(){
	console.log(1);
	mui.openWindow({
		url:'sub.html',
		id:'sub.html',
		 extras:{
		 	name:123,
		 	age:12
		 }
	    })
}
mui.plusReady(function(){
	console.log(2);
	document.getElementById('tab2').addEventListener('tap',function(){
		console.log(3);
		mui.openWindow({
		url:'sub.html',
		id:'sub.html',
		 extras:{
		 	name:123,
		 	age:12
		 }
	    })
	})
})