<!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">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">MUI学习</h1>
</header>
<div class="mui-content">
<!--折叠面板，快捷键：ma-->
<u1 class="mui-table-view">
<li class="mui-table-view-cell mui-collapse mui-active"><!--mui-active让面板默认显示-->
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
</u1>
<!--按钮,添加οnclick="showMenu();"属性控制下面的操作面板-->
<button type="button" class="mui-btn" onclick="showMenu();">点击这里</button>
<!--显示单选框值-->
<button type="button" class="mui-btn" onclick="getValRd();">获取单</button>
<!--显示复选框值-->
<button type="button" class="mui-btn" onclick="getValCb();">获取复</button>
<!--日期-->
<button type="button" class="mui-btn" onclick="showDate();">日期</button>
<!--时间-->
<button type="button" class="mui-btn" onclick="showTime();">时间</button>
<!--对话框-->
<button type="button" class="mui-btn" onclick="showTest1();">对话</button>
<!--确认框-->
<button type="button" class="mui-btn" onclick="showTest2();">确认</button>
<!--输入框-->
<button type="button" class="mui-btn" onclick="showTest3();">输入</button>
<!--切换-->
<button type="button" class="mui-btn" onclick="changeTo(1);">切换到第2个项目</button>
<!--进度条-->
<button type="button" class="mui-btn" onclick="setPro();">进度条</button>
<!--滑块-->
<button type="button" class="mui-btn" onclick="getRangeValue();">滑块</button>
<!--开关-->
<button type="button" class="mui-btn" onclick="getSwitchValue();">开关</button>
<!--蒙版-->
<button type="button" class="mui-btn" onclick="showMask();">蒙版</button>
<!--获取服务器端数据-->
<button type="button" class="mui-btn" id="btn2">获取服务器端数据</button>
<!--操作面板，可以不在此div中-->
<div id="menu" 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="#menu"><b>取消</b></a><!--锚链接形式，必须跟id匹配-->
</li>
</ul>
</div>
<!--复选框,快捷键：mc，checked属性表示默认选中，也可写成checked="checked"-->
<div class="mui-input-row mui-checkbox mui-left">
<label>钢琴</label>
<input name="checkbox1" type="checkbox" value="钢琴" checked class="chbox">
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>吉他</label>
<input name="checkbox1" type="checkbox" value="吉他" class="chbox">
</div>
<!--单选框，快捷键：mr，名字要一样，被函数调用可以用标签，但是怕和其他地方冲突，可以用id，也可以用class-->
<div class="mui-input-row mui-radio ">
<label>猕猴桃</label>
<input name="radio" type="radio" value="猕猴桃" checked class="rds">
</div>
<div class="mui-input-row mui-radio ">
<label>水蜜桃</label>
<input name="radio" type="radio" value="水蜜桃" class="rds">
</div>
<!--表单，快捷键mf-->
<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>
<!--轮播组件,快捷键ms,可触摸滑动-->
<div class="mui-slider">
<div class="mui-slider-group mui-slider-loop"><!--想循环播放就在类后面加mui-slider-loop属性，而且还要加两个图片：头和尾，在头和尾上还要加mui-slider-item-duplicate属性-->
<!--第一个内容区容器-->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="img/3.jpeg" ></a>
</div>
<div class="mui-slider-item">
<!-- 具体内容 -->
<a href="#"><img src="img/6.jpeg" ></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="img/4.jpeg" ></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="img/3.jpeg" ></a>
</div>
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="img/6.jpeg" ></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>
</div>
<!--列表，快捷键ml,图文列表等样式。如果页面中有其他元素，最好用div包裹起来，如果没有，直接用ul来包裹也可以-->
<!--支持数字角标，按钮，开关，链接等-->
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#" class="mui-navigate-right">项目1</a><span class="mui-badge mui-badge-primary">6</span></li>
<li class="mui-table-view-cell">项目2</li>
</ul>
<!--进度条,快捷键mp-->
<div style="padding:20px;">
<div id="pro" class="mui-progressbar">
<span></span>
</div>
</div>
<!--滑块,快捷键mr,id放在input中-->
<div class="mui-input-row mui-input-range">
<label>Range</label>
<input id="range" type="range" min="0" max="100" value="50">
</div>
<!--开关，快捷键ms-->
<div class="mui-input-row">
<label>Switch</label>
<div id="myswitch" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</div>
<!--卡片视图,style="margin: 20px;"控制卡片大小,可以在各区域继续嵌套-->
<div class="mui-card" style="margin: 20px;">
<div class="mui-card-header" panding="10px">
<img src="img/7.jpeg" width="40px" class="mui-pull-left">
<div class="mui-media-body" style="padding: 5px;">
<p>标题2020-10-24 12：38</p>
</div>
</div>
<div class="mui-card-content">
<img src="img/2.jpg" width="100%">
</div>
<div class="mui-card-footer">
<div class="mui-media-body">
<h3>标题</h3>
<p>2020-10-24 12：38</p>
</div>
</div>
</div>
<!--窗口管理集窗口数据传递-->
<!--1.mui插件初始化：mui-init();-->
<!--2.页面初始化：mui.plusReady();之后页面初始化就完成-->
<!--3.创建子页面,解决低端机不流畅问题
mui.init({
subpages:[{
url:'sub.html',
id:'sub.html',
styles:{
top:'45px',
bottom:'0px'
}
}]
});-->
<!--4.打开新页面-->
<!--预加载,打开多个就:preloadPages:[{},{}]
mui.init({
preloadPages:[{
url:"tel.html",
id:"tel.html"
}]
});-->
<!--事件绑定-->
<!--addEventListener-->
<!--<button type="button" class="mui-btn" id="bt">test</button>
mui.plusReady(function () {
document.getElementById('bt').addEventListener('tap',function(){
mui.toast('ok');
});
});-->
<!--批量元素绑定：on();off();解绑
会产生this这样一个对象，表示当前的对象，哪个li被点击了，就是哪个对象
mui.plusReady(function () {
mui('#lists').on('tap','li',function(){
mui.toast(this.innerHTML);
});
mui('#lists').off('tap','li');
});-->
<!--点击：
tap
doubletap
longtap：长按
hold：按住
release
滑动：
swipeleft
swiperight
swipeup
swipedown
拖动：
dragstart
drag
dragend-->
<ul class="mui-table-view" id="lists">
<li class="mui-table-view-cell" id="1">新闻1</li>
<li class="mui-table-view-cell" id="1">新闻2</li>
<li class="mui-table-view-cell" id="1">新闻3</li>
</ul>
</div>
<script type="text/javascript">
function showMenu(){
<!--mui选择器,#后面选择的是id,我们的插座面板的id是menu，popover是函数，后面跟着事件-->
mui('#menu').popover('toggle')
}
<!--单选框获值-->
function getValRd(){
<!--自动消失的对话框，显示一下获得的值-->
var res = getRadioRes('rds');
if(res == null){
mui.toast('请选择');
return;
}
mui.toast(res);
}
<!--复选框获取值-->
function getValCb(){
var res = getRadioCb('chbox');
if(res.length<0){
mui.toast('请选择');
return;
}
mui.toast(res);
}
<!--比较常用的函数，获取按钮的输出值-->
function getRadioRes(className){
var checkVal = null;
var rdObj = document.getElementsByClassName(className);
for(i = 0;i < rdObj.length;i++){
<!--判断是否被点击属性-->
if(rdObj[i].checked){
<!--显示value属性-->
checkVal = rdObj[i].value;
}
}
return checkVal;
}
<!--复选框需要用数组记录-->
function getRadioCb(className){
var checkVal = new Array();
var k = 0;
var rdObj = document.getElementsByClassName(className);
for(i = 0;i < rdObj.length;i++){
<!--判断是否被点击属性-->
if(rdObj[i].checked){
<!--显示value属性-->
checkVal[k] = rdObj[i].value;
k++;
}
}
return checkVal;
}
<!--日期,从0开始-->
function showDate(){
var dDate = new Date();
dDate.setFullYear(2016,7,16);
var minDate = new Date();
minDate.setFullYear(2010,1,1);
var maxDate = new Date();
maxDate.setFullYear(2090,11,31);
plus.nativeUI.pickDate(
<!--第一个函数显示用户确定后的情况-->
function(e){
var d = e.date;
mui.toast('您选择的日期是：' + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());
},
<!--第二个函数显示用户取消后的情况-->
function(e){
mui.toast('您没有选择');
},
{
title:'请选择日期',
date:dDate,
minDate:minDate,
maxDate:maxDate
}
);
}
<!--时间-->
function showTime(){
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
}
);
}
<!--对话框，dialog-->
<!--参数：message 提示对话框上显示的内容，title 标题，btnValue 按钮显示，callback 关闭后的回调函数，type Value:'div'是否使用h5绘制的对话框-->
function showTest1(){
mui.alert('答案','我的','是',function(){
mui.toast('你');
})
}
<!--确认框，和上面的参数一样，但是btnValue需要用数组-->
function showTest2(){
mui.confirm('答案','我的',new Array('不是','是'),function(e){
if (e.index == 1){
mui.toast('你');
}else{
mui.toast('还是你');
}
})
}
<!--输入框，参数：placeholder-->
function showTest3(){
mui.prompt('所爱隔山海','','回答',new Array('取消','确认'),function(e){
if(e.index == 1){
if (e.value == '山海皆可平'){
mui.toast('回答正确');
}else{
mui.toast('回答错误');
}
}else{
mui.toast('退出输入');
}
})
}
<!--轮播组件自动循环播放-->
mui.plusReady(function () {
<!--mui选择器就是在dom结构里去找哪一个元素，并返回一个对象为这个对象去执行一个slider方法-->
var slider = mui('.mui-slider');
<!--3秒切换一次图片，改为0就会关闭自动播放-->
slider.slider({interval:0});
<!--轮播到指定的一张图片时去做指定的事情-->
document.querySelector('.mui-slider').addEventListener('slider',function(e){
if(e.detail.slideNumber == 0)
{
mui.toast("第"+(e.detail.slideNumber+1)+'张');
}else{
mui.toast('放要做的事情的函数');
}
});
});
<!--可以指定跳转到那一张-->
function changeTo(index){
var gallery = mui('.mui-slider');
gallery.slider().gotoItem(index);
}
<!--进度条-->
function setPro(){
var obj = mui('#pro');
var bl = 0;
setInterval(function(){
obj.progressbar({progress:bl}).show();
bl +=1;
},50);
}
<!--滑块-->
function getRangeValue(){
var obj = mui('#range');
var val = obj[0].value;
mui.toast(val);
}
<!--获取开关的值-->
function getSwitchValue(){
var obj = document.getElementById("myswitch");
<!--为什么不能用mui('#myswitch');-->
<!--contains方法获得mui-active类的值-->
if(obj.classList.contains('mui-active')){
mui.toast('on');
}else{
mui.toast('off');
}
}
<!--通过监听的方式获取开关的值-->
mui.plusReady(function () {
document.getElementById("myswitch").addEventListener('toggle',function(e){
<!--如果是被激活状态，或者说是开状态-->
if(e.detail.isActive){
mui.toast('on');
}else{
mui.toast('off');
}
})<!--toggle开和关的循环事件-->
});
<!--蒙版，样式看官方文档-->
function showMask(){
var mask = mui.createMask(callback1);
mask.show();
}
function callback1(){
mui.toast('您取消了操作');
}
<!--事件绑定-->
mui.plusReady(function () {
//1.进行预加载
var prPage = mui.preload({url:'info.html',id:'info.html'});
mui('#lists').on('tap','li',function(){
mui.fire(prPage,'myEvent',{'title':this.innerHTML,'id':this.getAttribute('id')});
mui.openWindow({url:'info.html',id:'info.html'});
});
});
<!--和服务器通信-->
<!--ajax参数有很多-->
//mui.ajax();
//mui.post();
//mui.get();
//mui.getJSON();
mui.plusReady(function(){
document.getElementById('btn2').addEventListener('tap',function(){
mui.ajax({
type : 'GET',
url : "http://demo.hcoder.net/index.php",
success : function(msg){
mui.toast(msg);
},
error : function(xhr,type,errorThrown){
mui.toast(type);
}
});
});
});
</script>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
