h5仿微信、支付宝支付键盘
2018-05-08 本文已影响586人
ca5f4c68e450
h5仿微信、支付宝键盘|仿微信支付数字键盘|仿支付宝输入法键盘
头部引入
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>零钱</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/swiper-3.4.1.min.css" />
<link rel="stylesheet" href="css/layout.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/zepto.min.js"></script>
<script src="js/fontSize.js"></script>
<script src="js/swiper-3.4.1.min.js"></script>
<script src="js/wcPop/wcPop.js"></script>
<script src="js/wcKeyBoard.js"></script>
</head>
<body>
HTML片段
<!-- …… 充值弹窗模板.Start -->
<div class="wc__walletPanel-tmpl">
<!-- //充值模板.begin -->
<div id="J__popupTmpl-Recharge" style="display:none;">
<div class="wc__popupTmpl tmpl-recharge">
<i class="wc-xclose"></i>
<ul class="clearfix">
<li class="item">
<div class="itembox flexbox wc__borB" id="J__selectBank">
<label class="txt bankLbl">储蓄卡</label>
<div class="flex1"><p class="bankName">中国银行</p><p class="bankQuota">单日交易限额￥20000.00</p></div>
</div>
</li>
<li class="item">
<div class="itembox wc__borB">
<label class="txt">充值金额</label>
<div class="pt-15 flexbox"><b class="unit">￥</b><input class="ipt-txt flex1" type="text" name="rechargeAmount" readonly /></div>
</div>
</li>
</ul>
</div>
</div>
<!-- //充值模板.end -->
</div>
<script type="text/javascript">
/* ...充值事件.start */
$("#J__wcRecharge").on("click", function(){
var rechargeIdx = wcPop({
id: 'bankRecharge',
skin: 'ios',
content: $("#J__popupTmpl-Recharge").html(),
style: 'background-color: #fff; max-width: 320px; width: 95%;',
shadeClose: false,
btns: [
{
text: '下一步',
style: 'background:#ffba00;color:#fff;font-size:18px;',
onTap() {
var money = $("#bankRecharge input[name='rechargeAmount']").val();
if(!money) return;
alert(money);
wcPop.close(rechargeIdx);
}
}
]
});
});
// 选择银行
$("body").on("click", ".wc__popupTmpl #J__selectBank", function () {
var bankIdx = wcPop({
id: 'bankChoose',
skin: 'androidSheet',
title: '选择银行卡',
shadeClose: true,
btns: [
{
text: '<span class="bankType01" name="中国邮政" quota="单日交易限额￥10000.00">中国邮政储蓄卡(9918)</span>',
style: 'line-height: 50px;',
onTap(e) {
var _bankName = $("#bankChoose .bankType01").attr('name'), _bankQuota = $("#bankChoose .bankType01").attr('quota');
$("#bankRecharge .bankName").text(_bankName);
$("#bankRecharge .bankQuota").text(_bankQuota);
wcPop.close(bankIdx);
}
},
{
text: '<span class="bankType02" name="招商银行" quota="单日交易限额￥50000.00">招商银行储蓄卡(1369)</span>',
style: 'line-height: 50px;',
onTap() {
var _bankName = $("#bankChoose .bankType02").attr('name'), _bankQuota = $("#bankChoose .bankType02").attr('quota');
$("#bankRecharge .bankName").text(_bankName);
$("#bankRecharge .bankQuota").text(_bankQuota);
wcPop.close(bankIdx);
}
},
{
text: '使用新卡充值',
style: 'line-height: 50px;',
onTap() {
alert("使用新卡充值");
}
}
]
});
});
// 充值金额
$("body").on("click", "#bankRecharge input[name='rechargeAmount']", function (e) {
var obj = $(this);
wcKeyBoard({resId: obj});
document.activeElement.blur();
});
/* ...充值事件.end */
// ...关闭
$("body").on("click", ".wc__popupTmpl .wc-xclose", function () {
wcPop.close();
});
</script>
<!-- …… 充值弹窗模板.End -->
效果图
输入法键盘界面
弹窗界面(选择银行卡+金额输入框)
充值界面
选择银行卡界面
如果你觉得这篇文章多多少少帮助到了你一些，打赏倒不重要，麻烦点个关注加喜欢吧，谢谢大家的认可。
