<!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>
<!--<script src="js/mui.pullToRefresh.js"></script>
<script src="js/mui.pullToRefresh.material.js"></script>-->
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<style type="text/css">
html, body {
height: 100%;
}
.mui-content{
height: 100%;
}
.mui-slider{
height: 100%;
}
.mui-slider-group{
height: 100%;
}
</style>
<body>
<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 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>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div id="scroll2" class="mui-scroll-wrapper">
<div class="mui-scroll">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
mui.plusReady(function(){
mui('#scroll1').pullRefresh({
container: '#scroll1',
down: {
auto:true,
contentdown : "下拉可以刷新",
contentover : "释放立即刷新",
contentrefresh : "正在刷新...",
callback: function() {
setTimeout(function() {
mui.toast('scroll1--down');
mui('#scroll1').pullRefresh().endPulldownToRefresh(false);
}, 1000);
}
},
up:{
contentrefresh: "正在加载...",
contentnomore: "没有更多数据了",
callback: function() {
setTimeout(function() {
mui.toast('scroll1--up');
mui('#scroll1').pullRefresh().endPullupToRefresh(false);
}, 1000);
}
}
});
});
</script> </body>
</html>
0 个回复