Availity UIKit JavaScript

Modal

Modal windows are panels which appear on top of other page content, providing new information within the same page. They are segmented from other page content through a shadowed background and three-dimensional visual elements, which convey that this content is floating on top of other page content. Modals should always be opened through a user action, such as clicking a link, and should be closed through a click or keyboard ESC press.


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&#xD7;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Popovers

Popovers are small modular windows, which appear on top of other content. While tooltips provide a small amount of information on hover, popovers provide space for greater amounts of information and should be triggered on click. Because they're triggered by click, and don't rely on mouse position (as they would on hover), popovers may contain links and other small interactive content.


<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<!-- Javascript -->
<script type="text/javascript">
$(function () {
  $('[data-toggle="popover"]').popover();
});
</script>

Select2

Single Select

Select2 requires an empty <option></option> tag in order for the plugin option allowClear to work properly.

State


<div class="form-group">
  <label for="single-select" class="control-label">State</label>
  <select id="single-select" class="form-control select2">
      <option></option>
      <optgroup label="Alaskan/Hawaiian Time Zone">
          <option value="AK">Alaska</option>
          <option value="HI">Hawaii</option>
      </optgroup>
  </select>
</div>

<!-- Javascript -->
<script type="text/javascript">
$( ".select2, .select2-multiple" ).select2({
  placeholder: "Select a State",
  allowClear: true
});
</script>

Multiple Select

States


<div class="form-group">
  <label for="multiple" class="control-label">States</label>
  <select id="multiple" class="form-control select2-multiple" multiple>
    <optgroup label="Alaskan/Hawaiian Time Zone">
      <option value="AK">Alaska</option>
      <option value="HI">Hawaii</option>
    </optgroup>
  </select>
</div>

<!-- Javascript -->
<script type="text/javascript">
$(".select2, .select2-multiple" ).select2({
  placeholder: "Select a State"
});
</script>

Tooltips

Tooltips provide text-only contextual information on hover. They are particularly useful for providing small tidbits of information, such as a definition of a term or an additional explanation of what an action does.


<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</button>

<!-- Javascript -->
<script type="text/javascript">
$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});
</script>

Autosuggest

A search-oriented input which allows users to either select an item from an existing list, or enter a new value. As the user types, items that match their input in the existing list are shown below and can be directly selected by the user to complete the input.

State


<div class="form-group">
  <label for="autosuggest">State</label>
  <input type="text" class="form-control form-control-suggest" id="autosuggest" placeholder="Enter a state name">
</div>

Charts

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent. The bars can be plotted vertically or horizontally.


<canvas id="guideChart1" width="900" height="400"></canvas>

<!-- Javascript -->
<script>

// IE8
//
// var el = document.getElementById("myChart");
// G_vmlCanvasManager.initElement(el);
// var ctx = el.getContext('2d');

var ctx = document.getElementById("guideChart1").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data, {
  responsive : true
});



</script>

Date Picker

A dedicated input field used for date inputs, which assumes a standard slash-delineated date form (e.g. 10/31/2014). Users can manually enter a date, or select from the datepicker (calendar) which opens when the field receives focus.


<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <div class="input-group date" id="datetimepicker6">
            <input type="text" class="form-control">
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Javascript -->
<script type="text/javascript">
  $(function () {
    $('#datetimepicker6').datetimepicker();
  });
</script>

Loading Indicator

•••


<div class="loading-indicator">
  <span class="loading-bullet">&#x2022;</span><span class="loading-bullet">&#x2022;</span><span class="loading-bullet">&#x2022;</span>
</div>