<!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">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<!--App自定义的css-->
<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
</head>
<body>
<style>
.mui-control-content {
background-color: white;
min-height: 415px;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
.orderlist input, .orderlist button, .orderlist .mui-btn {
margin-left: 10px;
}
</style>
<header class="mui-bar mui-bar-nav">
<a href="main.html" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">订单列表</h1>
</header>
<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>
<a class="mui-control-item" href="#item3mobile">
已取消
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group orderlist">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-5">
<p class="mui-h6 mui-ellipsis">订单号：123456789 </p>
</div>
<div class="mui-table-cell mui-col-xs-7 mui-text-right">
<p class="mui-h6 mui-ellipsis">签收：07-06-14 14:25:47</p>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<h4 class="mui-ellipsis-2">寄件方-收件方</h4>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<a href="#editAddress" class="mui-btn mui-btn-primary mui-pull-right">评价</a>
<a href="#editAddress" class="mui-btn mui-btn-default mui-pull-right">删除订单</a>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-5">
<p class="mui-h6 mui-ellipsis">订单号：123456789 </p>
</div>
<div class="mui-table-cell mui-col-xs-7 mui-text-right">
<p class="mui-h6 mui-ellipsis">签收：07-06-14 14:25:47</p>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<h4 class="mui-ellipsis-2">寄件方-收件方</h4>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<a href="#editAddress" class="mui-btn mui-btn-primary mui-pull-right">评价</a>
<a href="#editAddress" class="mui-btn mui-btn-default mui-pull-right">删除订单</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div id="scroll2" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div id="scroll3" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init({
swipeBack: false
});
(function($) {
$('.mui-scroll-wrapper').scroll({
indicators: true //是否显示滚动条
});
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-segmented-control-' + this.value;
//force repaint
sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
}
});
})(mui);
</script>
</body>
</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">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<!--App自定义的css-->
<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
</head>
<body>
<style>
.mui-control-content {
background-color: white;
min-height: 415px;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
.orderlist input, .orderlist button, .orderlist .mui-btn {
margin-left: 10px;
}
</style>
<header class="mui-bar mui-bar-nav">
<a href="main.html" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">订单列表</h1>
</header>
<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>
<a class="mui-control-item" href="#item3mobile">
已取消
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group orderlist">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-5">
<p class="mui-h6 mui-ellipsis">订单号：123456789 </p>
</div>
<div class="mui-table-cell mui-col-xs-7 mui-text-right">
<p class="mui-h6 mui-ellipsis">签收：07-06-14 14:25:47</p>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<h4 class="mui-ellipsis-2">寄件方-收件方</h4>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<a href="#editAddress" class="mui-btn mui-btn-primary mui-pull-right">评价</a>
<a href="#editAddress" class="mui-btn mui-btn-default mui-pull-right">删除订单</a>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-5">
<p class="mui-h6 mui-ellipsis">订单号：123456789 </p>
</div>
<div class="mui-table-cell mui-col-xs-7 mui-text-right">
<p class="mui-h6 mui-ellipsis">签收：07-06-14 14:25:47</p>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<h4 class="mui-ellipsis-2">寄件方-收件方</h4>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<a href="#editAddress" class="mui-btn mui-btn-primary mui-pull-right">评价</a>
<a href="#editAddress" class="mui-btn mui-btn-default mui-pull-right">删除订单</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div id="scroll2" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div id="scroll3" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init({
swipeBack: false
});
(function($) {
$('.mui-scroll-wrapper').scroll({
indicators: true //是否显示滚动条
});
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-segmented-control-' + this.value;
//force repaint
sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
}
});
})(mui);
</script>
</body>
</html>
4679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
