head

 <header class="mui-bar mui-bar-nav">
            <! -- back button a label: Mui action back Mui icon Mui icon left nav Mui pull left -- >
            <! -- mui.js will automatically add events -- >
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <! -- Title h1 label: Mui title -- >
            < H1 class = "Mui title" > Home Page</h1>
</header>

panel

 <div class="mui-content">
            <ul class="mui-table-view mui-card">
                <! -- first fold content -- >
                <li class="mui-table-view-cell mui-collapse">
                    <! -- Mui navigate right (triangle) - >
                    < a href = "ා" class = "Mui navigate right" > panel 1</a>
                    <! -- hidden part of this folded content (to be expanded in the future) - >
                    <div class="mui-collapse-content">
                        <! -- hidden items -- >
                        <p>I'm hidden content 1</p>
                    </div>
                </li>
                
                <! -- the second folded content will automatically expand after adding the Mui active style -- >
                <li class="mui-table-view-cell mui-collapse mui-active">
                    <! -- Mui navigate right (triangle) - >
                    < a href = "ා" class = "Mui navigate right" > panel 2</a>
                    <! -- hidden part of this folded content (to be expanded in the future) - >
                    <div class="mui-collapse-content">
                        <! -- hidden items -- >
                        <p>I'm hidden content 2</p>
                    </div>
                </li>               
            </ul>
        </div>

Button

<!--Button style-->
<!--Style 1-->
        <div class="mui-content">
    	   
            <button type="button" class="mui-btn mui-btn-primary">blue</button>
            <button type="button" class= "mui-btn mui-btn-success">green</button>
            <button type="button" class="mui-btn mui-btn-warning">Yellow</button>
            <button type="button" class="mui-btn mui-btn-danger">Red</button>
            <button type="button" class="mui-btn mui-btn-royal">Violet</button>
<!--Style 2  -->     
            <button type="button" class="mui-btn mui-btn-outlined">default</button>
            <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">Blue</button>
            <button type="button" class="mui-btn mui-btn-success mui-btn-outlined">green</button>
            <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">yellow</button>
            <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">River color</button>
            <button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">Violet</button>
        </div>

Hide menu

<!--Hide menu-->
        <button type="button" class= "mui-btn" onclick="showMenu();">Open hidden menu</button>
        <div id="menuu" class="mui-popover mui-popover-bottom mui-popover-action ">
        <!-- Optional menu -->
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="#"> menu 1</a>
                </li>
                <li class="mui-table-view-cell">
                    <a href="#"> menu 2</a>
                </li>
            </ul>
        <!-- Cancel menu -->
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="#Menu "> < b > cancel</b></a>
                </li>
            </ul>
        </div>

js

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

Number style

<!--Number style-->
<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>

Check box and its parameters

<!--check box-->
<div class="mui-input-row mui-checkbox">
  <label>checkbox Example</label>
  <input name="checkbox1"  type="checkbox" checked>
</div>

<div class="mui-input-row mui-checkbox mui-left">
  <label>checkbox Example 1 on the left</label>
  <input name="checkbox1" type="checkbox" value="checkbox Example 1 on the left" class="fu">
</div>
<div class="mui-input-row mui-checkbox mui-left">
  <label>checkbox Example 2 on the left</label>
  <input name="checkbox1"  type="checkbox" value="checkbox Example 2 on the left" class="fu">
</div>

<div class="mui-input-row mui-checkbox mui-left">
  <label>checkbox Example 3 on the left</label>
  <input name="checkbox1" value="Item 1" type="checkbox" value="checkbox Example 3 on the left" class="fu">
</div>
<button onclick="getCheckBoxValue()">Get check value</button>

js

//Check box selection
   function getCheckBoxValue(){
   	var res=getCheckBoxRes('fu');
   	if(res.length<1){
   		mui.toast('Please select');
   		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
Style 1

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

Style 2

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

Style 3

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

Style 4

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

Style 5

<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">
                happiness
                <p class='mui-ellipsis'>It's a happy thing to sleep with the one you love, but what about snoring?</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">
                Wooden house
                <p class='mui-ellipsis'>If you want such a small wooden house, you can eat melons and ice in summer, and warm yourself in the winter.</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'>Oven mode City, to dusk, like a overturned palette.</p>
            </div>
        </a>
    </li>
</ul>

Radio box and its acquired value

<!--Radio -->
<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()">Get radio value</button>

js

//Radio box selection
   function getRadioValue(){
   	var res=getRadioRes('re');
   	if(res==null){
   		mui.toast('Please select');
   		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);
   }

Progress bar

<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()">Show progress bar</button>
  </div>
</div>

js

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

slider

<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()">Get slider value</button>
  </div>
  

js

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

Switch and its acquisition status

<!--switch-->
<div class="mui-switch">
  <div class="mui-switch-handle"></div>
</div>
 <!-- Switch on, one more.mui-active class -->
<div class="mui-switch mui-active">
  <div class="mui-switch-handle"></div>
</div>
<!-- Compact mode switch off state -->
<div class="mui-switch mui-switch-mini">
  <div class="mui-switch-handle"></div>
</div>
<!-- Simple mode switch on state -->
<div class="mui-switch mui-switch-mini mui-active">
  <div class="mui-switch-handle"></div>
</div>
<!-- Blue switch off -->
<div class="mui-switch mui-switch-blue">
  <div class="mui-switch-handle"></div>
</div>
<!-- Blue switch on -->
<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()">Get blue switch status</button>
  </div> 

js

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

card

<! -- card -- > 
 <div class="mui-card">
	<! -- header, place title -- >
	<div class="mui-card-header">
	     <img src="../images/logo.png" />
	     <div class="mui-media-body">
		         header
		<p>Published on June 30, 2016 15:30</p>
	</div></div>
	<! -- content area -- >
	< div class = "Mui card content" > content area < img SRC = ".. / images / logo. PNG" / > < div >
	<! -- footer, place supplementary information or supported actions -- >
	< div class = "Mui card footer" > footer < / div >
</div>

Mask

<!--Mask-->
<div class="mui-content">
  <button type="button" onclick="shouMask()">Show mask</button>   
</div>

js

function shouMask(){
var mask = mui.createMask(callback1);//Callback is the callback automatically executed when the user clicks mask;
mask.show();//Show mask

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

Bottom bar

<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">home page</span>
    </a>
    <a class="mui-tab-item" id='tab2'>
        <span class="mui-icon mui-icon-phone" onclick="test()"></span>
        <span class="mui-tab-label">Telephone</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-email" ></span>
        <span class="mui-tab-label">mail</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">set up</span>
    </a>
</nav>  

js

//Bottom bar
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
		 }
	    })
	})
})