@using Model;
@{
<meta charset="utf-8">
<title>Hello MUI</title>
<script src="~/js/mui.min.js"></script>
<link rel="stylesheet" href="~/css/mui.min.css">
<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">
<style>
html,
body {
background-color: #efeff4;
}
p {
text-indent: 22px;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
.mui-off-canvas-left {
color: #fff;
}
.title {
margin: 35px 15px 10px;
}
.title + .content {
margin: 10px 15px 35px;
color: #bbb;
text-indent: 1em;
font-size: 14px;
line-height: 24px;
}
input {
color: #000;
}
</style> }
<!DOCTYPE html>
<html>
<body>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">菜单选择界面</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-12 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">试看</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-12 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-email"><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-12 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">电影</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-12 mui-col-sm-4">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">剧场版</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</aside>
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<a id="offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
<h1 class="mui-title">主界面</h1>
</header>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<a href="www.baidu.com" class="mui-active">竟然不能点击奇了怪了</a>
<!-- 不信你试试手机 电脑可以-->
</div>
</div>
</div>
</div>
</div>
<script>
//侧滑容器父节点
var offCanvasWrapper = mui('#offCanvasWrapper');
//主界面‘显示侧滑菜单’按钮的点击事件
document.getElementById('offCanvasSide').addEventListener('tap', function () {
offCanvasWrapper.offCanvas('show');
});
//实现ios平台原生侧滑关闭页面；
if (mui.os.plus && mui.os.ios) {
mui.plusReady(function () { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
plus.webview.currentWebview().setStyle({
'popGesture': 'none'
});
});
}
</script> </body>
</html>
0 个回复