Javascript Components

Across our product sets we use components from both jQuery UI and Bootstrap. In this section you will be able to see how our components look and feel plus basic implementation steps

Modal

Javascript Dependency: jQuery UI

Modals are simple dialog prompts that retains the user's focus on important info or decisions

Static Example

This is a rendered example of a basic dialog with a header, content, and buttons. The modal header is using the title attribute.


<div id="modal" title="Basic Modal">
    <p>This is the modal with a header, some content, and a couple of buttons.</p>
</div>

    
Note: you'll need use the button option (shown in the example below) to render buttons on the modal

Live Demo

Toggle a modal via JavaScript by clicking the button below. A modal will appear in the middle of the screen


<!-- Button to trigger modal -->
<button name="button" id="modal-example" class="button-highlight button-large">Click me to launch modal</button>

<!-- Modal Content -->
<div id="modal" title="Modal Example Header">
    <p>This is an example of a live modal. Click the buttons to close me or the "x" in the right hand corner</p>
</div>

    

Implementation

To trigger a modal, target the ID or the class of the parent element and use the .dialog function. See more info in the jQuery UI documentation.


// Dialog function with options
$( ".modal-demo" ).dialog({
  autoOpen: false,
  modal: true,
  resizable: false,
  draggable: false,
  buttons: [
    {
       text: "Delete All",
       "class": 'button-negative',
       click: function() {
          $(this).dialog("close");
       }
    },
    {
       text: "Cancel",
       click: function() {
          $(this).dialog("close");
       }
    }
  ],
});

// Click event handler to open modal using the open() method
$( ".modal-example" ).click(function() {
  $( ".modal-demo" ).dialog( "open" );
});

    

Popover

Javascript Dependency: Bootstrap popover.js and tooltip.js

The popover adds a small overlay of content to any element to house secondary information. Default placement of the popover is to the right of the target, but it can be positions to the top, left or bottom of the target using the data-placement attribute.


<!-- Popover with title attribute -->
<button class="ui-popover button-highlight" data-toggle="popover" data-trigger="click" title="Popover Title" data-placement="top" data-content="...">...</button>

<button class="ui-popover" data-toggle="popover" data-trigger="hover"data-content="...">...</button>

    

Implementation

To trigger a popover, target the ID or the class of the element and use the .popover function. See more info in the Bootstrap documentation

$( ".ui-popover" ).popover();

Tabs

Javascript Dependency: jQuery UI

Tabs can be used to seperate chunks of content into their own pane.

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out.

Yeah, I like animals better than people sometimes... Especially dogs. Dogs are the best. Every time you come home, they act like they haven't seen you in a year.

And the good thing about dogs... is they got different dogs for different people. Like pit bulls. The dog of dogs. Pit bull can be the right man's best friend... or the wrong man's worst enemy. You going to give me a dog for a pet, give me a pit bull. Give me... Raoul. Right, Omar? Give me Raoul.


<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab One</a></li>
        <li><a href="#tabs-2">Tab Two</a></li>
        <li><a href="#tabs-3">Tab Three</a></li>
    </ul>
    <div id="tabs-1">...</div>
    <div id="tabs-2">...</div>
    <div id="tabs-3">...</div>
</div>

    

Implementation

To trigger tabs, target the ID or the class of the parent element and use the .tab function. See more info in the jQuery UI documentation

$("#tabs").tabs();
    

Spinner

Javascript Dependency: jQuery UI

The spinner control turns an ordinary text input into a dynamic number entering control with up and down arrows to increment and decrement the value.


<div class="input-container">
    <label for="spinner">Select a value</label>
    <input id="spinner">
</div>

    

Implementation

To trigger a spinner control, target the ID or the class of the input element and use the .spinner function. See more info in the jQuery UI documentation

$( "#spinner" ).spinner();

Org Selector

The org selector widget comes in three forms

Basic Widget Transfer List

The basic org selector widget uses a simple select element with the multiple attribute and is only one level deep

Basic Widget Select List

The basic select list uses two ul elements to transfer items back and forth with a single click

  • 80's Music
  • 90's Music
  • Books
  • Country Music
  • Current Events
  • Entertainment
  • Food
  • Local
  • Oldies
  • Pop Culture
  • Pop Music
  • R&B Music
  • Religion
  • Rock Music
  • Video Games

Advanced Widget

Javascript Dependencies: jQuery and Fancy Tree (Dynatree)

Tooltip

Javascript Dependency: jQuery UI

The tooltip is used to display helpful information to the user when more explanation is needed.

This icon will trigger a tooltip:


<p>
    This icon will trigger a tooltip:
    <a class="ui-tooltip-icon icon-info-sign" title="Any text we put in our title attribute will be..."></a>
</p>


    

Implementation

If you are using Bootstrap tooltip they will probably conflict. To fix the problem use the Widget Bridge Plugin in order to rename the tooltip function name

To use the tooltip function, target the class of the icon and use the .tooltip function. The tooltip target should have a text value for its title attribute in which jQuery will automatically style the text as a tooltip on hover.


$(".ui-tooltip-icon").tooltip();

Datepicker

Javascript Dependency: jQuery UI

The datepicker component is used to provide the user with an interface to pick a certain date.


<div class="input-container">
    <label for="datepicker">Date</label>
    <input type="text" id="datepicker">
</div>


    

Implementation

To use the datepicker function, target the ID of the input and use the .datepicker function.


$("#datepicker").datepicker();