按钮交互
按钮交互为触发按钮的情况下,属性,状态,异步等交互行为。
状态交互
触发按钮时,改变当前按钮的属性,如样式、值、禁用状态等。
<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>