拼图开发文档

按钮交互

按钮交互为触发按钮的情况下,属性,状态,异步等交互行为。

状态交互

触发按钮时,改变当前按钮的属性,如样式、值、禁用状态等。

    <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、样式classdisabled禁用等,触发后将按钮属性替换。

验证

按钮交互过程中,常与表单相互使用,并传递表单的数据,可结合表单验证功能,对表单先验证。

    <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>
  

完整周期

按钮交互的生命周期为触发按钮的整个交互过程。包含状态、验证、确认、异步、倒计时五个过程。

请输入验证码
123456

关闭
    <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>