tenna
Version:
A node js application that lets you easily stream most videos from any PC/laptop in your home network, to other devices in the network with a browser.
1,017 lines (907 loc) • 37.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Components · Flat UI Free</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Loading Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/prettify.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="css/flat-ui.css" rel="stylesheet">
<link href="css/docs.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.ico">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<ul class="demo-sidebar hide-on-tablets">
<li><a href="#fui-button">Button</a></li>
<li><a href="#fui-checkbox">Checkbox</a></li>
<li><a href="#fui-radio">Radio</a></li>
<li><a href="#fui-dropdown">Dropdown</a></li>
<li><a href="#fui-input">Input</a></li>
<li><a href="#fui-navbar">Navbar</a></li>
<li><a href="#fui-pager">Pager</a></li>
<li><a href="#fui-pagination">Pagination</a></li>
<li><a href="#fui-progress">Progress</a></li>
<li><a href="#fui-select">Select</a></li>
<li><a href="#fui-switch">Switch</a></li>
<li><a href="#fui-tagsinput">Tags Input</a></li>
<li><a href="#fui-tooltip">Tooltip</a></li>
<li><a href="#fui-slider">Slider</a></li>
</ul> <!-- /nav -->
<h1 class="demo-headline">Components</h1>
<div class="container">
<div id="fui-button" class="pbl"></div>
<div class="demo-row">
<div class="demo-title">
<h3>Button</h3>
</div>
<div class="demo-content">
<p>
After restyling <a href="http://getbootstrap.com/css/#buttons">Bootstrap buttons</a> we decided to add <code>btn-hg</code> size that will be used for main call to actions on a page:
</p>
<p class="mbl">
<button class="btn btn-hg btn-primary">Huge Button</button>
</p>
<pre class="prettyprint">
<button class="btn btn-hg btn-primary">
Boss Button
</button>
</pre>
<p class="ptl">
In some cases buttons should become wider. Yes, we did that as well:
</p>
<p class="mbl">
<button class="btn btn-wide btn-primary mrm">Save</button>
<button class="btn btn-wide btn-default">Cancel</button>
</p>
<pre class="prettyprint">
<button class="btn btn-default btn-wide">
Cancel
</button>
</pre>
<p class="ptl">
One more new thing: <code>btn-tip</code>. Use it when need to highlight a part of the button text:
</p>
<p class="mbl">
<button class="btn btn-primary">
Save
<span class="btn-tip">$300</span>
</button>
</p>
<pre class="prettyprint">
<button class="btn btn-primary">
Save
<span class="btn-tip">$300</span>
</button>
</pre>
<p class="ptl">
As usual you can set different colors:
</p>
<p>
<button class="btn btn-default mrs">Default</button>
<button class="btn btn-primary mrs">Primary</button>
<button class="btn btn-info mrs">Info</button>
<button class="btn btn-danger mrs">Danger</button>
</p>
<p class="mbl">
<button class="btn btn-success mrs">Success</button>
<button class="btn btn-warning mrs">Warning</button>
<button class="btn btn-inverse mrs">Inverse</button>
</p>
<pre class="prettyprint">
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-inverse">Inverse</button>
</pre>
<p>
Button groups, toolbar, disabled state also work as expected.
</p>
</div>
</div><!-- /.demo-row -->
<div id="fui-checkbox" class="pbl"></div>
<div class="demo-row">
<div class="demo-title">
<h3>Checkbox</h3>
</div>
<div class="demo-content">
<p>
Using flat style checkbox requires JS plugin that creates all custom markup for us. Let's take a look:
</p>
<label class="checkbox" for="checkbox1">
<input type="checkbox" value="" id="checkbox1" data-toggle="checkbox">
Checkbox
</label>
<label class="checkbox" for="checkbox2">
<input type="checkbox" value="" id="checkbox2" checked="checked" data-toggle="checkbox">
Checkbox
</label>
<label class="checkbox" for="checkbox3">
<input type="checkbox" value="" id="checkbox3" data-toggle="checkbox" disabled="">
Checkbox
</label>
<label class="checkbox" for="checkbox4">
<input type="checkbox" value="" id="checkbox4" checked="checked" data-toggle="checkbox" disabled="">
Checkbox
</label>
<h6 class="ptl">Usage via data attributes:</h6>
<pre class="prettyprint">
<label class="checkbox" for="checkbox1">
<input type="checkbox" value="" id="checkbox1" data-toggle="checkbox">
Checkbox
</label>
</pre>
<h6 class="ptl">Usage via JS:</h6>
<pre class="prettyprint">
$(':checkbox').checkbox();
</pre>
<div class="pvm">
<h6>Methods</h6>
</div>
<p class="mbl">
<strong>.checkbox('toggle')</strong>
<br/>
toggles checkbox state from <span class="text-info">checked</span>
to <span class="text-info">unchecked</span> and back.
</p>
<p class="mbl">
<strong>.checkbox('check')</strong>
<br/>
sets checkbox state to <span class="text-info">checked</span>.
</p>
<p class="mbl">
<strong>.checkbox('uncheck')</strong>
<br/>
sets checkbox state to <span class="text-info">unchecked</span>.
</p>
<pre class="prettyprint">
$(':checkbox').checkbox('check');
</pre>
<div class="pbm ptl">
<h6>Events</h6>
</div>
<p class="mbl">
<strong>.on('toggle')</strong>
<br/>
Fired when checkbox state changed between
<span class="text-info">check</span> ↔
<span class="text-info">uncheck</span>.
</p>
<p class="mbl">
<strong>.on('change')</strong>
<br/>
Same as <span class="text-info">toggle</span>.
</p>
<pre class="prettyprint">
$(':checkbox').on('toggle', function() {
// Do something
});
</pre>
</div> <!-- /.demo-content -->
</div> <!-- /.demo-row -->
<div id="fui-radio" class="pbl"></div>
<div class="demo-row">
<div class="demo-title">
<h3>Radio</h3>
</div>
<div class="demo-content">
<p>
Firm radio also requires using JS plugin. We try making things easy so you won't have to spend huge amount of time playing around with custom components.
</p>
<label class="radio">
<input type="radio" name="group1" value="1" data-toggle="radio">
Radio is off
</label>
<label class="radio">
<input type="radio" name="group1" value="2" data-toggle="radio" checked>
Radio is on
</label>
<label class="radio">
<input type="radio" name="group2" value="1" data-toggle="radio" disabled>
Radio is off
</label>
<label class="radio">
<input type="radio" name="group2" value="2" data-toggle="radio" disabled checked>
Radio is on
</label>
<h6 class="ptl">Usage via data attributes:</h6>
<pre class="prettyprint">
<label class="radio">
<input type="radio" name="group1" value="1" data-toggle="radio">
Radio is off
</label>
<label class="radio">
<input type="radio" name="group1" value="2" data-toggle="radio" checked>
Radio is on
</label>
</pre>
<h6 class="ptl">Usage via JS:</h6>
<pre class="prettyprint">
$(':radio').radio();
</pre>
<div class="pvm">
<h6>Methods</h6>
</div>
<p class="mbl">
<strong>.radio('check')</strong>
<br/>
sets radio state to <span class="text-info">checked</span>.
</p>
<p class="mbl">
<strong>.radio('uncheck')</strong>
<br/>
sets radio state to <span class="text-info">unchecked</span>.
</p>
<pre class="prettyprint">
$(':radio').radio('check');
</pre>
<div class="pbm ptl">
<h6>Events</h6>
</div>
<p class="mbl">
<strong>.on('toggle')</strong>
<br/>
Fired when radio state changed between
<span class="text-info">check</span> ↔
<span class="text-info">uncheck</span>.
</p>
<p class="mbl">
<strong>.on('change')</strong>
<br/>
Same as <span class="text-info">toggle</span> with just one difference — event sends for each radio which state was changed.
</p>
<pre class="prettyprint">
$(':radio').on('toggle', function() {
// Do something
});
</pre>
</div> <!-- /.demo-content -->
</div> <!-- /.demo-row -->
</div><!-- /.container -->
<div class="container ptl">
<div id="fui-dropdown" class="pbl"></div>
<div class="demo-row">
<div class="demo-title">
<h3>Dropdown</h3>
</div>
<div class="demo-content">
<p class="mbl">
Same <a href="http://getbootstrap.com/components/#dropdowns">Bootstrap dropdown</a> used as a part of the <code>select</code>, <code>btn-group</code>, <code>nav-tabs</code> and eventually other components to present information as a menu.
</p>
<p class="mbl">
Notice <code>dropdown-arrow</code> which is needed when you want to add a small triangle that visually connects clickable element with a dropdown menu.
</p>
<select name="info" class="mbn">
<optgroup label="Profile">
<option value="0">My Profile</option>
<option value="1">My Friends</option>
</optgroup>
<optgroup label="System">
<option value="2">Messages</option>
<option value="3">My Settings</option>
<option value="4" class="highlighted">Logout</option>
</optgroup>
</select>
<hr/>
<div class="row">
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
<span class="dropdown-arrow dropdown-arrow-inverse"></span>
<ul class="dropdown-menu dropdown-inverse">
<li><a href="#fakelink">Sub Menu Element</a></li>
<li><a href="#fakelink">Sub Menu Element</a></li>
<li><a href="#fakelink">Sub Menu Element</a></li>
</ul>
</div>
</div>
</div>
<div class="pvl">
<pre class="prettyprint">
<!-- Default look -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
<span class="dropdown-arrow"></span>
<ul class="dropdown-menu">
<li><a href="#fakelink">Sub Menu Element</a></li>
<li><a href="#fakelink">Sub Menu Element</a></li>
<li><a href="#fakelink">Sub Menu Element</a></li>
</u>
</div>
<!-- Inverse look -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
<span class="dropdown-arrow dropdown-arrow-inverse"></span>
<ul class="dropdown-menu dropdown-inverse">
<li><a href="#fakelink">Sub Menu Element</a></li>
<li><a href="#fakelink">Sub Menu Element</a></li>
<li><a href="#fakelink">Sub Menu Element</a></li>
</u>
</div>
</pre>
</div>
<p>
For highlighting information we added 2 additional states for the dropdown-menu items: <code>selected</code> and <code>highlighted</code>:
</p>
<pre class="prettyprint">
<ul class="dropdown-menu">
<li class="selected">
<a href="#">Item</a>
</li>
<li class="highlighted">
<a href="#">Item</a>
</li>
</ul>
</pre>
</div> <!-- /.demo-content -->
</div> <!-- /.demo-row -->
<div id="fui-input" class="pbl"></div>
<div class="demo-row">
<div class="demo-title">
<h3>Input</h3>
</div>
<div class="demo-content">
<p class="mbl">
Restyled <a href="http://getbootstrap.com/css/#forms">Bootstrap input</a>. Added <span class="text-info">flat</span> style(to remove borders completely):
</p>
<div class="row">
<div class="col-lg-5">
<input type="text" value="" placeholder="Enter something" class="form-control" />
</div>
</div>
<hr />
<div class="row">
<div class="col-lg-5">
<input type="text" value="" placeholder="Enter something" class="form-control flat" />
</div>
</div>
<pre class="prettyprint mtl">
<!-- Default input -->
<input type="text" placeholder="Enter something" class="form-control" />
<!-- Without borders -->
<input type="text" placeholder="Enter something" class="form-control flat" />
</pre>
<p class="ptl">And few sizes:</p>
<div class="row">
<div class="col-lg-5">
<input type="text" value="" placeholder="Huge" class="form-control input-hg" />
</div>
</div>
<hr />
<div class="row">
<div class="col-lg-5">
<input type="text" value="" placeholder="Large" class="form-control input-lg" />
</div>
</div>
<hr />
<div class="row">
<div class="col-lg-5">
<input type="text" value="" placeholder="Default" class="form-control" />
</div>
</div>
<hr />
<div class="row">
<div class="col-lg-5">
<input type="text" value="" placeholder="Small" class="form-control input-sm" />
</div>
</div>
<pre class="prettyprint mtl">
<input type="text" class="form-control input-hg" placeholder="Huge" />
<input type="text" class="form-control input-lg" placeholder="Large" />
<input type="text" class="form-control" placeholder="Default" />
<input type="text" class="form-control input-sm" placeholder="Small" />
</pre>
<p class="ptl">With icon inside:</p>
<div class="row">
<div class="col-lg-5">
<div class="form-group">
<input type="text" value="" placeholder="With icon" class="form-control" />
<span class="input-icon fui-check-inverted"></span>
</div>
</div>
</div>
<pre class="prettyprint mtm">
<div class="form-group">
<input type="text" class="form-control" placeholder="With icon" />
<span class="input-icon fui-check-inverted"></span>
</div>
</pre>
<p class="ptl">
Different color styles and disabled state work as expected:
<div class="row">
<div class="col-lg-6">
<div class="form-group has-error">
<input class="form-control" type="text" placeholder="Error" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group has-warning">
<input class="form-control" type="text" placeholder="Warning" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group has-success">
<input class="form-control" type="text" placeholder="Success" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input class="form-control" type="text" placeholder="Disabled" disabled />
</div>
</div>
</div>
</p>
</div> <!-- /.demo-content -->
</div> <!-- /.demo-row -->
<div id="fui-navbar" class="pbl"></div>
<div class="demo-row">
<div class="demo-title">
<h3>Navbar</h3>
</div>
<div class="demo-content">
<p class="mbl">
Restyled <a href="http://getbootstrap.com/components/#navbar">Bootstrap navbar</a>. Added sub-menus.
</p>
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse-01"></button>
</div>
<div class="navbar-collapse collapse navbar-collapse-01">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#fakelink">
Menu Item
<span class="navbar-unread">1</span>
</a>
</li>
<li class="active">
<a href="#fakelink">
Messages
<span class="navbar-unread">1</span>
</a>
<ul>
<li><a href="#fakelink">Element One</a></li>
<li>
<a href="#fakelink">Sub menu</a>
<ul>
<li><a href="#fakelink">Element One</a></li>
<li><a href="#fakelink">Element Two</a></li>
<li><a href="#fakelink">Element Three</a></li>
</ul> <!-- /Sub menu -->
</li>
<li><a href="#fakelink">Element Three</a></li>
</ul> <!-- /Sub menu -->
</li>
<li>
<a href="#fakelink">
About Us
</a>
</li>
</ul>
</div><!--/.nav -->
</div> <!-- /navbar -->
<pre class="prettyprint mvl">
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse-01"></button>
</div>
<div class="navbar-collapse collapse navbar-collapse-01">
<ul class="nav navbar-nav navbar-right">
<!-- Menu items go here -->
<li>
<ul>
<!-- Sub Menu items go here -->
</ul>
</li>
</ul>
</div>
</div>
</pre>
<p class="ptl">Inverse style:</p>
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse-02"></button>
</div>
<div class="navbar-collapse collapse navbar-collapse-02">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#fakelink">
Menu Item
<span class="navbar-unread">1</span>
</a>
</li>
<li class="active">
<a href="#fakelink">
Messages
<span class="navbar-unread">1</span>
</a>
<ul>
<li><a href="#fakelink">Element One</a></li>
<li>
<a href="#fakelink">Sub menu</a>
<ul>
<li><a href="#fakelink">Element One</a></li>
<li><a href="#fakelink">Element Two</a></li>
<li><a href="#fakelink">Element Three</a></li>
</ul> <!-- /Sub menu -->
</li>
<li><a href="#fakelink">Element Three</a></li>
</ul> <!-- /Sub menu -->
</li>
<li>
<a href="#fakelink">
About Us
</a>
</li>
</ul>
</div><!--/.nav -->
</div> <!-- /navbar -->
<pre class="prettyprint mvl">
<div class="navbar navbar-inverse">
<!-- navbar content -->
</div>
</pre>
<p class="ptl">Unread and New indicators:</p>
<pre class="prettyprint mvl">
<!-- ... -->
<ul class="nav navbar-nav">
<li>
<a href="#">
Menu item
<!-- Indicator with number -->
<span class="navbar-new">2</span>
</a>
</li>
</ul>
<!-- ... -->
</pre>
<pre class="prettyprint mvl">
<!-- ... -->
<ul class="nav navbar-nav">
<li>
<a href="#">
Menu item
<!-- Indicator without number -->
<span class="navbar-unread"></span>
</a>
</li>
</ul>
<!-- ... -->
</pre>
<div id="fui-pager"></div>
</div> <!-- /.demo-content -->
</div> <!-- /.demo-row -->
<div id="fui-pager" class="pbl"></div>
<div class="demo-row">
<div class="demo-title">
<h3>Pager</h3>
</div>
<div class="demo-content">
<p>
Short pagination where links have a button look. Used for navigating to a next/prev item.
</p>
<ul class="pager">
<li class="previous">
<a href="#fakelink">
<i class="fui-arrow-left"></i>
<span>All messages</span>
</a>
</li>
<li class="next">
<a href="#fakelink">
<i class="fui-arrow-right"></i>
</a>
</li>
</ul>
<pre class="prettyprint mvl">
<ul class="pager">
<li class="previous">
<a href="#">
<span>
<i class="fui-arrow-left"></i>
All messages
</span>
</a>
</li>
<li class="next">
<a href="#">
<i class="fui-arrow-right"></i>
</a>
</li>
</ul>
</pre>
<div id="fui-pagination"></div>
</div> <!-- /.demo-content -->
</div> <!-- /.demo-row -->
<div id="fui-pagination" class="pbl"></div>
<div class="demo-row">
<div class="demo-title">
<h3>Pagination</h3>
</div>
<div class="demo-content">
<p>
<a href="http://getbootstrap.com/components/#pagination">Bootstrap pagination</a> restyling. Added additional dropdown navigation, minimalistic look and text-only look. Also few color schemes with alternative layout.
</p>
<div class="pagination">
<ul>
<li class="previous"><a href="#fakelink" class="fui-arrow-left"></a></li>
<li class="active"><a href="#fakelink">1</a></li>
<li><a href="#fakelink">2</a></li>
<li><a href="#fakelink">3</a></li>
<li><a href="#fakelink">4</a></li>
<li><a href="#fakelink">5</a></li>
<li><a href="#fakelink">6</a></li>
<li><a href="#fakelink">7</a></li>
<li><a href="#fakelink">8</a></li>
<li><a href="#fakelink">9</a></li>
<li><a href="#fakelink">10</a></li>
<li class="next"><a href="#fakelink" class="fui-arrow-right"></a></li>
</ul>
</div>
<pre class="prettyprint mvl">
<div class="pagination">
<ul>
<li class="previous">
<a href="#" class="fui-arrow-left"></a>
</li>
<li class="active"><a href="#fakelink">1</a></li>
...
<li><a href="#fakelink">10</a></li>
<li class="next">
<a href="#" class="fui-arrow-right"></a>
</li>
</ul>
</div>
</pre>
</div> <!-- /.demo-content -->
</div> <!-- /.demo-row -->
<div id="fui-progress" class="pbl"></div>
<div class="demo-row">
<div class="demo-title">
<h3>Progress</h3>
</div>
<div class="demo-content">
<p>
Restyled <a href="http://getbootstrap.com/components/#progress">Bootstrap progress</a>.
</p>
<div class="progress">
<div class="progress-bar" style="width: 45%;"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 40%;"></div>
<div class="progress-bar progress-bar-warning" style="width: 10%;"></div>
<div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
<div class="progress-bar progress-bar-success" style="width: 10%;"></div>
<div class="progress-bar progress-bar-info" style="width: 10%;"></div>
</div>
<pre class="prettyprint mvl">
<div class="progress">
<div class="progress-bar" style="width: 40%;"></div>
<div class="progress-bar progress-bar-warning" style="width: 10%;"></div>
<div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
<div class="progress-bar progress-bar-success" style="width: 10%;"></div>
<div class="progress-bar progress-bar-info" style="width: 10%;"></div>
</div>
</pre>
<div id="fui-select"></div>
</div> <!-- /.demo-content -->
</div> <!-- /.demo-row -->
<div id="fui-select" class="pbl"></div>
<div class="demo-row">
<div class="demo-title">
<h3>Select</h3>
</div>
<div class="demo-content">
<p class="mbl">
Custom select due to inability of styling a system one. It is based on <a href="https://github.com/silviomoreto/bootstrap-select">Selectpicker</a> plug-in with a slightly modified source to meet Bootstrap naming convention.
</p>
<p class="mbl">
Component inherits entire styling from button so you can use all its colors and sizes without any problems. Also we supported <span class="text-info">multiple</span> select state as well as <span class="text-info">block</span> mode where it takes all available space.
</p>
<p class="mbl pbl">
Grids are supported as well. For more technical details read <a href="https://github.com/silviomoreto/bootstrap-select#usage">original documentation</a>.
</p>
<select name="huge" class="select-block mbl">
<optgroup label="Profile">
<option value="0">My Profile</option>
<option value="1">My Friends</option>
</optgroup>
<optgroup label="System">
<option value="2">Messages</option>
<option value="3">My Settings</option>
<option value="4" class="highlighted">Logout</option>
</optgroup>
</select>
<select multiple="multiple" name="huge" class="select-block mbl">
<option value="0">1</option>
<option value="1" selected>2</option>
<option value="2" selected>3</option>
<option value="3" selected>4</option>
<option value="4">5</option>
</select>
<p class="mvl">
You can write markup as you usually do without any difference:
</p>
<pre class="prettyprint mvl">
<select>
<option value="0">My Profile</option>
<option value="1">My Friends</option>
</select>
<select multiple="multiple">
<option value="0">My Profile</option>
<option value="1" selected>My Friends</option>
<option value="2" selected>My Books</option>
<option value="3">My CDs</option>
</select>
</pre>
<p class="mvl ptl">
And then transform all system selects into a custom ones with JS:
</p>
<pre class="prettyprint mvl">
$("select").selectpicker({style: 'btn-hg btn-primary', menuStyle: 'dropdown-inverse'});
// style: select toggle class name (which is .btn)
// menuStyle: dropdown class name
// You can always select by any other attribute, not just tag name.
// Also you can leave selectpicker arguments blank to apply defaults.
</pre>
<div id="fui-switch"></div>
</div> <!-- /.demo-content -->
</div> <!-- /.demo-row -->
<div id="fui-switch" class="pbl"></div>
<div class="demo-row">
<div class="demo-title">
<h3>Switch</h3>
</div>
<div class="demo-content">
<p class="mbl">
Custom switch can be used instead of checkbox. It has 2 styles: <span class="text-info">circle</span>(default) and <span class="text-info">square</span>. Drag is supported.
</p>
<p class="mbl pbl">
For more technical details read <a href="http://www.larentis.eu/switch">original documentation</a>.
</p>
<span class="mrl">
<input type="checkbox" checked data-toggle="switch" />
</span>
<input type="checkbox" data-toggle="switch" />
<hr/>
<div class="switch switch-square mrl"
data-on-label="<i class='fui-check'></i>"
data-off-label="<i class='fui-cross'></i>">
<input type="checkbox" />
</div>
<div class="switch switch-square"
data-on-label="<i class='fui-check'></i>"
data-off-label="<i class='fui-cross'></i>">
<input type="checkbox" checked />
</div>
<pre class="prettyprint mvl">
<!-- Default switch -->
<input type="checkbox" checked data-toggle="switch" />
<!-- Square switch -->
<div class="switch switch-square">
<input type="checkbox" checked data-toggle="switch" />
</div>
<!-- Switch with customized icons -->
<div class="switch switch-square"
data-on-label="<i class='fui-check'></i>"
data-off-label="<i class='fui-cross'></i>">
<input type="checkbox" />
</div>
</pre>
</div> <!-- /.demo-content -->
</div> <!-- /.demo-row -->
<div id="fui-tagsinput" class="pbl"></div>
<div class="demo-row">
<div class="demo-title">
<h3>Tags input</h3>
</div>
<div class="demo-content">
<p class="mbl">
Used for entering multiple tags with ability to remove/add new and validating already existing ones. Available 2 color schemes: grey(default) and primary.
</p>
<p class="mbl pbl">
Based on <a href="http://xoxco.com/projects/code/tagsinput">Tags Input Plugin</a>. For more technical details read <a href="https://github.com/xoxco/jQuery-Tags-Input#instructions">official plug-in documentation</a>.
</p>
<input name="tagsinput" class="tagsinput" value="Clean,Fresh,Modern,Unique" />
<p class="ptl">Markup:</p>
<pre class="prettyprint mvl">
<input name="tagsinput" class="tagsinput" value="Clean,Fresh,Modern,Unique" />
</pre>
<p class="ptl">JS:</p>
<pre class="prettyprint mvl">
$(".tagsinput").tagsInput();
</pre>
<div id="fui-tooltip"></div>
</div> <!-- /.demo-content -->
</div> <!-- /.demo-row -->
<div id="fui-tooltip" class="pbl"></div>
<div class="demo-row">
<div class="demo-title">
<h3>Tooltip</h3>
</div>
<div class="demo-content">
<p class="mbl">
Restyled <a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap tooltip</a>.
</p>
<div style="width: 40%; padding-left: 10px; height: 60px;">
<div class="demo-tooltips">
<p data-toggle="tooltip" title="Here is a sample of a long dark tooltip. Hell yeah."></p>
</div>
</div> <!-- /tooltips -->
<pre class="prettyprint mvl">
<p data-toggle="tooltip" title="Tooltip copy"></p>
</pre>
<div id="fui-slider"></div>
</div> <!-- /.demo-content -->
</div> <!-- /.demo-row -->
<div id="fui-slider" class="pbl"></div>
<div class="demo-row">
<div class="demo-title">
<h3>Slider</h3>
</div>
<div class="demo-content">
<p class="mbl">
Restyled <a href="http://jqueryui.com/slider">jQuery UI slider</a>. Added slider segments.
</p>
<div id="slider" class="ui-slider"></div>
<p class="ptl">Markup:</p>
<pre class="prettyprint mvl">
<div id="slider" class="ui-slider"></div>
</pre>
<p class="ptl">JS:</p>
<pre class="prettyprint mvl">
var $slider = $("#slider");
if ($slider.length > 0) {
$slider.slider({
min: 1,
max: 5,
value: 3,
orientation: "horizontal",
range: "min"
}).addSliderSegments($slider.slider("option").max);
}
</pre>
<p class="pvl">How <span class="text-info">addSliderSegments()</span> work?</p>
<p>This is an extended jQuery method placed in the <code>application.js</code>. It calculates how many segments to append by looking at a <span class="text-info">slider("option").max</span> which shows a maximum slider value.</p>
<pre class="prettyprint mvl">
// Add segments to a slider
$.fn.addSliderSegments = function (amount) {
return this.each(function () {
var segmentGap = 100 / (amount - 1) + "%"
, segment = "<div class='ui-slider-segment' style='margin-left: " + segmentGap + ";'></div>";
$(this).prepend(segment.repeat(amount - 2));
});
};
</pre>
</div> <!-- /.demo-content -->
</div> <!-- /.demo-row -->
</div><!-- /.container -->
<!-- Load JS here for greater good =============================-->
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>
<script src="js/bootstrap-switch.js"></script>
<script src="js/flatui-checkbox.js"></script>
<script src="js/flatui-radio.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="bootstrap/js/google-code-prettify/prettify.js"></script>
<script src="js/application.js"></script>
</body>
</html>