mirror of
https://github.com/unisonweb/unison.git
synced 2024-11-13 22:29:35 +03:00
1376 lines
50 KiB
HTML
Executable File
1376 lines
50 KiB
HTML
Executable File
<!DOCTYPE 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>
|
|
<script src="js/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<ul class="demo-sidebar hide-on-tablets">
|
|
<li><a href="#fui-button">Buttons</a></li>
|
|
<li><a href="#fui-checkbox">Checkboxes</a></li>
|
|
<li><a href="#fui-radio">Radio buttons</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>
|
|
<li><a href="#fui-typeahead">Typeahead</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>Buttons</h3>
|
|
</div>
|
|
|
|
<div class="demo-content">
|
|
<p>
|
|
After restyling the <a href="http://getbootstrap.com/css/#buttons">Bootstrap buttons</a>, we have decided to add a new size: <code>btn-hg</code> which will be used for the main call to action buttons on the 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 addition, we have added <code>btn-embossed</code> to make buttons look more realistic, but we still prefer them flat.
|
|
</p>
|
|
<p class="mbl">
|
|
<button class="btn btn-embossed btn-primary">Embossed Button</button>
|
|
</p>
|
|
<pre class="prettyprint">
|
|
<button class="btn btn-embossed btn-primary">
|
|
Embossed Button
|
|
</button>
|
|
</pre>
|
|
|
|
<p class="ptl">
|
|
In some cases buttons need to become wider. Yes, we have taken care of 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">
|
|
Another new thing is <code>btn-tip</code>. Use it when you 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, toolbars, and 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>Checkboxes</h3>
|
|
</div>
|
|
|
|
<div class="demo-content">
|
|
<p>
|
|
Using flat style checkboxes requires a JS plugin which creates all the 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">The 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 the 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 the checkbox state to <span class="text-info">checked</span>.
|
|
</p>
|
|
<p class="mbl">
|
|
<strong>.checkbox('uncheck')</strong>
|
|
<br/>
|
|
sets the 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 the checkbox state changes between
|
|
<span class="text-info">checked</span> and
|
|
<span class="text-info">unchecked</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 buttons</h3>
|
|
</div>
|
|
|
|
<div class="demo-content">
|
|
<p>
|
|
Styling radio buttons also requires using a JS plugin. We have tried making things easy so you won't have to spend a 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">The 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">The JS:</h6>
|
|
<pre class="prettyprint">
|
|
$(':radio').radio();
|
|
</pre>
|
|
|
|
<div class="pvm">
|
|
<h6>Methods:</h6>
|
|
</div>
|
|
<p class="mbl">
|
|
<strong>.radio('check')</strong>
|
|
<br/>
|
|
sets the radio button state to <span class="text-info">checked</span>.
|
|
</p>
|
|
<p class="mbl">
|
|
<strong>.radio('uncheck')</strong>
|
|
<br/>
|
|
sets the 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 the radio button state changes between
|
|
<span class="text-info">checked</span> and
|
|
<span class="text-info">unchecked</span>.
|
|
</p>
|
|
<p class="mbl">
|
|
<strong>.on('change')</strong>
|
|
<br/>
|
|
Same as <span class="text-info">toggle</span> with just one difference — the event is fired for each radio button that gets a state change.
|
|
</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">
|
|
The same <a href="http://getbootstrap.com/components/#dropdowns">Bootstrap dropdown</a> is 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 the clickable element with the 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>
|
|
To highlight the 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">
|
|
The restyled <a href="http://getbootstrap.com/css/#forms">Bootstrap input</a>. Add <span class="text-info">flat</span> as an additional class to completely remove the borders:
|
|
</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">You can have an 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">You can have the input with append/prepend options:</p>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<span class="input-group-addon">@</span>
|
|
<input class="form-control" type="text" placeholder="Prepend" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<input class="form-control" type="text" placeholder="Append" />
|
|
<span class="input-group-addon">@</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<pre class="prettyprint mtm">
|
|
<!-- Prepend -->
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<span class="input-group-addon">@</span>
|
|
<input type="text" class="form-control" placeholder="Prepend" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Append -->
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" placeholder="Append" />
|
|
<span class="input-group-addon">@</span>
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
|
|
<p class="ptl">
|
|
The different color styles and the 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>
|
|
|
|
<p class="ptl mtl">
|
|
The search form doesn't have any background color set to append/prepend:
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="form-group">
|
|
<div class="input-group input-group-hg input-group-rounded">
|
|
<span class="input-group-btn">
|
|
<button type="submit" class="btn"><span class="fui-search"></span></button>
|
|
</span>
|
|
<input type="text" class="form-control" placeholder="Search" id="search-query-2">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" placeholder="Search" id="search-query-3">
|
|
<span class="input-group-btn">
|
|
<button type="submit" class="btn"><span class="fui-search"></span></button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</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">
|
|
The restyled <a href="http://getbootstrap.com/components/#navbar">Bootstrap navbar</a>.
|
|
</p>
|
|
|
|
<nav class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">Flat UI</a>
|
|
</div>
|
|
<div class="collapse navbar-collapse" id="navbar-collapse-01">
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a href="#fakelink">Products</a></li>
|
|
<li><a href="#fakelink">Features</a></li>
|
|
</ul>
|
|
<form class="navbar-form navbar-right" action="#" role="search" style="width: 250px">
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<input class="form-control" id="navbarInput-01" type="search" placeholder="Search">
|
|
<span class="input-group-btn">
|
|
<button type="submit" class="btn"><span class="fui-search"></span></button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div><!-- /.navbar-collapse -->
|
|
</nav><!-- /navbar -->
|
|
|
|
<pre class="prettyprint mvl">
|
|
<nav class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">Flat UI</a>
|
|
</div>
|
|
<div class="collapse navbar-collapse" id="navbar-collapse-01">
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a href="#fakelink">Products</a></li>
|
|
<li><a href="#fakelink">Features</a></li>
|
|
</ul>
|
|
<form class="navbar-form navbar-right" action="#" role="search">
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<input class="form-control" id="navbarInput-01" type="search" placeholder="Search">
|
|
<span class="input-group-btn">
|
|
<button type="submit" class="btn"><span class="fui-search"></span></button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div><!-- /.navbar-collapse -->
|
|
</nav><!-- /navbar -->
|
|
</pre>
|
|
|
|
<p class="ptl">Inverted navbar:</p>
|
|
<nav class="navbar navbar-inverse" role="navigation">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-02">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">Flat UI</a>
|
|
</div>
|
|
<div class="collapse navbar-collapse" id="navbar-collapse-02">
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a href="#fakelink">Products</a></li>
|
|
<li><a href="#fakelink">Features</a></li>
|
|
</ul>
|
|
<form class="navbar-form navbar-right" action="#" role="search" style="width: 250px">
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<input class="form-control" id="navbarInput-01" type="search" placeholder="Search">
|
|
<span class="input-group-btn">
|
|
<button type="submit" class="btn"><span class="fui-search"></span></button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div><!-- /.navbar-collapse -->
|
|
</nav><!-- /navbar -->
|
|
|
|
<pre class="prettyprint mvl">
|
|
<nav class="navbar navbar-inverse" role="navigation">
|
|
<!-- Navbar content -->
|
|
</nav>
|
|
</pre>
|
|
|
|
|
|
<p class="ptl">Embossed navbar:</p>
|
|
<nav class="navbar navbar-inverse navbar-embossed" role="navigation">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-02">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">Flat UI</a>
|
|
</div>
|
|
<div class="collapse navbar-collapse" id="navbar-collapse-02">
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a href="#fakelink">Products</a></li>
|
|
<li><a href="#fakelink">Features</a></li>
|
|
</ul>
|
|
<form class="navbar-form navbar-right" action="#" role="search" style="width: 250px">
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<input class="form-control" id="navbarInput-01" type="search" placeholder="Search">
|
|
<span class="input-group-btn">
|
|
<button type="submit" class="btn"><span class="fui-search"></span></button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div><!-- /.navbar-collapse -->
|
|
</nav><!-- /navbar -->
|
|
|
|
<pre class="prettyprint mvl">
|
|
<nav class="navbar navbar-inverse navbar-embossed" role="navigation">
|
|
<!-- Navbar content -->
|
|
</nav>
|
|
</pre>
|
|
|
|
<p class="ptl">Large navbar:</p>
|
|
<nav class="navbar navbar-default navbar-lg" role="navigation">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-03">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">Flat UI</a>
|
|
</div>
|
|
<div class="collapse navbar-collapse" id="navbar-collapse-03">
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a href="#fakelink">Products</a></li>
|
|
<li><a href="#fakelink">Features</a></li>
|
|
</ul>
|
|
<form class="navbar-form navbar-right" action="#" role="search" style="width: 250px">
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<input class="form-control" id="navbarInput-01" type="search" placeholder="Search">
|
|
<span class="input-group-btn">
|
|
<button type="submit" class="btn"><span class="fui-search"></span></button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div><!-- /.navbar-collapse -->
|
|
</nav><!-- /navbar -->
|
|
|
|
<pre class="prettyprint mvl">
|
|
<nav class="navbar navbar-default navbar-lg" role="navigation">
|
|
<!-- Navbar content -->
|
|
</nav>
|
|
</pre>
|
|
|
|
<p class="ptl">Inline forms:</p>
|
|
<nav role="navigation" class="navbar navbar-inverse navbar-embossed">
|
|
<div class="navbar-header">
|
|
<button data-target="#navbar-collapse-04" data-toggle="collapse" class="navbar-toggle" type="button">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
</button>
|
|
<a href="#" class="navbar-brand">Flat UI</a>
|
|
</div>
|
|
<div id="navbar-collapse-04" class="collapse navbar-collapse">
|
|
<form role="search" class="navbar-form navbar-left">
|
|
<div class="form-group">
|
|
<input type="text" placeholder="Search" class="form-control">
|
|
</div>
|
|
<button class="btn btn-default" type="submit">Submit</button>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
|
|
<pre class="prettyprint mvl">
|
|
<form role="search" class="navbar-form navbar-left">
|
|
<div class="form-group">
|
|
<input type="text" placeholder="Search" class="form-control">
|
|
</div>
|
|
<button class="btn btn-default" type="submit">Submit</button>
|
|
</form>
|
|
</pre>
|
|
|
|
<p class="ptl">Buttons:</p>
|
|
<nav role="navigation" class="navbar navbar-inverse navbar-embossed">
|
|
<div class="navbar-header">
|
|
<button data-target="#navbar-collapse-05" data-toggle="collapse" class="navbar-toggle" type="button">
|
|
</button>
|
|
<a href="#" class="navbar-brand">Flat UI</a>
|
|
</div>
|
|
<div id="navbar-collapse-05" class="collapse navbar-collapse">
|
|
<button class="btn btn-default navbar-btn" type="button">Sign in</button>
|
|
<button class="btn btn-default navbar-btn btn-sm" type="button">Sign in</button>
|
|
<button class="btn btn-default navbar-btn btn-xs" type="button">Sign in</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<pre class="prettyprint mvl">
|
|
<!-- Default Navbar Button -->
|
|
<button class="btn btn-default navbar-btn" type="button">Sign in</button>
|
|
<!-- Small Navbar Button -->
|
|
<button class="btn btn-default navbar-btn btn-sm" type="button">Sign in</button>
|
|
<!-- Extra Small Navbar Button -->
|
|
<button class="btn btn-default navbar-btn btn-xs" type="button">Sign in</button>
|
|
</pre>
|
|
|
|
<p class="ptl">Text:</p>
|
|
<nav role="navigation" class="navbar navbar-inverse navbar-embossed">
|
|
<div class="navbar-header">
|
|
<button data-target="#navbar-collapse-06" data-toggle="collapse" class="navbar-toggle" type="button">
|
|
</button>
|
|
<a href="#" class="navbar-brand">Flat UI</a>
|
|
</div>
|
|
<div id="navbar-collapse-06" class="collapse navbar-collapse">
|
|
<p class="navbar-text">Signed in as Mark Otto</p>
|
|
</div>
|
|
</nav>
|
|
|
|
<pre class="prettyprint mvl">
|
|
<p class="navbar-text">Signed in as Mark Otto</p>
|
|
</pre>
|
|
|
|
<p class="ptl">Non-nav links:</p>
|
|
<nav role="navigation" class="navbar navbar-inverse navbar-embossed">
|
|
<div class="navbar-header">
|
|
<button data-target="#navbar-collapse-07" data-toggle="collapse" class="navbar-toggle" type="button">
|
|
</button>
|
|
<a href="#" class="navbar-brand">Flat UI</a>
|
|
</div>
|
|
<div id="navbar-collapse-07" class="collapse navbar-collapse">
|
|
<p class="navbar-text navbar-right">Signed in as <a class="navbar-link" href="#">Mark Otto</a></p>
|
|
</div>
|
|
</nav>
|
|
|
|
<pre class="prettyprint mvl">
|
|
<p class="navbar-text navbar-right">Signed in as <a class="navbar-link" href="#">Mark Otto</a></p>
|
|
</pre>
|
|
|
|
<p class="ptl">New and Unread indicators:</p>
|
|
<nav class="navbar navbar-inverse navbar-embossed" role="navigation">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-02">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">Flat UI</a>
|
|
</div>
|
|
|
|
<div class="collapse navbar-collapse" id="#navbar-collapse-02">
|
|
<ul class="nav navbar-nav">
|
|
<li><a href="#">Messages<span class="navbar-unread">1</span></a></li>
|
|
<li><a href="#">About Us<span class="navbar-new">1</span></a></li>
|
|
</ul>
|
|
</div><!-- /.navbar-collapse -->
|
|
</nav><!-- /navbar -->
|
|
|
|
<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>
|
|
|
|
<p class="ptl">Fixed to top:</p>
|
|
<pre class="prettyprint mvl">
|
|
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
<!-- Navbar content -->
|
|
</nav>
|
|
</pre>
|
|
|
|
<p class="ptl">Fixed to bottom:</p>
|
|
<pre class="prettyprint mvl">
|
|
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
|
|
<!-- Navbar content -->
|
|
</nav>
|
|
</pre>
|
|
|
|
<p class="ptl">Static top:</p>
|
|
<pre class="prettyprint mvl">
|
|
<nav class="navbar navbar-default navbar-static-top" role="navigation">
|
|
<!-- Navbar content -->
|
|
</nav>
|
|
</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 the 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>
|
|
The restyled <a href="http://getbootstrap.com/components/#pagination">Bootstrap pagination</a>. We have added a dropdown navigation, a minimalistic look and a text-only look. We have also added a few color schemes with an 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>
|
|
The 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">
|
|
We have made a custom select due to the inability of styling the system one. It is based on the <a href="https://github.com/silviomoreto/bootstrap-select">Selectpicker</a> plug-in with the source slightly modified to meet Bootstrap naming convention.
|
|
</p>
|
|
<p class="mbl">
|
|
The component inherits its entire style from the button so you can use all its colors and sizes without any problems. We have also supported the <span class="text-info">multiple</span> select state as well as the <span class="text-info">block</span> mode where it takes all the available space.
|
|
</p>
|
|
<p class="mbl pbl">
|
|
Grids are supported here as well. For more technical details read the <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 the markup as you would 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">
|
|
Then transform all the system selects into 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">
|
|
You can use a custom switch instead of a checkbox. It can have 2 styles: <span class="text-info">circle</span> (default) and <span class="text-info">square</span>. Drag functionality is also supported.
|
|
</p>
|
|
<p class="mbl pbl">
|
|
For more technical details read the <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 managing multiple tags with the ability of adding a new one and removing or validating an existing one. It is available in 2 color schemes: grey(default) and primary.
|
|
</p>
|
|
<p class="mbl pbl">
|
|
This component is based on the <a href="http://xoxco.com/projects/code/tagsinput">Tags Input Plugin</a>. For more technical details read the <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">The 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">
|
|
The restyled <a href="http://jqueryui.com/slider">jQuery UI slider</a> with added slider segments.
|
|
</p>
|
|
|
|
<div id="slider" class="ui-slider"></div>
|
|
|
|
<p class="ptl">The 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 does <span class="text-info">addSliderSegments()</span> work?</p>
|
|
<p>This is an extended jQuery method placed in the <code>application.js</code> file. It calculates how many segments to append to the slider 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, orientation) {
|
|
return this.each(function () {
|
|
if (orientation == "vertical") {
|
|
var output = ''
|
|
, i;
|
|
for (i = 1; i <= amount - 2; i++) {
|
|
output += '<div class="ui-slider-segment" style="top:' + 100 / (amount - 1) * i + '%;"></div>';
|
|
};
|
|
$(this).prepend(output);
|
|
} else {
|
|
var segmentGap = 100 / (amount - 1) + "%"
|
|
, segment = '<div class="ui-slider-segment" style="margin-left: ' + segmentGap + ';"></div>';
|
|
$(this).prepend(segment.repeat(amount - 2));
|
|
}
|
|
});
|
|
};
|
|
</pre>
|
|
|
|
<p class="pvl">Vertical slider:</p>
|
|
|
|
<div class="pbl">
|
|
<div id="vertical-slider" style="height: 200px;"></div>
|
|
</div>
|
|
|
|
<p class="ptl">The markup:</p>
|
|
|
|
<pre class="prettyprint mvl">
|
|
<div id="vertical-slider" style="height: 200px;"></div>
|
|
</pre>
|
|
|
|
<p class="ptl">The JS:</p>
|
|
|
|
<pre class="prettyprint mvl">
|
|
var $verticalSlider = $("#vertical-slider");
|
|
if ($verticalSlider.length) {
|
|
$verticalSlider.slider({
|
|
min: 1,
|
|
max: 5,
|
|
value: 3,
|
|
orientation: "vertical",
|
|
range: "min"
|
|
}).addSliderSegments($verticalSlider.slider("option").max, "vertical");
|
|
}
|
|
</pre>
|
|
|
|
<p class="pvl">Custom slider values:</p>
|
|
|
|
<div class="pbl">
|
|
<div id="slider3">
|
|
<span class="ui-slider-value first"></span>
|
|
<span class="ui-slider-value last"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="ptl">The markup:</p>
|
|
|
|
<pre class="prettyprint mvl">
|
|
<div id="slider3">
|
|
<span class="ui-slider-value first"></span>
|
|
<span class="ui-slider-value last"></span>
|
|
</div>
|
|
</pre>
|
|
|
|
<p class="ptl">The JS:</p>
|
|
|
|
<pre class="prettyprint mvl">
|
|
var $slider3 = $("#slider3")
|
|
, slider3ValueMultiplier = 100
|
|
, slider3Options;
|
|
|
|
if ($slider3.length > 0) {
|
|
$slider3.slider({
|
|
min: 1,
|
|
max: 5,
|
|
values: [3, 4],
|
|
orientation: "horizontal",
|
|
range: true,
|
|
slide: function(event, ui) {
|
|
$slider3.find(".ui-slider-value:first")
|
|
.text("$" + ui.values[0] * slider3ValueMultiplier)
|
|
.end()
|
|
.find(".ui-slider-value:last")
|
|
.text("$" + ui.values[1] * slider3ValueMultiplier);
|
|
}
|
|
});
|
|
|
|
slider3Options = $slider3.slider("option");
|
|
$slider3.addSliderSegments(slider3Options.max)
|
|
.find(".ui-slider-value:first")
|
|
.text("$" + slider3Options.values[0] * slider3ValueMultiplier)
|
|
.end()
|
|
.find(".ui-slider-value:last")
|
|
.text("$" + slider3Options.values[1] * slider3ValueMultiplier);
|
|
}
|
|
</pre>
|
|
<div id="fui-typeahead"></div>
|
|
</div> <!-- /.demo-content -->
|
|
</div> <!-- /.demo-row -->
|
|
|
|
<div class="demo-row">
|
|
<div class="demo-title">
|
|
<h3>Typeahead</h3>
|
|
</div>
|
|
<div class="demo-content">
|
|
<p class="mbl">
|
|
The restyled <a href="http://twitter.github.io/typeahead.js">Twitter Typeahead</a>.
|
|
</p>
|
|
|
|
<div class="form-group">
|
|
<input class="form-control" type="text" id="typeahead-demo-01" />
|
|
</div>
|
|
|
|
<div id="fui-slider"></div>
|
|
</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="js/typeahead.js"></script>
|
|
<script src="bootstrap/js/google-code-prettify/prettify.js"></script>
|
|
<script src="js/application.js"></script>
|
|
</body>
|
|
</html>
|