基于amazeui的充值界面

所属分类：UI-布局

41002 470 查看评论 (17)

分享到微信朋友圈

查看演示立即下载

插件描述：是基于妹子ui的一个充值界面，包含美化radio，验证等功能，自己写的小东西，给大家分享下。

使用方法

插件是基于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();
	}
    });
});

jQuery图片放大预览

基于swiper带视差切换效果的轮播图