<header class="mui-bar mui-bar-nav">
  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  <h1 class="mui-title">test</h1>
</header>

<div class="mui-content">
  test...
</div>

<ul class="mui-table-view">
  <li class="mui-table-view-cell mui-collapse">
    <a class="mui-navigate-right" href="#">面板1</a>
    <div class="mui-collapse-content">
      <p>面板1子内容</p>
    </div>
  </li>
</ul>

<button type="button" class="mui-btn">默认</button>
<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>

<div class="mui-content">
  <button type="button" class="mui-btn" onclick="handleClick()">操作表</button>
</div>
<div id="sheet1" 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="#sheet1"><b>取消</b></a>
    </li>
  </ul>
</div>
<script>
  mui.init();
  mui.plusReady(function () {});
  function handleClick() {
    mui("#sheet1").popover("toggle");
  }
</script>

<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-content">
  <div class="mui-input-row mui-radio">
    <label>radio</label>
    <input name="radio2" type="radio" />
  </div>
  <div class="mui-input-row mui-radio">
    <label>radio</label>
    <input name="radio2" type="radio" />
  </div>
  <div class="mui-input-row mui-radio mui-left">
    <label>面条</label>
    <input class="radio1" name="radio1" type="radio" value="面条" />
  </div>
  <div class="mui-input-row mui-radio mui-left">
    <label>包子</label>
    <input
      class="radio1"
      name="radio1"
      type="radio"
      value="包子"
      checked="checked"
    />
  </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>
  <button type="button" class="mui-btn" onclick="getVals()">获取值</button>
</div>
<script>
  mui.init();
  mui.plusReady(function () {});
  function getVals() {
    let res = getRadioRes("radio1");
    if (res == null) {
      mui.toast("请选择");
      return;
    }
    mui.toast(res, { duration: "long", type: "div" });
  }
  function getRadioRes(className) {
    let rdsObj = document.getElementsByClassName(className);
    let checkVal = null;
    for (let i = 0; i < rdsObj.length; i++) {
      if (rdsObj[i].checked) {
        checkVal = rdsObj[i].value;
      }
    }
    return checkVal;
  }
</script>

<div class="mui-content">
  <div class="mui-input-row mui-checkbox mui-left">
    <label>checkbox左侧显示示例</label>
    <input name="checkbox1" class="checkbox1" value="Item 1" type="checkbox" />
  </div>
  <div class="mui-input-row mui-checkbox mui-left">
    <label>checkbox左侧显示示例</label>
    <input name="checkbox1" class="checkbox1" value="Item 2" type="checkbox" />
  </div>
  <div class="mui-input-row mui-checkbox mui-left">
    <label>checkbox左侧显示示例</label>
    <input
      name="checkbox1"
      class="checkbox1"
      value="Item 3"
      type="checkbox"
      checked="checked"
    />
  </div>
  <button type="button" class="mui-btn" onclick="getVals()">获取值</button>
</div>
<script>
  mui.init();
  mui.plusReady(function () {});
  function getVals() {
    let res = getRadioRes("checkbox1");
    if (res.length == 0) {
      mui.toast("请选择");
      return;
    }
    mui.toast(res, { duration: "long", type: "div" });
  }
  function getRadioRes(className) {
    let rdsObj = document.getElementsByClassName(className);
    let checkVal = [];
    for (let i = 0; i < rdsObj.length; i++) {
      if (rdsObj[i].checked) {
        checkVal.push(rdsObj[i].value);
      }
    }
    return checkVal;
  }
</script>

<button type="button" class="mui-btn" onclick="pickDate()">获取日期</button>
<script>
	function pickDate() {
			let dDate = new Date();
			// 设置当前日期（不设置默认当前日期）
			dDate.setFullYear(2016, 7, 16);
		
			let minDate = new Date()
			// 最小时间
			minDate.setFullYear(2010, 1, 1);
			let maxDate = new Date();
			// 最大时间
			maxDate.setFullYear(2020, 11, 31);
			plus.nativeUI.pickDate(
				function(e) {
					let d = e.date;
					mui.toast('您选择的日期是:' + d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate());
				},
				function(e) {
					mui.toast('你没有选择日期');
				}, {
					title: '请选择日期',
					date: dDate,
					minDate: minDate,
					maxDate: maxDate
				})
		}
</script>

<button type="button" class="mui-btn" onclick="pickTime()">获取时间</button>
<script>
  function pickTime(){
			var myDate = new Date();
			var h = myDate.getHours();
			var min = myDate.getMinutes();
			var dTime = new Date();
			dTime.setHours(h,min);
			plus.nativeUI.pickTime(function(e){
				var d = e.date;
				mui.toast('您选择的时间是' + d.getHours() + ":" + d.getMinutes());
			},function(e){
				mui.toast('您没有选择时间')
			},{
				title:'请选择时间',
				is24Hour: true,
				time:dTime
			})
		}
</script>

<button type="button" class="mui-btn" onclick="alert()">警告框</button>
<script>
  function alert() {
		mui.alert('请不要随便点击', '警告消息', '确定', function() {
			mui.toast('提示对话框上关闭后的回调函数');
		})
	}
</script>

<button type="button" class="mui-btn" onclick="confirm()">确认框</button>
<script>
  function confirm() {
		mui.confirm('MUI 是个好框架？', 'Hello MUI', new Array('否', '是'), function(e) {
		  if (e.index == 1) {
				mui.toast('感谢您的支持')
			} else {
				mui.toast('MUI 没有得到你的认可，继续加油！');
			}
		})
	}
</script>

<button type="button" class="mui-btn" onclick="prompt()">输入对话框</button>
<script>
  function prompt() {
		mui.prompt('请输入您对 MUI 的评语', '性能好', 'Hello MUI', new Array('取消', '确认'), function(e) {
			if(e.index == 1){
				mui.toast(e.value);
			}else{
			  mui.toast('您取消了输入');
  		}
		});
	}
</script>

<button type="button" class="mui-btn" onclick="shorttoast()">短的消息提示框</button>
<button type="button" class="mui-btn" onclick="longtoast()">长的消息提示框</button>

<script>
  function shorttoast(){
		mui.toast('short 消息提示框',{
			"duration" : "short"
		})
	}
		
	function longtoast(){
		mui.toast('long 消息提示框',{
			"duration" : "long"
		})
	}
</script>

<form class="mui-input-group">
	<div class="mui-input-row">
	  <label>用户名</label>
		<input type="text" class="mui-input-clear" placeholder="请输入用户名">
	</div>
	<div class="mui-input-row">
	  <label>密码</label>
		<input type="password" class="mui-input-password" placeholder="请输入密码">
	</div>
	<div class="mui-button-row">
		<button type="button" class="mui-btn mui-btn-primary" >确认</button>
		<button type="button" class="mui-btn mui-btn-danger" >取消</button>
	</div>
</form>

mui('.mui-input-row input').input();