fgm
/
js__bootstrap_demos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
							<!DOCTYPE html>
<html lang="en">
<head>
  <title>Blasting off with Bootstrap</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
  <!--[if lt IE 9]>
  <script src="../js/html5shiv.3-7-0.js"></script>
  <script src="../js/respond.1-4-2.min.js"></script>
  <![endif]-->
</head>

<body>
<div class="container">
  <div class="panel">
    <button class="btn btn-lg btn-default" data-toggle="button">
      Toggle me!
    </button>

    <p>Need to focus elsewhere to see the button return to normal.</p>
  </div>

  <div class="panel">
    <div class="panel-heading"><h3>Checkboxes</h3></div>
    <div class="panel-body">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
          <input type="checkbox" />Option 1
        </label>
        <label class="btn btn-default">
          <input type="checkbox" />Option 2
        </label>
        <label class="btn btn-default">
          <input type="checkbox" />Option 3
        </label>
      </div>
    </div>
  </div>

  <div class="panel">
    <div class="panel-heading"><h3>Radios</h3></div>
    <div class="panel-body">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-info">
          <input name="options" type="radio" />Option 1
        </label>
        <label class="btn btn-info">
          <input name="options" type="radio" />Option 2
        </label>
        <label class="btn btn-info">
          <input name="options" type="radio" />Option 3
        </label>
      </div>
    </div>
  </div>

  <div class="panel">
    <div class="panel-heading"><h3>Progress / complete</h3></div>
    <div class="panel-body">
      <button id="myLoadingButton" type="button" class="btn btn-primary"
        data-loading-text="Loading stuff..."
        data-complete-text="Fully loaded!">
        Load data
      </button>
      <p>Note that, when in the "loading" state, Bootstrap sets .disabled and @disabled on the button.</p>
    </div>
  </div>

  <!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
  <script src="../js/jquery-1.11.2.min.js"></script>
  <script src="../js/bootstrap.js"></script>

  <script type="text/javascript">
    $(document).ready(function () {
      $('#myLoadingButton').click(function () {
        console.log("Setting loading");
        var that = this;
        $(this).button('loading');
        setTimeout(function () {
          console.log("Setting complete");
          $(that).button('complete');
          setTimeout(function () {
            console.log("Setting reset");
            $(that).button('reset');
          }, 2000);
        }, 2000);
      });

//      $('#myLoadingButton').click(function () {
//        $(this).button('reset');
//      });
    });
  </script>

</div>
</body>
</html>