POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/js/buttons.html

   1 <div class="bs-docs-section">
   2   <h1 id="buttons" class="page-header">Buttons <small>button.js</small></h1>
   3
   4   <p class="lead">Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
   5
   6   <div class="bs-callout bs-callout-danger" id="callout-buttons-ff-autocomplete">
   7     <h4>Cross-browser compatibility</h4>
   8     <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a>.</p>
   9   </div>
  10
  11   <h2 id="buttons-stateful">Stateful</h2>
  12   <p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
  13   <div class="bs-callout bs-callout-info" id="callout-buttons-state-names">
  14     <h4>Use whichever state you like!</h4>
  15     <p>For the sake of this demonstration, we are using <code>data-loading-text</code> and <code>$().button('loading')</code>, but that's not the only state you can use. <a href="#buttons-methods">See more on this below in the <code>$().button(string)</code> documentation</a>.</p>
  16   </div>
  17   <div class="bs-example">
  18     <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  19       Loading state
  20     </button>
  21   </div><!-- /example -->
  22 {% highlight html %}
  23 <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  24   Loading state
  25 </button>
  26
  27 <script>
  28   $('#myButton').on('click', function () {
  29     var $btn = $(this).button('loading')
  30     // business logic...
  31     $btn.button('reset')
  32   })
  33 </script>
  34 {% endhighlight %}
  35
  36   <h2 id="buttons-single-toggle">Single toggle</h2>
  37   <p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
  38   <div class="bs-callout bs-callout-warning" id="callout-buttons-single-pretoggled">
  39     <h4>Pre-toggled buttons need <code>.active</code> and <code>aria-pressed="true"</code></h4>
  40     <p>For pre-toggled buttons, you must add the <code>.active</code> class and the <code>aria-pressed="true"</code> attribute to the <code>button</code> yourself.</p>
  41   </div>
  42   <div class="bs-example">
  43     <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  44       Single toggle
  45     </button>
  46   </div><!-- /example -->
  47 {% highlight html %}
  48 <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  49   Single toggle
  50 </button>
  51 {% endhighlight %}
  52
  53   <h2 id="buttons-checkbox-radio">Checkbox / Radio</h2>
  54   <p>Add <code>data-toggle="buttons"</code> to a <code>.btn-group</code> containing checkbox or radio inputs to enable toggling in their respective styles.</p>
  55   <div class="bs-callout bs-callout-warning" id="callout-buttons-multi-preselected">
  56     <h4>Preselected options need <code>.active</code></h4>
  57     <p>For preselected options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
  58   </div>
  59   <div class="bs-callout bs-callout-warning" id="callout-buttons-only-click">
  60     <h4>Visual checked state only updated on click</h4>
  61     <p>If the checked state of a checkbox button is updated without firing a <code>click</code> event on the button (e.g. via <code>&lt;input type="reset"&gt;</code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
  62   </div>
  63   <div class="bs-example" data-example-id="buttons-checkbox">
  64     <div class="btn-group" data-toggle="buttons">
  65       <label class="btn btn-primary active">
  66         <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
  67       </label>
  68       <label class="btn btn-primary">
  69         <input type="checkbox" autocomplete="off"> Checkbox 2
  70       </label>
  71       <label class="btn btn-primary">
  72         <input type="checkbox" autocomplete="off"> Checkbox 3
  73       </label>
  74     </div>
  75   </div><!-- /example -->
  76 {% highlight html %}
  77 <div class="btn-group" data-toggle="buttons">
  78   <label class="btn btn-primary active">
  79     <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  80   </label>
  81   <label class="btn btn-primary">
  82     <input type="checkbox" autocomplete="off"> Checkbox 2
  83   </label>
  84   <label class="btn btn-primary">
  85     <input type="checkbox" autocomplete="off"> Checkbox 3
  86   </label>
  87 </div>
  88 {% endhighlight %}
  89
  90   <div class="bs-example" data-example-id="buttons-radio">
  91     <div class="btn-group" data-toggle="buttons">
  92       <label class="btn btn-primary active">
  93         <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  94       </label>
  95       <label class="btn btn-primary">
  96         <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  97       </label>
  98       <label class="btn btn-primary">
  99         <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
 100       </label>
 101     </div>
 102   </div><!-- /example -->
 103 {% highlight html %}
 104 <div class="btn-group" data-toggle="buttons">
 105   <label class="btn btn-primary active">
 106     <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
 107   </label>
 108   <label class="btn btn-primary">
 109     <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
 110   </label>
 111   <label class="btn btn-primary">
 112     <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
 113   </label>
 114 </div>
 115 {% endhighlight %}
 116
 117   <h2 id="buttons-methods">Methods</h2>
 118   <h4><code>$().button('toggle')</code></h4>
 119   <p>Toggles push state. Gives the button the appearance that it has been activated.</p>
 120
 121   <h4><code>$().button('reset')</code></h4>
 122   <p>Resets button state - swaps text to original text.</p>
 123
 124   <h4><code>$().button(string)</code></h4>
 125   <p>Swaps text to any data defined text state.</p>
 126
 127 {% highlight html %}
 128 <button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
 129   ...
 130 </button>
 131
 132 <script>
 133   $('#myStateButton').on('click', function () {
 134     $(this).button('complete') // button text will be "finished!"
 135   })
 136 </script>
 137 {% endhighlight %}
 138 </div>