<!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.min.css">
<link rel="stylesheet" href="css/style.css" />
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body> <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>
<a class="mui-control-item" href="#item3mobile">
零食
</a>
<a class="mui-control-item" href="#item4mobile">
饮料
</a>
</div>
<a class="a_ad" href="goods_ad.html"></a>
<div id="sliderProgressBar" class="mui-content mui-slider-progress-bar" style="width: 10%;"></div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view ">
<li class="mui-table-view-cell">
<div class="pic">
<img src="img/pic.png"/>
</div>
<ul class="ul1">
<li><p class="w_big">【精选】冬笋猪蹄双人豪华套餐</p></li>
<br /><br />
<li><p class="w_orange"> ￥36.8</p></li>
<br />
<li><p class="w_small"> 库存：223</p></li>
</ul>
<div class="good_btn">
<a class="a5" href="goods_ad.html"></a>
<a class="a6"></a>
</div>
</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div class="mui-loading">
<div class="mui-spinner">
<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div class="mui-loading">
<div class="mui-spinner">
<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
<div class="mui-spinner-indicator mui-spinner-indicator10"></div>
</div>
</div>
</div>
<div id="item4mobile" class="mui-slider-item mui-control-content">
<div class="mui-loading">
<div class="mui-spinner">
<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
<div class="mui-spinner-indicator mui-spinner-indicator10"></div>
</div>
</div>
</div>
</div> </div>
<script>
mui.init({
swipeBack: true
});
(function($) {
$('#scroll').scroll({
indicators: false //是否显示滚动条
});
var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell mui-media"><a href="#"><img class="mui-media-object mui-pull-left" src="img/pic2.png"><div class="mui-media-body"><h4>九里飘香</h4><></div></a></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.innerHTML = html2;
}, 1000);
}
} else if (e.detail.slideNumber === 2) {
if (item3.querySelector('.mui-loading')) {
setTimeout(function() {
item3.innerHTML = html3;
}, 1000);
}
}
});
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-segmented-' + this.value;
//force repaint
sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
}
});
})(mui);
</script>
<script>
mui('.mui-scroll-wrapper').scroll();
</script> <script type="text/javascript" charset="utf-8">
mui.back = function(){
//执行父页面的关闭逻辑；
mui.currentWebview.opener().evalJS("mui.back()");
}
</script>
</body>
</html>
0 个回复