causeway-standard-theme
Version:
1,455 lines • 57.1 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2, minimum-scale=0.25">
<title>Causeway Theme</title>
<!--Favicon-->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/causeway-utils.css" rel="stylesheet" media="screen">
<link href="../css/causeway-standard.css" rel="stylesheet" media="screen">
<link href="../docs/css/docs.css" rel="stylesheet" media="screen">
<link href="../css/causeway-print.css" rel="stylesheet" media="print">
</head>
<body>
<div class="container site-header">
<div class="site-header-holder">
<div class="site-heading">
<div class="site-logo"></div>
<h1 class="page-title">Causeway Style</h1>
<div class="account-management dropdown">
<div class="user-avatar">
<img src="../images/image_placeholder.png">
</div>
<div class="user-info">
<a data-toggle="dropdown" href="#">Hello Guest <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a>Logout</a>
</li>
</ul>
</div>
</div>
</div>
<nav class="navbar site-menu" role="navigation">
<div class="resp-back hidden-lg hidden-md">
<a href="#"><span class="fa fa-chevron-left"></span></a>
<span class="title">MENU</span>
</div>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="../docs/index.html#style" data-hover="dropdown"> Style <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/index.html#build"> Build Instructions </a>
</li>
<li>
<a href="../docs/index.html#javascript"> Javascript </a>
</li>
<li>
<a href="../docs/index.html#stylesheets"> Stylesheets </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/shells.html#shells" data-hover="dropdown"> Shells <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="../docs/content.html#content"> Content </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/content.html#content-email"> Emails </a>
</li>
<li>
<a href="../docs/content.html#content-link"> Links </a>
</li>
<li>
<a href="../docs/content.html#content-page-header"> Page Header </a>
</li>
</ul>
</li>
<li>
<a href="../docs/shells.html#footer"> Footer </a>
</li>
<li>
<a href="../docs/shells.html#header"> Header </a>
</li>
<li>
<a href="../docs/left-navigation.html#left-navigation"> Left Navigation </a>
</li>
<li>
<a href="../docs/login.html"> Login page </a>
</li>
<li>
<a href="../docs/shells.html#single-pane"> Single Pane </a>
</li>
<li>
<a href="/docs/twopane-horizontal.html#twopane-horizontal"> Two Pane - Horizontal </a>
</li>
<li>
<a href="../docs/left-navigation-rightpane.html#leftnav-twopane"> Two Pane - Horizontal (Left Navigation Shell) </a>
</li>
<li>
<a href="../docs/twopane-vertical.html#twopane-vertical"> Two Pane - Vertical </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/components.html#components" data-hover="dropdown"> Components <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/accordion.html#accordion"> Accordion </a>
</li>
<li>
<a href="../docs/breadcrumb.html#breadcrumb"> Breadcrumb </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/buttons.html#buttons"> Buttons </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/buttons.html#buttons-arrow"> Arrow Button </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-icon"> Icon Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-multi-action"> Multi-action Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-standard"> Standard Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-standard-icons"> Standard Buttons with Icons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-text"> Text Button </a>
</li>
</ul>
</li>
<li>
<a href="../docs/components.html#dialog-box"> Dialog Box </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/forms.html#forms"> Forms </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/forms.html#forms-advanced-listbox"> Advanced Listbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-checkbox"> Checkbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-color"> Color </a>
</li>
<li>
<a href="../docs/forms.html#forms-currency"> Currency </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/date.html#forms-date"> Date </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/date.html#forms-date-range"> Date Range </a>
</li>
<li>
<a href="../docs/date.html#forms-date-single"> Single Date </a>
</li>
</ul>
</li>
<li>
<a href="../docs/forms.html#forms-email"> Email </a>
</li>
<li>
<a href="../docs/forms.html#forms-file"> File </a>
</li>
<li>
<a href="../docs/forms.html#forms-hyperlink"> Hyperlink </a>
</li>
<li>
<a href="../docs/forms.html#forms-image"> Image </a>
</li>
<li>
<a href="../docs/forms.html#forms-password"> Password </a>
</li>
<li>
<a href="../docs/forms.html#forms-radio"> Radiobutton </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/select.html#forms-select"> Select </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/select.html#forms-select-multiple"> Multiple Choice </a>
</li>
<li>
<a href="../docs/select.html#forms-select-single"> Single Choice </a>
</li>
</ul>
</li>
<li>
<a href="../docs/forms.html#forms-select-shuttle"> Select Shuttle </a>
</li>
<li>
<a href="../docs/forms.html#spinbox"> Spinbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-telephone"> Telephone </a>
</li>
<li>
<a href="../docs/forms.html#forms-text"> Text </a>
</li>
<li>
<a href="../docs/forms.html#forms-textarea"> Textarea </a>
</li>
<li>
<a href="../docs/forms.html#forms-time"> Time </a>
</li>
<li>
<a href="../docs/forms.html#forms-tristate"> Tristate </a>
</li>
</ul>
</li>
<li>
<a href="../docs/components.html#lightbox"> LightBox </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/menus.html#menus"> Menus </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/menus.html#menus-dropdown"> Dropdown Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-dropdown-site"> Site Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-dropdown-page"> Page Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-three-line"> Three Line Menu </a>
</li>
</ul>
</li>
<li>
<a href="../docs/pagination.html#pagination"> Pagination </a>
</li>
<li>
<a href="../docs/site-notification.html#site-notification"> Site Notification </a>
</li>
<li>
<a href="../docs/status-indicator.html#status-indicator"> Status Indicator </a>
</li>
<li>
<a href="../docs/table.html#table"> Table </a>
</li>
<li>
<a href="../docs/components.html#tabstrip"> Tabstrip </a>
</li>
<li>
<a href="../docs/misc.html#tooltip"> Tooltip </a>
</li>
<li>
<a href="../docs/treegrid.html#treegrid"> Tree Grid </a>
</li>
<li>
<a href="../docs/treelist.html#treelist"> Tree List </a>
</li>
<li>
<a href="../docs/treesearchlist.html#treesearchlist"> Tree Search List </a>
</li>
<li>
<a href="../docs/treeview.html#treeview"> Tree View </a>
</li>
<li>
<a href="../docs/wizard.html#wizard"> Wizard </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/icons.html#content-icons" data-hover="dropdown"> Icons <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/icons.html#favicon"> Favicon and App Icons </a>
</li>
<li>
<a href="../docs/icons.html#content-icons-available"> Available Icons </a>
</li>
<li>
<a href="../docs/icons.html#content-icons-use"> How to use </a>
</li>
</ul>
</li>
<li>
<a href="../docs/color-palette.html#color-palette"> Color Palette </a>
</li>
<li>
<a href="../index.html"> Download </a>
</li>
</ul>
<div class="additional-nav-info">
<ol class="breadcrumb">
<li><a href="#">Causeway LTD</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Company Name <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Sub Company A</a></li>
<li><a href="#">Sub Company B</a></li>
<li><a href="#">Sub Company C</a></li>
<li class="link"><a href="#">More</a></li>
</ul>
</li>
</ol>
<span class="cs-badge has-count">
<a href="#">
<span class="fa fa-shopping-cart"></span>
<span class="cs-badge-count">5</span>
</a>
</span>
<span class="site-notification has-notification">
<a href="#">
<span class="fa fa-bell"></span>
<span class="notification-count">5</span>
</a>
</span>
<span class="cs-badge has-count">
<a href="#">
<span class="fa fa-envelope"></span>
<span class="cs-badge-count">5</span>
</a>
</span>
<span class="additional-menu">
<a href="#" data-toggle="dropdown"> <span class="glyphicon glyphicon-threeLine-menu"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Site Map</a></li>
<li><a href="#">Application Sample</a></li>
</ul>
</span>
</div>
</nav>
</div>
</div>
<!--Notification block starts here-->
<section class="notification-content-right">
<div class="notification-content-wrapper">
<div class="notification-header">
<h2>Notifications</h2>
</div>
<div class="notification-content">
<ul>
<li>
<strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
</li>
<li>
<strong>It is a paradisematic country,</strong>in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
<a href="#">Find out more.</a>
</li>
<li>
<strong>It is a paradisematic country,</strong>in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
<a href="#">Find out more.</a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Carillion AMBS Limited</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Amey Group Services Ltd</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Amey Group Services Ltd</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
</ul>
</div>
</div>
</section>
<!--Notification block ends here-->
<div class="container page">
<div class="content pane single-pane">
<section>
<a id="components"></a>
<header class="content-header">
<h1 class="title">
Components
</h1>
<ul class="nav nav-pills">
<li class="dropdown">
<a href="/docs/components/buttons.html#buttons" data-hover="dropdown">
Buttons
<span class="fa fa-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="/docs/components/buttons.html#buttons-standard-buttons">
Standard Buttons
</a>
</li>
<li>
<a href="/docs/components/buttons.html#buttons-icon-buttons">
Icon Buttons
</a>
</li>
<li>
<a href="/docs/components/buttons.html#buttons-standard-buttons-with-icons">
Standard Buttons with Icons
</a>
</li>
<li>
<a href="/docs/components/buttons.html#buttons-text-button">
Text Button
</a>
</li>
<li>
<a href="/docs/components/buttons.html#buttons-arrow-button">
Arrow Button
</a>
</li>
<li>
<a href="/docs/components/buttons.html#buttons-multi-action-buttons">
Multi-action Buttons
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="/docs/components/forms.html#forms" data-hover="dropdown">
Forms
<span class="fa fa-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="/docs/components/forms.html#forms-text">
Text
</a>
</li>
<li>
<a href="/docs/components/forms.html#forms-textarea">
Textarea
</a>
</li>
<li>
<a href="/docs/components/forms.html#forms-password">
Password
</a>
</li>
<li class="dropdown-submenu">
<a href="/docs/components/forms/select.html#forms-select">
Select
</a>
<ul class="dropdown-menu">
<li>
<a href="/docs/components/forms/select.html#forms-select-single">
Single Choice
</a>
</li>
<li>
<a href="/docs/components/forms/select.html#forms-select-multiple">
Multiple Choice
</a>
</li>
</ul>
</li>
<li>
<a href="/docs/components/forms.html#forms-file">
File
</a>
</li>
<li class="dropdown-submenu">
<a href="/docs/components/forms/date.html#forms-date">
Date
</a>
<ul class="dropdown-menu">
<li>
<a href="/docs/components/forms/date.html#forms-date-single">
Single Date
</a>
</li>
<li>
<a href="/docs/components/forms/date.html#forms-date-range">
Date Range
</a>
</li>
</ul>
</li>
<li>
<a href="/docs/components/forms.html#forms-email">
Email
</a>
</li>
<li>
<a href="/docs/components/forms.html#forms-hyperlink">
Hyperlink
</a>
</li>
<li>
<a href="/docs/components/forms.html#forms-telephone">
Telephone
</a>
</li>
<!--
<li>
<a href="/docs/components/forms.html#forms-checkbox">
Checkbox
</a>
</li>
<li>
<a href="/docs/components/forms.html#forms-radiobutton">
Radiobutton
</a>
</li>
<li>
<a href="/docs/components/forms.html#forms-time">
Time
</a>
</li>
<li>
<a href="/docs/components/forms.html#forms-colour">
Colour
</a>
</li>
<li>
<a href="/docs/components/forms.html#forms-currency">
Currency
</a>
</li>
<li class="dropdown-submenu">
<a href="/docs/components/forms/address.html#forms-address">
Address
</a>
<ul class="dropdown-menu">
<li>
<a href="/docs/components/forms/address.html#forms-address-large">
Large
</a>
</li>
</ul>
</li>
<li>
<a href="/docs/components/forms.html#forms-image">
Image
</a>
</li>
<li>
<a href="/docs/components/forms.html#forms-listbox">
Listbox
</a>
</li>
<li>
<a href="/docs/components/forms.html#forms-spin-box">
Spin Box
</a>
</li>
<li>
<a href="/docs/components/forms.html#forms-select-shuttle">
Select Shuttle
</a>
</li>
<li>
<a href="/docs/components/forms.html#forms-field-with-attached-button">
Field with attached button
</a>
</li>
-->
</ul>
</li>
<li class="dropdown">
<a href="/docs/components/menus.html#menus" data-hover="dropdown">
Menus
<span class="fa fa-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="/docs/components/menus.html#menus-dropdown">
Dropdown Menu
</a>
</li>
<li>
<a href="/docs/components/menus.html#menus-dropdown-site">
Site Menu
</a>
</li>
<li>
<a href="/docs/components/menus.html#menus-dropdown-page">
Page Menu
</a>
</li>
<li>
<a href="/docs/components/menus.html#menus-three-line-menu">
Three Line Menu
</a>
</li>
<!--
<li>
<a href="/docs/components/menus.html#menus-right-click-menu">
Right Click Menu
</a>
</li>
<li>
<a href="/docs/components/menus.html#menus-user-account-menu">
User Account Menu
</a>
</li>
<li class="dropdown-submenu">
<a href="/docs/components/menus/tree-control.html#menus-tree">
Tree Control
</a>
<ul class="dropdown-menu">
<li>
<a href="/docs/components/menus/tree-control.html#menus-tree-light">
Light
</a>
</li>
</ul>
</li>
-->
</ul>
</li>
<li>
<a href="/docs/components.html#tabstrip">
Tabstrip
</a>
</li>
<li>
<a href="/docs/components.html#dialog-box">
Dialog Box
</a>
</li>
<li>
<a href="/docs/components/table.html#table">
Table
</a>
</li>
<li>
<a href="/docs/components/pagination.html#pagination">
Pagination
</a>
</li>
<li>
<a href="/docs/components/wizard.html#wizard">
Wizard
</a>
</li>
</ul>
</header>
<section>
<a id="tabstrip"></a>
<header class="content-header">
<h2 class="title">
Tabstrip
</h2>
</header>
<p>
Tabstrips comprise of 2 components the tabs and a series of content containers
</p>
<p>
The tabs and their containers are linked by ensuring the <code>id</code> attribute of the container is referenced in the <code>href</code> attribute of the tab and is unique on the page.
</p>
<p>
A single tab can be set active by adding the class <code>"active"</code> both to it and to the matching container.
</p>
<p>
Any tab can be set as disabled by adding the class <code>"disabled"</code> both to it and to the matching container.
</p>
<br/>
<div>
<ul class="nav nav-tabs">
<li>
<a href="#home" data-toggle="tab">
Tab 1
</a>
</li>
<li>
<a href="#profile" data-toggle="tab">
Tab 2
</a>
</li>
<li class="active">
<a href="#messages" data-toggle="tab">
Tab 3
</a>
</li>
<li class="disabled">
<a href="#settings" data-toggle="tab">
Tab 4
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home">
Tab 1 Content
</div>
<div class="tab-pane" id="profile">
Tab 2 Content
</div>
<div class="tab-pane active" id="messages">
Tab 3 Content
</div>
<div class="tab-pane disabled" id="settings">
Tab 4 Content
</div>
</div>
</div>
<br/>
<pre>
<code>
<span class="title">Tabs</span>
<ul class="nav nav-tabs">
<li>
<a href="#home" data-toggle="tab">
Tab 1
</a>
</li>
<li>
<a href="#profile" data-toggle="tab">
Tab 2
</a>
</li>
<li class="active">
<a href="#messages" data-toggle="tab">
Tab 3
</a>
</li>
<li class="disabled">
<a href="#settings" data-toggle="tab">
Tab 4
</a>
</li>
</ul>
<br/>
<br/>
<span class="title">Content Containers</span>
<div class="tab-content">
<div class="tab-pane" id="home">
Tab 1 Content
</div>
<div class="tab-pane" id="profile">
Tab 2 Content
</div>
<div class="tab-pane active" id="messages">
Tab 3 Content
</div>
<div class="tab-pane disabled" id="settings">
Tab 4 Content
</div>
</div>
</code>
</pre>
</section>
<div>
<a id="dialog-box"></a>
<header class="content-header">
<h1 class="title">
Dialog box
</h1>
</header>
<p>
Buttons comprise of a base structure containing the dialog contents in header, body and footer sections.
</p>
<p>
The header contains the title of the dialog box along with an optional close button. The footer is the ideal place to put the relevant action buttons while the body contains the detail of the event.
</p>
<div class="bs-example-modal">
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Dialogue Title</h4>
</div>
<div class="modal-body">
Dialogue body content
</div>
<div class="modal-footer">
<a href="javascript:void(0);" data-dismiss="modal">Cancel</a>
<button type="button" class="btn btn-default">
Save
</button>
</div>
</div>
</div>
</div>
</div>
<header class="content-header">
<h2 class="title">Usage</h2>
</header>
<p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.modal-open</code> to the <code><body></code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
<h4 class="title">Via data attributes</h4>
<p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
<div class="highlight">
<pre><code class="html">
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
</code></pre>
</div>
<h4 class="title">Via JavaScript</h4>
<p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p>
<div class="highlight">
<pre><code class="js">$('#myModal').modal(options)
</code></pre>
</div>
<header class="content-header">
<h2 class="title">
Options
</h2>
</header>
<p>
Options available from the standard bootstrap installation; reproduced here for convenience.
</p>
<p>
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".
</p>
<table class="table table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>backdrop</td>
<td>boolean or the string <code>'static'</code></td>
<td>true</td>
<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
</tr>
<tr>
<td>keyboard</td>
<td>boolean</td>
<td>true</td>
<td>Closes the modal when escape key is pressed</td>
</tr>
<tr>
<td>show</td>
<td>boolean</td>
<td>true</td>
<td>Shows the modal when initialized.</td>
</tr>
<tr>
<td>remote</td>
<td>path</td>
<td>false</td>
<td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the root of the modal element. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
<div class="highlight"><pre><code class="html"><a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
</code></pre></div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"></td>
</tr>
</tfoot>
</table>
<header class="content-header">
<h2 class="title">
Methods
</h2>
</header>
<h4>.modal(options)</h4>
<p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
<div class="highlight"><pre><code class="js">$('#myModal').modal({
keyboard: false
})
</code></pre></div>
<h4>.modal('toggle')</h4>
<p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.modal</code> or <code>hidden.bs.modal</code> event occurs).</p>
<div class="highlight"><pre><code class="js">$('#myModal').modal('toggle')
</code></pre></div>
<h4>.modal('show')</h4>
<p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs).</p>
<div class="highlight"><pre><code class="js">$('#myModal').modal('show')
</code></pre></div>
<h4>.modal('hide')</h4>
<p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p>
<div class="highlight"><pre><code class="js">$('#myModal').modal('hide')
</code></pre></div>
<header class="content-header">
<h2 class="title">Events</h2>
</header>
<p>
Bootstrap's modal class exposes a few events for hooking into modal functionality.
</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>show.bs.modal</td>
<td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
</tr>
<tr>
<td>shown.bs.modal</td>
<td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
</tr>
<tr>
<td>hide.bs.modal</td>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
</tr>
<tr>
<td>hidden.bs.modal</td>
<td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
</tr>
</tfoot>
</table>
</div><!-- /.table-responsive -->
<br/>
<pre>
<code>
<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" aria-hidden="true">&times;</button>
<h4 id="myModalLabel" class="modal-title">Dialogue Title</h4>
</div>
<div class="modal-body">
Dialogue body content
</div>
<div class="modal-footer">
<a href="javascript:void(0);" data-dismiss="modal">Cancel</a>
<button type="button" class="btn btn-default">
Save
</button>
</div>
</div>
</div>
</div>
</code>
</pre>
</div>
<div class="example">
<a id="lightbox"></a>
<h1 class="title">Lightbox -- can be closed clicking outside of lightbox</h1>
<a data-toggle="modal" href="#myModal1">
Click to open a lightbox
</a>
<div class="modal lightbox fade" id="myModal1" 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" aria-hidden="true">×</button>
<h4 id="myModalLabel" class="modal-title">Dialogue Title</h4>
</div>
<div class="modal-body">
<form method="post">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="userName1">User Name:</label>
<input type="text" id="userName1" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="password1">Password:</label>
<input type="password" id="password1" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="email1">Email:</label>
<input type="email" id="email1" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="textarea1">Text Area:</label>
<textarea placeholder="Enter text" name="textarea1" id="textarea1" rows="5" class="form-control"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="selectMenu">Select Menu:</label>
<div class= "select">
<select id="selectMenu" class="form-control">
<option value="">All</option>
<option value=""></option>
<option value="A">Order Acknowledgement</option>
<option value="BR">Bulk Upload Response</option>
<option value="D">Dispatch Note</option>
<option value="I" selected="selected">Invoice</option>
<option value="LU">Lookup File</option>
<option value="O">Order</option>
<option value="P">PCard</option>
<option value="PR">PCard Response</option>
<option value="PT">Pass Through File</option>
<option value="Q">Query</option>
<option value="R">Requisition</option>
<option value="RM">Remittance</option>
<option value="SM">Status</option>
<option value="S">Statement</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="selectMenu3">Select Menu 2:</label>
<div class= "select">
<select id="selectMenu3" class="form-control">
<option value="send">Send</option>
<option value="recv">Receive</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group invalid error-hover">
<label>This has an error:</label>
<div class="checkbox">
<input type="checkbox" id="errorMessage">
<label for="errorMessage"><span class="checkbox-icon"></span></label>
<span class="error-message" data-original-title="" title="">Error message for checkbox</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Reporting Days:</label>
<div class= "checkbox-input-group">
<div class="checkbox-inline">
<input type="checkbox" id="sun">
<label for="sun"><span class="checkbox-icon"></span>Sun</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="mon">
<label for="mon"><span class="checkbox-icon"></span>Mon</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="tue">
<label for="tue"><span class="checkbox-icon"></span>Tue</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="wed">
<label for="wed"><span class="checkbox-icon"></span>Wed</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="thu">
<label for="thu"><span class="checkbox-icon"></span>Thu</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="fri">
<label for="fri"><span class="checkbox-icon"></span>Fri</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="sat">
<label for="sat"><span class="checkbox-icon"></span>Sat</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group time">
<label for="reportingInterval">Reporting Interval:</label>
<div class="input-group">
<input type="text" id="reportingInterval" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group time">
<label for="startTime">Start Time:</label>
<div class="input-group">
<input type="text" id="startTime" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group date">
<label for="finishDate">Add on Example:</label>
<div class="input-group">
<input type="text" id="finishDate" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group has-addon">
<label for="finishTime">Add on Example:</label>
<div class="input-group">
<input type="text" id="finishTime" class="form-control">
<span class="input-group-addon"><span class="fa fa-star"></span></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="readonly">Readonly Example:</label>
<input type="text" id="readonly" class="form-control" value="Readonly text fields cut off text… need to display all text. Readonly text fields cut off text… need to display all text" readonly="readonly" size="100%">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="readonly2">Readonly Example 2:</label>
<input type="text" id="readonly2" class="form-control" value="Readonly text fields cut off text… need to display all text. " readonly="readonly" size="100%">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="attachCSV">
<label for="attachCSV"><span class="checkbox-icon"></span>Attach CSV Report:</label>
</div>
</div>
</div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group time">
<label for="reportingInterval55">Reporting Interval:</label>
<div class="input-group">
<input type="text" id="reportingInterval55" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group time">
<label for="startTime55">Start Time:</label>
<div class="input-group">
<input type="text" id="startTime55" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group date">
<label for="finishDate55">Add on Example:</label>
<div class="input-group">
<input type="text" id="finishDate55" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group has-addon">
<label for="finishTime55">Add on Example:</label>
<div class="input-group">
<input type="text" id="finishTime55" class="form-control">
<span class="input-group-addon"><span class="fa fa-star"></span></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="readonly4">Readonly Example:</label>
<input type="text" id="readonly4" class="form-control" value="Readonly text fields cut off text… need to display all text. Readonly text fields cut off text… need to display all text" readonly="readonly" size="100%">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="readonly233">Readonly Example 2:</label>
<input type="text" id="readonly233" class="form-control" value="Readonly text fields cut off text… need to display all text. " readonly="readonly" size="100%">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="attachCSV22">
<label for="attachCSV22"><span class="checkbox-icon"></span>Attach CSV Report:</label>
</div>
</div>
</div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group time">
<label for="reportingInterval2">Reporting Interval:</label>
<div class="input-group">
<input type="text" id="reportingInterval2" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group time">
<label for="startTime2">Start Time:</label>
<div class="input-group">
<input type="text" id="startTime2" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group date">
<label for="finishDate2">Add on Example:</label>
<div class="input-group">
<input type="text" id="finishDate2" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group has-addon">
<label for="finishTime2">Add on Example:</label>
<div class="input-group">
<input type="text" id="finishTime2" class="form-control">
<span class="input-group-addon"><span class="fa fa-star"></span></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="readonly3">Readonly Example:</label>
<input type="text" id="readonly3" class="form-control" value="Readonly text fields cut off text… need to display all text. Readonly text fields cut off text… need to display all text" readonly="readonly" size="100%">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="readonly22">Readonly Example 2:</label>
<input type="text" id="readonly22" class="form-control" value="Readonly text fields cut off text… need to display all text. " readonly="readonly" size="100%">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="attachCSV2">
<label for="attachCSV2"><span class="checkbox-icon"></span>Attach CSV Report:</label>
</div>
</div>
</div>
<div class="col-md-6"></div>
</div>
</form>
</div>
<div class="modal-footer">
<a href="javascript:void(0);" data-close-prompt="Are you sure....?">Cancel</a>
<button type="button" class="btn btn-default">
Save
</button>
</div>
</div>
</div>
</div>
</div>
<div class="example">
<h1 class="title">Lightbox -- can be closed only on clicking cancel/close button</h1>
<p>To stop the behavior of closing lightbox on clicking anywhere outside lightbox can be achieved by adding data attribute<code>data-close-background="false"</code> to the <code><div class="modal lightbox"></div></code> div</p>
<p>Example: </p>
<pre><code>
<div class="modal lightbox fade" data-close-background="false" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
...
</div></code>
</pre>
<a data-toggle="modal" href="#myModal2">
Click to open a lightbox
</a>
<div class="modal lightbox fade" data-close-background="false" id="myModal2" 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" aria-hidden="true">×</button>
<h4 id="myModalLabel2" class="modal-title">Dialogue Title</h4>
</div>
<div class="modal-body">
<form method="post">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="userName" title="Enter the description of the item">Description*:</label>
<input type="text" id="userName" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="email">Text Area:</label>
<textarea placeholder="Enter text" name="textarea" id="textarea" rows="5" class="form-control"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="selectMenu2">Select Menu 2:</label>
<div class= "select">
<select id="selectMenu2" class="form-control">
<option value="send">Send</option>
<option value="recv">Receive</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<a href="javascript:void(0);" data-close-prompt="Are you sure?">Cancel</a>
<button type="button" class="btn btn-default">
Save
</button>
</div>
</div>
</div>
</div>
<h1 class="title">Add a prompt before closing a lightbox.</h1>
<p>On the cancel button of lightbox, use <code>data-close-prompt="Are you sure?"</code> attribute instead of <code>data-dismiss="modal"</code></p>
<pre><code>
<div class="modal lightbox fade" data-close-background="false" id="myModal2" 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" aria-hidden="true">×</button>
<h4 id="myModalLabel2" class="modal-title">Dialogue Title</h4>
</div>
<div class="modal-body">
.
.
.
</div>
<div class="modal-footer">
<a href="javascript:void(0);" data-close-prompt="Prompt Message">Cancel</a>
<button type="button" class="btn btn-default">
Save
</button>
</div>
</div>
</div>
</div>
</code></pre>
</div>
</section>
</div>
</div>
<div class="container site-footer">
<div class="status-holder">
<div class="status-message"></div>
</div>
<!--<a href="#" class="site-footer-toggle">-->
<!--<span class="fa fa-chevron-down"></span>-->
<!--</a>-->
</div>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/causeway-utils.min.js"></script>
<script src="/js/causeway.js"></script>
<script src="/js/responsive.js"></script>
<script src="/docs/js/docs.js"></script>
<script>
(function(window, $){
var statusHolder = $('.status-message'),
date = new Date();
var message = "Copyright © 1998-" + date.getFullYear() + " Causeway Software Solutions Limited.";
statusHolder.html(message);
}(window, jQuery));
</script>
</body>
</html>