<!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.min.css">
<link rel="stylesheet" href="../../css/icons-extra.css"/>
<script src="../../js/mui.min.js"></script>
<script src="../../js/mui.pullToRefresh.js"></script>
<script src="../../js/mui.pullToRefresh.material.js"></script>
</head>
<style>
.mui-segmented-control{
font-size:1.4rem ;
}
#p {
white: 100%;
border: 1px solid #000000;
margin: 2px 0;
color: #000000;
font-size: 1.3rem;
padding-left: 1.5%;
}
#span1 {
margin-left: 51%;
}
table{
border:1px solid #000000;
}
table tr,
table td {
font-size: 1.3rem;
text-align: center;
border: 1px solid #000000;
}
</style>
<body>
<div id="app" class="mui-content">
<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" style="font-size: 1.7rem;">首 页</h1>
</header>
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="../../img/assets/u28.jpg"></a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item"><a href="#"><img src="../../img/assets/u28.jpg"></a></div>
<!--第二张-->
<div class="mui-slider-item"><a href="#"><img src="../../img/assets/u28.jpg"></a></div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="../../img/assets/u28.jpg"></a>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
<!--图片下方四个按钮-->
<div class="mui-segmented-control">
<a class="mui-control-item" href="#item1" onclick="a()">天气</a>
<a class="mui-control-item" href="#item2">河道巡逻</a>
<a class="mui-control-item" href="#item1">待办事件</a>
<a class="mui-control-item" href="#item2">我的关注</a>
</div>
<p id="p">
<span id="span">河道水质</span>
<span id="span1" onclick="todetail5" style="color: #0000FF;">所用断面》</span>
</p>
<p id="p">
<span id="span">河道信息</span>
<span id="span1" onclick="todetail5" style="color: #0000FF;">所用河道》</span>
</p>
<table cellspacing="0" cellpadding="0" border="1" width="100%">
<tr>
<td>渭河</td>
<td>泾河</td>
<td>黑河</td>
<td>捞河</td>
</tr>
<tr>
<td>渭河</td>
<td>泾河</td>
<td>黑河</td>
<td>捞河</td>
</tr>
<tr>
<td>渭河</td>
<td>泾河</td>
<td>黑河</td>
</tr>
</table>
<p id="p">
<span id="span">湖泊信息</span>
<span id="span1" @click="todetail6" style="color: #0000FF;">所用湖泊》</span>
</p>
<table cellspacing="0" cellpadding="0" border="1" width="100%">
<tr>
<td>大湖</td>
<td>泾河大湖</td>
<td>大湖黑河</td>
<td>大湖捞河</td>
</tr>
<tr>
<td>大湖</td>
<td>大泾河</td>
<td>黑河大湖</td>
<td>捞河大湖</td>
</tr>
</table>
<p id="p">
<span id="span">河道事件</span>
<span id="span1"style="color: #0000FF;">所用事件》</span>
</p>
<div>
<div style="float: left;font-size:1.2rem;">编号:XY-123456</div>
<div style="float:right;color: #0000FF;font-size:1.2rem;">
<div style="float:right;color:#4CAF50;">未处理</div>
已处理中/
</div>
</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个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-3
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-4
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-5
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-6
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-7
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-8
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-9
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-10
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-11
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-12
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-13
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-14
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-15
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-16
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-17
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-18
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-19
</li>
<li class="mui-table-view-cell">
第1个选项卡子项-20
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
mui.init();
function a() {
mui.openWindow('HOME-Two/tianqi.html', 'a1', {});
}
(function($) {
//阻尼系数
var deceleration = mui.os.ios ? 0.003 : 0.0009;
$('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration: deceleration
});
$.ready(function() {
//循环初始化所有下拉刷新，上拉加载。
$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
$(pullRefreshEl).pullToRefresh({
down: {
callback: function() {
var self = this;
setTimeout(function() {
var ul = self.element.querySelector('.mui-table-view');
ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
self.endPullDownToRefresh();
}, 1000);
}
},
up: {
callback: function() {
var self = this;
setTimeout(function() {
var ul = self.element.querySelector('.mui-table-view');
ul.appendChild(createFragment(ul, index, 10));
self.endPullUpToRefresh();
}, 1000);
}
}
});
});
var createFragment = function(ul, index, count, reverse) {
var length = ul.querySelectorAll('li').length;
var fragment = document.createDocumentFragment();
var li;
for(var i = 0; i < count; i++) {
li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
fragment.appendChild(li);
}
return fragment;
};
});
})(mui);
</script>
</html>
zllz
- 发布：2019-03-15 15:46
- 更新：2019-03-15 15:46
- 阅读：862
0 个回复