使用语音识别的搜索框输入文字后,上划页面,底部选项卡会跳到顶部(打包成android app后)。
代码如下
<!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>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-home mui-pull-left" href="javascript:alert('测试按钮.首页');"></a>
<a class="mui-icon mui-icon-person mui-pull-right" href="javascript:alert('测试按钮.个人中心');"></a>
<h1 class="mui-title">测试</h1>
</header>
<div style="padding-top: 3.5em;">
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-speech mui-input-clear" placeholder="带语音识别的搜索框">
</div>
</div>
<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="javascript:alert('静静看这世界');">
<img src="http://dev.dcloud.net.cn/mui/assets/img/yuantiao.jpg">
</a>
<p class="mui-slider-title">
静静看这世界
</p>
</div>
<div class="mui-slider-item">
<a href="javascript:alert('幸福就是可以一起睡觉');">
<img src="http://dev.dcloud.net.cn/mui/assets/img/shuijiao.jpg">
</a>
<p class="mui-slider-title">
幸福就是可以一起睡觉
</p>
</div>
<div class="mui-slider-item">
<a href="javascript:alert('想要一间这样的木屋,静静的喝咖啡');">
<img src="http://dev.dcloud.net.cn/mui/assets/img/muwu.jpg">
</a>
<p class="mui-slider-title">
想要一间这样的木屋,静静的喝咖啡
</p>
</div>
<div class="mui-slider-item">
<a href="javascript:alert('Color of SIP CBD');">
<img src="http://dev.dcloud.net.cn/mui/assets/img/cbd.jpg">
</a>
<p class="mui-slider-title">
Color of SIP CBD
</p>
</div>
<div class="mui-slider-item">
<a href="javascript:alert('静静看这世界');">
<img src="http://dev.dcloud.net.cn/mui/assets/img/yuantiao.jpg">
</a>
<p class="mui-slider-title">
静静看这世界
</p>
</div>
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="javascript:alert('幸福就是可以一起睡觉');">
<img src="http://dev.dcloud.net.cn/mui/assets/img/shuijiao.jpg">
</a>
<p class="mui-slider-title">
幸福就是可以一起睡觉
</p>
</div>
</div>
<div class="mui-slider-indicator mui-text-right">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<div style="padding-bottom: 3.5em;">
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="javascript:alert('测试按钮.幸福就是可以一起睡觉');">
<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/shuijiao.jpg">
<div class="mui-media-body">幸福就是可以一起睡觉</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="javascript:void(0):">
<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/muwu.jpg">
<div class="mui-media-body">想要一间这样的木屋,静静的喝咖啡</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="javascript:void(0):">
<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="javascript:void(0):">
<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="javascript:void(0):">
<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="javascript:void(0):">
<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="javascript:void(0):">
<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="javascript:void(0):">
<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="javascript:void(0):">
<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="javascript:void(0):">
<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</li>
</ul>
</div>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="javascript:call('10086');">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话咨询</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">在线咨询</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-sms">
<span class="mui-icon mui-icon-chatboxes"></span>
<span class="mui-tab-label">短信咨询</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">查看地图</span>
</a>
</nav>
</body>
</html>