底部菜单
<nav id="bottomnav" class="mui-bar mui-bar-tab">
<a id="home"class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a id='resource' class="mui-tab-item">
<span class="mui-icon mui-icon-image"></span>
<span class="mui-tab-label">教学资源</span>
</a>
<a id="center" class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">个人中心</span>
</a>
</nav>
直接通过opWindow发放打开
document.getElementById('resource').addEventListener('tap',function(){
mui.openWindow({
url: "resource.html",
id: "resource",
show: {
aniShow: 'zoom-fade-out',
duration: 300
}
});
});
但是这样有个问题就是侧滑菜单总是被遮住,大家都是如何实现底部侧滑菜单的显示的,我的是web系统,webview应该不能用!
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.css">
<style>
#menu {
background: #fff;
}
#menu li {
border: 0;
padding: 5px 0 5px 0;
}
#menu a {
padding: 5px 0 0 0;
;
}
#menu a span {
padding: 11px;
border-radius: 35px;
;
}
#menu a div {
font-size: 13px;
;
}
.goodstdl {
display: block;
float: left;
width: 50%;
height: 70px;
}
.goodstdl .goodstdimg {
width: 50px;
height: 50px;
}
.goodstdl .goodstdimg img {
width: 50px;
height: 50px;
border-radius: 5px;
}
.goodstdl .goodstdtxt {
font-size: 11px;
line-height: 25px;
width: 80px;
height: 50px;
position: absolute;
top: 7px;
left: 70px;
color: #ACACB4;
}
.goodstdr {
display: block;
float: left;
width: 50%;
height: 70px;
}
.goodstdr .goodstdimg {
width: 50px;
height: 50px;
position: absolute;
top: 7px;
right: 85px;
}
.goodstdr .goodstdimg img {
width: 50px;
height: 50px;
border-radius: 5px;
}
.goodstdr .goodstdtxt {
font-size: 11px;
line-height: 25px;
width: 80px;
height: 50px;
position: absolute;
top: 7px;
right: 0px;
color: #ACACB4;
}
.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell {
padding-left: 23px;
}
.mui-table-view-cell.mui-collapse .mui-table-view {
margin-bottom: 1px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-bars mui-pull-left mui-plus-visible"></a>
<h1 class="mui-title">小树苗幼儿园</h1>
</header>
<nav id="bottomnav" class="mui-bar mui-bar-tab">
<a id="home"class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a id='resource' class="mui-tab-item">
<span class="mui-icon mui-icon-image"></span>
<span class="mui-tab-label">教学资源</span>
</a>
<a id="center" class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">个人中心</span>
</a>
</nav>
<div class="mui-content">
<!--slider-->
<div id="slider" class="mui-slider" style="height:230px;">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="images/111.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/222.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/111.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="images/222.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
</div>
</div>
<!--menu-->
<ul id="menu" class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">
<a href="notice.html">
<span class="iconfont icon-mail5" style="background:#3498DB;color:#FFF;"></span>
<div class="mui-media-body">通知</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">
<a href="safe.html">
<span class="iconfont icon-shield" style="background:#F39C12;color:#FFF;"><!--<span class="mui-badge">5</span>--></span>
<div class="mui-media-body">安全</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">
<a href="resource.html">
<span class="iconfont icon-earth" style="background:#1ABC9C;color:#FFF;"></span>
<div class="mui-media-body">资源</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">
<a href="sharecontent.html">
<span class="iconfont icon-share2" style="background:#E74C3C;color:#FFF;"></span>
<div class="mui-media-body">分享</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">
<a href="look.html">
<span class="iconfont icon-eye" style="border:2px solid #78BA00;color:#78BA00;padding:9px;"></span>
<div class="mui-media-body">每日观察</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">
<a href="growrec.html">
<span class="iconfont icon-quill" style="border:2px solid #8E44AD;color:#8E44AD;padding:9px;"></span>
<div class="mui-media-body">成长日记</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">
<a href="ask.html">
<span class="iconfont icon-mic" style="border:2px solid #F1C40E;color:#F1C40E;padding:9px;"></span>
<div class="mui-media-body">学问吧</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-xs-3">
<a href="#">
<span class="iconfont icon-manwoman" style="border:2px solid #57D580;color:#57D580;padding:9px;"></span>
<div class="mui-media-body">在线互动</div>
</a>
</li>
</ul>
<div class="mui-card" style="margin:10px 0 0 0;border-radius:0;border:0;">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse" style="padding:10px 15px;">
<a class="mui-navigate-right" href="#" style="background:#fff;"><span class="mui-icon mui-icon-star" style="color:#EC971F;"></span> 优秀学生</a>
<div class="mui-collapse-content">
<a class="goodstdl" >
<div class="goodstdimg">
<img src="images/girl.jpg">
</div>
<div class="goodstdtxt">
姓名:黄子珊
<br> 班级:大一班
</div>
</a>
<a class="goodstdr">
<div class="goodstdimg">
<img src="images/girl.jpg">
</div>
<div class="goodstdtxt">
姓名:黄子珊
<br> 班级:大一班
</div>
</a>
</div>
</li>
<li class="mui-table-view-cell mui-collapse" style="padding:10px 15px;">
<a class="mui-navigate-right" href="#" style="background:#fff;"><span class="mui-icon mui-icon-navigate" style="color:#EC971F;"></span> 学校新闻</a>
<div class="mui-collapse-content" style="padding:0px;margin-top:0px;">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="noticedetail.html">
<img class="mui-media-object mui-pull-left" src="images/shuijiao.jpg">
<div class="mui-media-body">
喜讯小树苗获最佳
<p class='mui-ellipsis'>2015-03-03</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'>2015-03-03</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">
关注儿童成长
<p class='mui-ellipsis'>2015-03-03</p>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
<div style="height:50px;background: #EFEFF4;"></div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/update.js" type="text/javascript" charset="utf-8"></script>
<script>
mui.init({
preloadLimit:1
});
// document.getElementById('home').addEventListener('tap',function(){
// mui.openWindow({
// url: "index.html",
// id: "index",
// show: {
// aniShow: 'zoom-fade-out',
// duration: 300
// }
// });
// document.getElementById('resource').hide();
// });
document.getElementById('resource').addEventListener('tap',function(){
mui.openWindow({
url: "resource.html",
id: "resource",
show: {
aniShow: 'zoom-fade-out',
duration: 300
}
});
});
document.getElementById('center').addEventListener('tap',function(){
mui.openWindow({
url: "center.html",
id: "center",
show: {
aniShow: 'zoom-fade-out',
duration: 300
}
});
});
var menu = null,
main = null;
var showMenu = false;
// mui.init({
// swipeBack: false,
// statusBarBackground: '#f7f7f7',
// gestureConfig: {
// doubletap: true
// },
// subpages: [{
// id: 'list',
// url: 'list.html',
// styles: {
// top: '45px',
// bottom: 0,
// bounce: 'vertical'
// }
// }]
// });
mui.plusReady(function() {
//仅支持竖屏显示
plus.screen.lockOrientation("portrait-primary");
main = plus.webview.currentWebview();
main.addEventListener('maskClick', closeMenu);
//处理侧滑导航,为了避免和子页面初始化等竞争资源,延迟加载侧滑页面;
setTimeout(function() {
menu = mui.preload({
id: 'index-menu',
url: 'index-menu.html',
styles: {
left: 0,
width: '70%',
zindex: -1
},
show: {
aniShow: 'none'
}
});
}, 200);
});
var isInTransition = false;
/**
* 显示侧滑菜单
*/
function openMenu() {
if (isInTransition) {
return;
}
if (!showMenu) {
//侧滑菜单处于隐藏状态,则立即显示出来;
isInTransition = true;
menu.setStyle({
mask: 'rgba(0,0,0,0)'
}); //menu设置透明遮罩防止点击
menu.show('none', 0, function() {
//主窗体开始侧滑并显示遮罩
main.setStyle({
mask: 'rgba(0,0,0,0.4)',
left: '70%',
transition: {
duration: 150
}
});
mui.later(function() {
isInTransition = false;
menu.setStyle({
mask: "none"
}); //移除menu的mask
}, 160);
showMenu = true;
});
}
};
/**
* 关闭菜单
*/
function closeMenu() {
if (isInTransition) {
return;
}
if (showMenu) {
//关闭遮罩;
//主窗体开始侧滑;
isInTransition = true;
main.setStyle({
mask: 'none',
left: '0',
transition: {
duration: 200
}
});
showMenu = false;
//等动画结束后,隐藏菜单webview,节省资源;
mui.later(function() {
isInTransition = false;
menu.hide();
}, 300);
}
};
//点击左上角侧滑图标,打开侧滑菜单;
document.querySelector('.mui-icon-bars').addEventListener('tap', function(e) {
if (showMenu) {
closeMenu();
} else {
openMenu();
}
});
//敲击顶部导航,内容区回到顶部
document.querySelector('header').addEventListener('doubletap', function() {
main.children()[0].evalJS('mui.scrollTo(0, 100)');
});
//主界面向右滑动,若菜单未显示,则显示菜单;否则不做任何操作
window.addEventListener("swiperight", openMenu);
//主界面向左滑动,若菜单已显示,则关闭菜单;否则,不做任何操作;
window.addEventListener("swipeleft", closeMenu);
//侧滑菜单触发关闭菜单命令
window.addEventListener("menu:close", closeMenu);
window.addEventListener("menu:open", openMenu);
//重写mui.menu方法,Android版本menu按键按下可自动打开、关闭侧滑菜单;
mui.menu = function() {
if (showMenu) {
closeMenu();
} else {
openMenu();
}
}
//处理右上角关于图标的点击事件;
var subWebview = null,
template = null;
document.getElementById('info').addEventListener('tap', function() {
mui.openWindow({
url: "info.html",
id: "info",
show: {
aniShow: 'zoom-fade-out',
duration: 300
}
});
});
//首页返回键处理
//处理逻辑:1秒内,连续两次按返回键,则退出应用;
var first = null;
mui.back = function() {
if (showMenu) {
closeMenu();
} else {
//首次按键,提示‘再按一次退出应用’
if (!first) {
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function() {
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1000) {
plus.runtime.quit();
}
}
}
};
</script>
</body>
</html>
resource.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教学资源</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body>
<style>
.mui-control-content {
background-color: white;
min-height: 500px;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
#menu {
margin-top: 1px;
}
#menu li {
padding: 5px 15px;
}
#reccontent li a img {
border-radius: 5px;
}
#reccontent li a div {
font-size: 12px;
}
.mui-grid-view.mui-grid-9 .mui-media .iconfont {
font-size: 1.2em;
}
</style>
<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">教学资源</h1>
</header>
<nav id="bottomnav" class="mui-bar mui-bar-tab">
<a id="home" class="mui-tab-item ">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a id='resource' class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-image"></span>
<span class="mui-tab-label">教学资源</span>
</a>
<a id="center" class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">个人中心</span>
</a>
</nav>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1mobile">
校本资源
</a>
<a class="mui-control-item" href="#item2mobile">
平台资源
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul id="menu" class="mui-table-view mui-grid-view mui-grid-9" style="background:#fff;">
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<span class="iconfont icon-wallet" style="color:#24be82;"></span>
<div class="mui-media-body" style="color:#24be82;">绘本</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<span class="iconfont icon-music" style="color:#CF2D28;"></span>
<div class="mui-media-body" style="color:#CF2D28;">儿歌</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<span class="iconfont icon-pencil2" style="color:#99d91d;"></span>
<div class="mui-media-body" style="color:#99d91d;">故事</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<span class="iconfont icon-map" style="color:#dc4e16;"></span>
<div class="mui-media-body" style="color:#dc4e16;">古诗</div>
</a>
</li>
</ul>
<div style="height:10px;background:#EFEFF4;"></div>
<div style=" height:38px;line-height:38px;font-size:16px;font-weight:500;padding-left:6px;color:#4d4d4d;border-bottom:1px solid #EFEFF4">
<span style="border-left:6px solid #41b9f5;padding-left:6px;">推荐资源</span>
</div>
<div class="mui-content" style="background-color:#fff">
<ul id="reccontent" class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<img class="mui-media-object" src="images/shuijiao.jpg">
<div class="mui-media-body">幸福就是可以一起睡觉</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<img class="mui-media-object" src="images/muwu.jpg">
<div class="mui-media-body">想要一间这样的木屋,静静的喝咖啡</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#"><img class="mui-media-object" src="images/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<img class="mui-media-object" src="images/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#"><img class="mui-media-object" src="images/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<img class="mui-media-object" src="images/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul id="menu" class="mui-table-view mui-grid-view mui-grid-9" style="background:#fff;">
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<span class="iconfont icon-happy" style="color:#EC971F;"></span>
<div class="mui-media-body" style="color:#EC971F;">益智</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<span class="iconfont icon-music" style="color:#DD524D;"></span>
<div class="mui-media-body" style="color:#DD524D;">歌舞</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<span class="iconfont icon-wallet" style="color:#24be82;"></span>
<div class="mui-media-body" style="color:#24be82;">绘本</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<span class="iconfont icon-pencil2" style="color:#99d91d;"></span>
<div class="mui-media-body" style="color:#99d91d;">学习</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<span class="iconfont icon-joomla" style="color:#c8dc23;"></span>
<div class="mui-media-body" style="color:#c8dc23;">艺术</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<span class="iconfont icon-hammer" style="color:#8b16dc;"></span>
<div class="mui-media-body" style="color:#8b16dc;">制作</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<span class="iconfont icon-key3" style="color:#dc16b9;"></span>
<div class="mui-media-body" style="color:#dc16b9;">谜语</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
<a href="#">
<span class="iconfont icon-heart2" style="color:#dc4e16;"></span>
<div class="mui-media-body" style="color:#dc4e16;">健康</div>
</a>
</li>
</ul>
<div style="height:10px;background:#EFEFF4;"></div>
<div style=" height:38px;line-height:38px;font-size:16px;font-weight:500;padding-left:6px;color:#4d4d4d;border-bottom:1px solid #EFEFF4">
<span style="border-left:6px solid #41b9f5;padding-left:6px;">推荐资源</span>
</div>
<div class="mui-content" style="background-color:#fff">
<ul id="reccontent" class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<img class="mui-media-object" src="images/shuijiao.jpg">
<div class="mui-media-body">幸福就是可以一起睡觉</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<img class="mui-media-object" src="images/muwu.jpg">
<div class="mui-media-body">想要一间这样的木屋,静静的喝咖啡</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#"><img class="mui-media-object" src="images/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<img class="mui-media-object" src="images/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#"><img class="mui-media-object" src="images/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<img class="mui-media-object" src="images/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
document.getElementById('home').addEventListener('tap', function() {
mui.openWindow({
url: "index.html",
id: "index",
show: {
aniShow: 'zoom-fade-out',
duration: 300
}
});
});
document.getElementById('resource').addEventListener('tap', function() {
mui.openWindow({
url: "resource.html",
id: "resource",
show: {
aniShow: 'zoom-fade-out',
duration: 300
}
});
});
document.getElementById('center').addEventListener('tap', function() {
mui.openWindow({
url: "center.html",
id: "center",
show: {
aniShow: 'zoom-fade-out',
duration: 300
}
});
});
mui.init({
swipeBack: false
});
(function($) {
$('.mui-scroll-wrapper').scroll({
indicators: false //是否显示滚动条
});
var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
var html3 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';
var item2 = document.getElementById('item2mobile');
var item3 = document.getElementById('item3mobile');
// document.getElementById('slider').addEventListener('slide', function(e) {
// if (e.detail.slideNumber === 1) {
// if (item2.querySelector('.mui-loading')) {
// setTimeout(function() {
// item2.querySelector('.mui-scroll').innerHTML = html2;
// }, 500);
// }
// } else if (e.detail.slideNumber === 2) {
// if (item3.querySelector('.mui-loading')) {
// setTimeout(function() {
// item3.querySelector('.mui-scroll').innerHTML = html3;
// }, 500);
// }
// }
// });
var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-' + this.value;
//force repaint
sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
}
});
})(mui);
</script>
</body>
</html>
0 个回复