实例介绍
【实例简介】
【实例截图】
【核心代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基于amazeui用户充值页面 - 源码之家</title>
<link rel="stylesheet" type="text/css" href="css/amazeui.min.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div class="pay">
<!--主内容开始编辑-->
<div class="tr_recharge">
<div class="tr_rechtext">
<p class="te_retit"><img src="images/coin.png" alt="" />充值中心</p>
<p>1.招兵币是51招兵买马退出的虚拟货币，你可以使用招兵币购买站内的简历。</p>
<p>2.招兵币与人民币换算为1：1，即1元=1招兵币，你可以选择支付宝或者是微信的付款方式来进行充值，招兵币每次10个起充。</p>
</div>
<form action="" class="am-form" id="doc-vld-msg">
<div class="tr_rechbox">
<div class="tr_rechhead">
<img src="images/ys_head2.jpg" />
<p>充值帐号：
<a>王凯</a>
</p>
<div class="tr_rechheadcion">
<img src="images/coin.png" alt="" />
<span>当前余额：<span>1000招兵币</span></span>
</div>
</div>
<div class="tr_rechli am-form-group">
<ul class="ui-choose am-form-group" id="uc_01">
<li>
<label class="am-radio-inline">
<input type="radio" value="" name="docVlGender" required data-validation-message="请选择一项充值额度"> 10￥
</label>
</li>
<li>
<label class="am-radio-inline">
<input type="radio" name="docVlGender" data-validation-message="请选择一项充值额度"> 20￥
</label>
</li>
<li>
<label class="am-radio-inline">
<input type="radio" name="docVlGender" data-validation-message="请选择一项充值额度"> 50￥
</label>
</li>
<li>
<label class="am-radio-inline">
<input type="radio" name="docVlGender" data-validation-message="请选择一项充值额度"> 其他金额
</label>
</li>
</ul>
<!--<span>1招兵币=1元 10元起充</span>-->
</div>
<div class="tr_rechoth am-form-group">
<span>其他金额：</span>
<input type="number" min="10" max="10000" value="10.00元" class="othbox" data-validation-message="充值金额范围：10-10000元" />
<!--<p>充值金额范围：10-10000元</p>-->
</div>
<div class="tr_rechcho am-form-group">
<span>充值方式：</span>
<label class="am-radio">
<input type="radio" name="radio1" value="" data-am-ucheck required data-validation-message="请选择一种充值方式"><img src="images/wechatpay.png">
</label>
<label class="am-radio" style="margin-right:30px;">
<input type="radio" name="radio1" value="" data-am-ucheck data-validation-message="请选择一种充值方式"><img src="images/zfbpay.png">
</label>
</div>
<div class="tr_rechnum">
<span>应付金额：</span>
<p class="rechnum">0.00元</p>
</div>
</div>
<div class="tr_paybox">
<input type="submit" value="确认支付" class="tr_pay am-btn" />
<span>温馨提示：招兵币只限于在简历详情中购买简历，遇到问题请拨打联系电话。</span>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script type="text/javascript" src="js/ui-choose.js"></script>
<script type="text/javascript">
// 将所有.ui-choose实例化
$('.ui-choose').ui_choose();
// uc_01 ul 单选
var uc_01 = $('#uc_01').data('ui-choose'); // 取回已实例化的对象
uc_01.click = function(index, item) {
console.log('click', index, item.text())
}
uc_01.change = function(index, item) {
console.log('change', index, item.text())
}
$(function() {
$('#uc_01 li:eq(3)').click(function() {
$('.tr_rechoth').show();
$('.tr_rechoth').find("input").attr('required', 'true')
$('.rechnum').text('10.00元');
})
$('#uc_01 li:eq(0)').click(function() {
$('.tr_rechoth').hide();
$('.rechnum').text('10.00元');
$('.othbox').val('');
})
$('#uc_01 li:eq(1)').click(function() {
$('.tr_rechoth').hide();
$('.rechnum').text('20.00元');
$('.othbox').val('');
})
$('#uc_01 li:eq(2)').click(function() {
$('.tr_rechoth').hide();
$('.rechnum').text('50.00元');
$('.othbox').val('');
})
$(document).ready(function() {
$('.othbox').on('input propertychange', function() {
var num = $(this).val();
$('.rechnum').html(num ".00元");
});
});
})
$(function() {
$('#doc-vld-msg').validator({
onValid: function(validity) {
$(validity.field).closest('.am-form-group').find('.am-alert').hide();
},
onInValid: function(validity) {
var $field = $(validity.field);
var $group = $field.closest('.am-form-group');
var $alert = $group.find('.am-alert');
// 使用自定义的提示信息 或 插件内置的提示信息
var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
if(!$alert.length) {
$alert = $('<div class="am-alert am-alert-danger"></div>').hide().
appendTo($group);
}
$alert.html(msg).show();
}
});
});
</script>
<div style="text-align:center;">
<p>更多源码：<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论