mirror of
https://github.com/thinkjs/thinkjs.git
synced 2026-01-25 14:42:47 +00:00
1017 lines
35 KiB
HTML
Executable File
1017 lines
35 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>
|
|
<![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>
|