<!DOCTYPE html>
<html lang="zh
-CN">
<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">
<link rel="stylesheet" href="css/jquery.fullPage.css">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="css/
mui.min.css">
<link rel="stylesheet" href="css/app.css">
<style>
.section1 {
background: url(image/bjt.jpg) 50%;
height: 100%;
width: 100%;
background
-position: center 0;
background
-repeat: no
-repeat;
background
-attachment: fixed;
background
-size: cover;
-webkit
-background
-size: cover;
/*兼容Webkit内核浏览器如Chrome和Safari */
-o
-background
-size: cover;
/*兼容Opera */
zoom: 1;
}
.section2 {
}
</style>
<!
--<script src="js/jquery
-1.8.3.min.js"></script>
-->
<script src="js/
mui.min.js"></script>
<!
--<script src="js/jquery.fullPage.min.js"></script>
-->
<script>
$(function() {
$('#dowebok').fullpage();
});
</script>
</head>
<body>
<div id="dowebok">
<div class="section section1"></div>
<div class="section section2" style="background: ;">
<div class="
mui-content">
<div class="
mui-content
-padded" style="margin: 5px;">
<h5>填写收货地址：</h5>
<form class="
mui-input-group">
<div class="
mui-input-row">
<
label>姓名</
label>
<
input type="text" placeholder="填写姓名">
</div>
<div class="
mui-input-row">
<
label>电话</
label>
<
input type="text" class="
mui-input-clear" placeholder="填写电话">
</div>
<div class="
mui-input-row">
<
label>收货地址</
label>
<
input type="text" class="
mui-input-speech
mui-input-clear" placeholder="详细地址">
</div>
<!
--
作者：1092979575@qq.com
时间：2015
-09
-18
描述：
-->
<ul class="
mui-table
-view">
<li class="
mui-table
-view
-cell
mui-radio
mui-left">
<
input name="radio" type="radio" class="
mui-radio">Item 5
</li>
<li class="
mui-table
-view
-cell
mui-radio
mui-left">
<
input name="radio" type="radio">Item 6
</li>
</ul>
<!
--
作者：1092979575@qq.com
时间：2015
-09
-18
描述：
-->
<div class="
mui-button-row">
<
button type="
button" class="
mui-btn
mui-btn
-primary" onclick="return false;">确认</
button>
<
button type="
button" class="
mui-btn
mui-btn
-danger" onclick="return false;">取消</
button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<script>
mui.init({
swipeBack:true //启用右滑关闭功能
});
//语音识别完成事件
document.getElementById("search").addEventListener('recognized', function(e) {
console.log(e.detail.value);
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#background
-image").fullscreenBackground();
});
</script>
<!
--
-->
<script>
mui.init({
swipeBack:true //启用右滑关闭功能
});
//圆角列表开关处理
document.getElementById("M_Toggle").addEventListener('toggle',function (e) {
var isActive = e.detail.isActive;
var table = document.querySelector('.
mui-table
-view');
var card = document.querySelector('.
mui-card');
if (isActive) {
card.appendChild(table);
card.style.display = '';
} else {
var content = document.querySelector('.
mui-content');
content.insertBefore(table, card);
card.style.display = 'none';
}
});
</script>
</html>
本文分享了使用mui框架时如何解决input输入框后插入查询按钮的问题，并详细介绍了调整样式以实现正确布局的方法。
扫一扫
721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
