基于amazeui的充值界面

所属分类:UI-布局

基于amazeui的充值界面 ie兼容9

使用方法

插件是基于amaze-ui写的,写之前先引入:

<link rel="stylesheet" type="text/css" href="css/amazeui.min.css" />
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>

美化radio:

<script type="text/javascript" src="js/ui-choose.js"></script>
// 将所有.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())
}		

提示信息:

data-validation-message="xxxxxxxxxxxxxxx"   //控制验证提示内容,写入input里即可。
$(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();
	}
    });
});
相关插件-布局

大气的登录注册页面

大气的登录注册页面模板,无多余代码使用方便
  布局
 23662  253

响应式网站

响应式网站模板,调整浏览器大小查看效果。
  布局
 22153  98

5款不同的多级导航切换DIV的jQuery特效

5款不同的多级导航切换的jQuery特效,适用于APP前端特效,点击二级菜单会切换出三级菜单来替换二级菜单。再次点击又会切换回二级菜单,每款都有很炫酷的特效。欢迎大家下载研究研究此特效。
  布局
 20583  97

Amaze UI后台管理模板

Amaze UI后台管理模板
  布局
 32013  293

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币

    215359721 0
    2018/3/7 15:04:22
    S&P 0
    2018/2/8 1:03:22
    我把这个和其他的demo整合之后发现页面有时候会自动刷新能不能帮我看看 多谢
        19930
        2018/2/8 8:40:42
        插件本身所用到的东西很少,逻辑也很简单,或者是与amazeui的验证表单有冲突吧。
        S&P0
        2018/2/8 11:33:43
        我知道了 因为那个提交按钮时submit 把它改成button就好了 细节错误好可怕
    回复
    老表 0
    2018/1/17 14:51:17
    九江老乡
        19930
        2018/1/18 10:34:28

        哈哈

    回复
    登录账号 0
    2018/1/2 20:11:15
    Maple_Jade 0
    2017/12/25 15:05:33

    其他金额输入带小数时显示错误,如输入15.75,下方显示 15.75.00

        19931
        2017/12/25 16:06:13
        <input type="number" min="10" max="10000" value="10.00元" class="othbox" onkeyup="this.value=this.value.replace(/\D/g,'')" data-validation-message="充值金额范围:10-10000元" />

        在输入框中添加正则:只允许正整数且不能带有小数点。

        $(document).ready(function() {
            $('.othbox').on('input propertychange', function() {
                var num = $(this).val();
                $('.rechnum').html("¥" + parseFloat(num));
            });
        });

        变量‘num’用parseFloat()包裹;

    回复
    雪利网络 0
    2017/12/25 8:43:45
取消回复