按钮交互
按钮交互为触发按钮的情况下，属性，状态，异步等交互行为。
状态交互
触发按钮时，改变当前按钮的属性，如样式、值、禁用状态等。
<button type="button" id="button" class="button">状态按钮</button>
<script>
$(function(){
$("#button").button({
"status":{
"attr":{
"text":"按钮状态交互",
"class":"button bg-main",
"disabled":true
},
"function":function(){
console.log("status");
}
}
});
});
</script>
状态status包含2个参数，一个为attr属性，另一个为执行函数；其中attr包含文本text、样式class、disabled禁用等，触发后将按钮属性替换。
验证
按钮交互过程中，常与表单相互使用，并传递表单的数据，可结合表单验证功能，对表单先验证。
<form class="form validate-tips" id="validate" action="/">
<div class="input-group">
<label>手机</label>
<div class="input-block">
<input type="text" id="mobile-validate" name="mobile" class="input" placeholder="请填写你的手机号码" data-validate='{"required":true,"mobile":true,"invalid":"请填写中国大陆的手机号码"}' />
</div>
</div>
<div class="form-button">
<button type="button" id="button-validate" class="button">发送验证码</button>
</div>
</form>
<script>
$(function(){
$('#validate').validate();
});
</script>
<script>
$(function(){
$("#button-validate").button({
"validate":{
"data":"#mobile-validate",
"attr":{
"text":"验证不通过",
"class":"button",
},
"function":function(){
console.log("validate");
}
}
});
});
</script>
如上示例，当表单验证不通过时，按钮提示验证不通过，并还原按钮状态。
验证validate需要配合表单使用，包含3个参数，参数data为需要验证的输入框#id，attr为验证不通过的提示属性，function为验证不通过后执行的函数。
确认框
验证通过后，可能会有确认的过程，此时可使用对话框确认。
<button type="button" id="button-confirm" class="button">确认按钮</button>
<script>
$(function(){
$("#button-confirm").button({
"confirm":{
"dialog":{
"target":{"id":"buttonconfirm","text":"确认提交？","confirm":"提交","cancel":"取消","break":true},
"dismiss":false
},
"attr":{
"text":"正在确认",
"class":"button",
},
"function":function(){
console.log("confirm");
}
},
});
});
</script>
异步
触发按钮后，执行异步，同时可通过data传递参数，data可以是Json，也可以指定对象，多个对象用英文的,分开；异步完成后通过function执行回调。
<button type="button" name="ajax" id="button-ajax" class="button">异步按钮</button>
<script>
$(function(){
$("#button-ajax").button({
"ajax":{
"url":"/2.0/data/button.html",
"data":"#mobile",
"attr":{
"text":"异步交互",
"class":"button border-main",
"disabled":true
},
"function":function(data){
$("#button-ajax").attr("disabled",false).text(data["msg"]);
}
},
});
});
</script>
倒计时
按钮触发后显示倒计时，包含点击时的属性attr，秒数second，倒计时文本text(#s#为秒数变化值)及回调函数，当有异步时，同时返回异步的json数据。
<button type="button" name="ajax" id="button-timer" class="button">倒计时按钮</button>
<script>
$(function(){
$("#button-timer").button({
"timer":{
"attr":{
"text":"开始倒计时",
"class":"button bg-danger",
"disabled":true
},
"second":10,
"text":"#s# 秒倒计时",
"function":function(data){
$("#button-timer").attr("disabled",false).text("重新倒计时");
//有异步时也会返回数据供使用
console.log(data);
}
},
});
});
</script>
完整周期
按钮交互的生命周期为触发按钮的整个交互过程。包含状态、验证、确认、异步、倒计时五个过程。
<form class="form" id="form-full" action="/">
<div class="input-group">
<label>手机</label>
<div class="input-block">
<input type="text" id="mobile" name="mobile" class="input" placeholder="请填写你的手机号码" data-validate='{"required":true,"mobile":true,"invalid":"请填写中国大陆的手机号码"}' />
</div>
</div>
<div class="input-group">
<label>邮箱</label>
<div class="input-block">
<input type="text" id="email" name="email" class="input" placeholder="请输入您的邮箱" data-validate='{"required":true,"email":true,"invalid":"邮箱格式错误"}' />
</div>
</div>
<div class="form-button">
<button type="button" id="button-full" class="button">交互演示</button>
<button type="reset" class="button">重置</button>
</div>
<div class="dialog" id="dialog">
<div class="dialog-body dialog-content">
<div class="dialog-text">
<p>请输入验证码<br /><span class="size-large text-main">123456</span></p>
<div class="input-group">
<div class="input-block" align="center">
<div class="input-verify" data-form="verify">
<input type="text" name="verify" id="verify" maxlength="6" class="input" data-validate='{"required":true,"ajax":{"url":"/2.0/data/button-ajax-verify.php","data":"mobile,email"},"invalid":"请输入验证码"}' />
<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>
</div>
</div>
<div data-confirm="dialog" class="hidden">确定</div>
</div>
<div data-cancel="dialog" class="dialog-confirm">关闭</div>
</div>
</div>
</form>
JS调用
<script>
$(function(){
//表单验证
$('#form-full').validate({
"ajax_verify":function(data){
if(data["error"]===0){
//确发确认按钮
$("#form-full").find('[data-confirm="dialog"]').trigger("click");
}
}
});
//按钮交互
$("#button-full").button({
"status":{
"attr":{
"text":"按钮交互",
"class":"button bg-main",
"disabled":true
},
"function":function(){console.log("status");}
},
"validate":{
"data":"#mobile,#email",
"attr":{
"text":"验证不通过",
"class":"button",
},
"function":function(){console.log("validate");}
},
"confirm":{
"dialog":{
"target":"#dialog",
"dismiss":false
},
"attr":{
"text":"正在确认",
"class":"button",
},
"function":function(){
console.log("confirm");
//还原验证框状态
$("#verify").val("").siblings("ul").find("li").removeClass("active").html("");
$("#verify").closest(".input-block").children(".input-validate").remove();
$("#form-full").find('[data-form="verify"]').trigger("click");
}
},
"ajax":{
"url":"/2.0/data/button.html",
"data":"#mobile,#email",
"attr":{
"text":"异步交互",
"class":"button border-main",
},
"function":function(data){
$("#button").text(data["msg"]);
console.log(data);
}
},
"timer":{
"attr":{
"text":"开始倒计时",
"class":"button bg-danger",
},
"second":10,
"text":"#s# 秒倒计时",
"function":function(data){
$("#button-full").attr("disabled",false).removeClass("bg-danger").text("再次提交");
//也会返回异步的数据供使用
console.log(data);
}
},
});
});
</script>