1208 lines
46 KiB
HTML
1208 lines
46 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
|
|
TABLE OF CONTENTS.
|
|
|
|
Use search to find needed section.
|
|
|
|
============================================================================
|
|
|
|
| 1. $BODY | Body |
|
|
| 2. $MAIN_NAVIGATION | Main navigation |
|
|
| 3. $NAVBAR_ICON_BUTTONS | Navbar Icon Buttons |
|
|
| 4. $MAIN_MENU | Main menu |
|
|
| 5. $SLIDERS | Sliders |
|
|
| 6. $RANGE_SLIDERS | Range sliders |
|
|
| 7. $SORTABLE_ACCORDIONS | Sortable accordions |
|
|
| 8. $SORTABLE_TABS | Sortable tabs |
|
|
| 9. $MULTILEVEL_MENUS | Multilevel menus |
|
|
| 10. $AUTOCOMPLETE | Autocomplete |
|
|
| 11. $PROGRESS_BARS | Progress bars |
|
|
| 12. $SPINNERS | Spinners |
|
|
| 13. $JQUERY_UI_EXTRAS | jQuery UI extras |
|
|
| 13.1. $DATEPICKER | Datepicker |
|
|
| 13.2. $DATEPICKER_MULTIPLE_MONTHS | Datepicker - multiple months |
|
|
| 13.3. $TOOLTIPS | Tooltips |
|
|
|
|
============================================================================
|
|
|
|
-->
|
|
|
|
|
|
<!--[if IE 8]> <html class="ie8"> <![endif]-->
|
|
<!--[if IE 9]> <html class="ie9 gt-ie8"> <![endif]-->
|
|
<!--[if gt IE 9]><!--> <html class="gt-ie8 gt-ie9 not-ie"> <!--<![endif]-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>jQuery UI - UI Elements - PixelAdmin</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
|
<!-- Open Sans font from Google CDN -->
|
|
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300&subset=latin" rel="stylesheet" type="text/css">
|
|
|
|
<!-- Pixel Admin's stylesheets -->
|
|
<link href="assets/stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/stylesheets/pixel-admin.min.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/stylesheets/widgets.min.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/stylesheets/rtl.min.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/stylesheets/themes.min.css" rel="stylesheet" type="text/css">
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="assets/javascripts/ie.min.js"></script>
|
|
<![endif]-->
|
|
|
|
</head>
|
|
|
|
|
|
<!-- 1. $BODY ======================================================================================
|
|
|
|
Body
|
|
|
|
Classes:
|
|
* 'theme-{THEME NAME}'
|
|
* 'right-to-left' - Sets text direction to right-to-left
|
|
* 'main-menu-right' - Places the main menu on the right side
|
|
* 'no-main-menu' - Hides the main menu
|
|
* 'main-navbar-fixed' - Fixes the main navigation
|
|
* 'main-menu-fixed' - Fixes the main menu
|
|
* 'main-menu-animated' - Animate main menu
|
|
-->
|
|
<body class="theme-default main-menu-animated">
|
|
|
|
<script>var init = [];</script>
|
|
<!-- Demo script --> <script src="assets/demo/demo.js"></script> <!-- / Demo script -->
|
|
|
|
<div id="main-wrapper">
|
|
|
|
|
|
<!-- 2. $MAIN_NAVIGATION ===========================================================================
|
|
|
|
Main navigation
|
|
-->
|
|
<div id="main-navbar" class="navbar navbar-inverse" role="navigation">
|
|
<!-- Main menu toggle -->
|
|
<button type="button" id="main-menu-toggle"><i class="navbar-icon fa fa-bars icon"></i><span class="hide-menu-text">HIDE MENU</span></button>
|
|
|
|
<div class="navbar-inner">
|
|
<!-- Main navbar header -->
|
|
<div class="navbar-header">
|
|
|
|
<!-- Logo -->
|
|
<a href="index.html" class="navbar-brand">
|
|
<div><img alt="Pixel Admin" src="assets/images/pixel-admin/main-navbar-logo.png"></div>
|
|
PixelAdmin
|
|
</a>
|
|
|
|
<!-- Main navbar toggle -->
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse"><i class="navbar-icon fa fa-bars"></i></button>
|
|
|
|
</div> <!-- / .navbar-header -->
|
|
|
|
<div id="main-navbar-collapse" class="collapse navbar-collapse main-navbar-collapse">
|
|
<div>
|
|
<ul class="nav navbar-nav">
|
|
<li>
|
|
<a href="#">Home</a>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">First item</a></li>
|
|
<li><a href="#">Second item</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Third item</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul> <!-- / .navbar-nav -->
|
|
|
|
<div class="right clearfix">
|
|
<ul class="nav navbar-nav pull-right right-navbar-nav">
|
|
|
|
<!-- 3. $NAVBAR_ICON_BUTTONS =======================================================================
|
|
|
|
Navbar Icon Buttons
|
|
|
|
NOTE: .nav-icon-btn triggers a dropdown menu on desktop screens only. On small screens .nav-icon-btn acts like a hyperlink.
|
|
|
|
Classes:
|
|
* 'nav-icon-btn-info'
|
|
* 'nav-icon-btn-success'
|
|
* 'nav-icon-btn-warning'
|
|
* 'nav-icon-btn-danger'
|
|
-->
|
|
<li class="nav-icon-btn nav-icon-btn-danger dropdown">
|
|
<a href="#notifications" class="dropdown-toggle" data-toggle="dropdown">
|
|
<span class="label">5</span>
|
|
<i class="nav-icon fa fa-bullhorn"></i>
|
|
<span class="small-screen-text">Notifications</span>
|
|
</a>
|
|
|
|
<!-- NOTIFICATIONS -->
|
|
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
$('#main-navbar-notifications').slimScroll({ height: 250 });
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="dropdown-menu widget-notifications no-padding" style="width: 300px">
|
|
<div class="notifications-list" id="main-navbar-notifications">
|
|
|
|
<div class="notification">
|
|
<div class="notification-title text-danger">SYSTEM</div>
|
|
<div class="notification-description"><strong>Error 500</strong>: Syntax error in index.php at line <strong>461</strong>.</div>
|
|
<div class="notification-ago">12h ago</div>
|
|
<div class="notification-icon fa fa-hdd-o bg-danger"></div>
|
|
</div> <!-- / .notification -->
|
|
|
|
<div class="notification">
|
|
<div class="notification-title text-info">STORE</div>
|
|
<div class="notification-description">You have <strong>9</strong> new orders.</div>
|
|
<div class="notification-ago">12h ago</div>
|
|
<div class="notification-icon fa fa-truck bg-info"></div>
|
|
</div> <!-- / .notification -->
|
|
|
|
<div class="notification">
|
|
<div class="notification-title text-default">CRON DAEMON</div>
|
|
<div class="notification-description">Job <strong>"Clean DB"</strong> has been completed.</div>
|
|
<div class="notification-ago">12h ago</div>
|
|
<div class="notification-icon fa fa-clock-o bg-default"></div>
|
|
</div> <!-- / .notification -->
|
|
|
|
<div class="notification">
|
|
<div class="notification-title text-success">SYSTEM</div>
|
|
<div class="notification-description">Server <strong>up</strong>.</div>
|
|
<div class="notification-ago">12h ago</div>
|
|
<div class="notification-icon fa fa-hdd-o bg-success"></div>
|
|
</div> <!-- / .notification -->
|
|
|
|
<div class="notification">
|
|
<div class="notification-title text-warning">SYSTEM</div>
|
|
<div class="notification-description"><strong>Warning</strong>: Processor load <strong>92%</strong>.</div>
|
|
<div class="notification-ago">12h ago</div>
|
|
<div class="notification-icon fa fa-hdd-o bg-warning"></div>
|
|
</div> <!-- / .notification -->
|
|
|
|
</div> <!-- / .notifications-list -->
|
|
<a href="#" class="notifications-link">MORE NOTIFICATIONS</a>
|
|
</div> <!-- / .dropdown-menu -->
|
|
</li>
|
|
<li class="nav-icon-btn nav-icon-btn-success dropdown">
|
|
<a href="#messages" class="dropdown-toggle" data-toggle="dropdown">
|
|
<span class="label">10</span>
|
|
<i class="nav-icon fa fa-envelope"></i>
|
|
<span class="small-screen-text">Income messages</span>
|
|
</a>
|
|
|
|
<!-- MESSAGES -->
|
|
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
$('#main-navbar-messages').slimScroll({ height: 250 });
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="dropdown-menu widget-messages-alt no-padding" style="width: 300px;">
|
|
<div class="messages-list" id="main-navbar-messages">
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Robert Jang</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/3.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Michelle Bortz</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/4.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Timothy Owens</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/5.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Denise Steiner</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Robert Jang</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Robert Jang</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/3.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Michelle Bortz</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/4.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Timothy Owens</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/5.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Denise Steiner</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Robert Jang</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
</div> <!-- / .messages-list -->
|
|
<a href="#" class="messages-link">MORE MESSAGES</a>
|
|
</div> <!-- / .dropdown-menu -->
|
|
</li>
|
|
<!-- /3. $END_NAVBAR_ICON_BUTTONS -->
|
|
|
|
<li>
|
|
<form class="navbar-form pull-left">
|
|
<input type="text" class="form-control" placeholder="Search">
|
|
</form>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle user-menu" data-toggle="dropdown">
|
|
<img src="assets/demo/avatars/1.jpg">
|
|
<span>John Doe</span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#"><span class="label label-warning pull-right">New</span>Profile</a></li>
|
|
<li><a href="#"><span class="badge badge-primary pull-right">New</span>Account</a></li>
|
|
<li><a href="#"><i class="dropdown-icon fa fa-cog"></i> Settings</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="pages-signin.html"><i class="dropdown-icon fa fa-power-off"></i> Log Out</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul> <!-- / .navbar-nav -->
|
|
</div> <!-- / .right -->
|
|
</div>
|
|
</div> <!-- / #main-navbar-collapse -->
|
|
</div> <!-- / .navbar-inner -->
|
|
</div> <!-- / #main-navbar -->
|
|
<!-- /2. $END_MAIN_NAVIGATION -->
|
|
|
|
|
|
<!-- 4. $MAIN_MENU =================================================================================
|
|
|
|
Main menu
|
|
|
|
Notes:
|
|
* to make the menu item active, add a class 'active' to the <li>
|
|
example: <li class="active">...</li>
|
|
* multilevel submenu example:
|
|
<li class="mm-dropdown">
|
|
<a href="#"><span class="mm-text">Submenu item text 1</span></a>
|
|
<ul>
|
|
<li>...</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><span class="mm-text">Submenu item text 2</span></a>
|
|
<ul>
|
|
<li>...</li>
|
|
...
|
|
</ul>
|
|
</li>
|
|
...
|
|
</ul>
|
|
</li>
|
|
-->
|
|
<div id="main-menu" role="navigation">
|
|
<div id="main-menu-inner">
|
|
<div class="menu-content top" id="menu-content-demo">
|
|
<!-- Menu custom content demo
|
|
CSS: styles/pixel-admin-less/demo.less or styles/pixel-admin-scss/_demo.scss
|
|
Javascript: html/assets/demo/demo.js
|
|
-->
|
|
<div>
|
|
<div class="text-bg"><span class="text-slim">Welcome,</span> <span class="text-semibold">John</span></div>
|
|
|
|
<img src="assets/demo/avatars/1.jpg" alt="" class="">
|
|
<div class="btn-group">
|
|
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-envelope"></i></a>
|
|
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-user"></i></a>
|
|
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-cog"></i></a>
|
|
<a href="#" class="btn btn-xs btn-danger btn-outline dark"><i class="fa fa-power-off"></i></a>
|
|
</div>
|
|
<a href="#" class="close">×</a>
|
|
</div>
|
|
</div>
|
|
<ul class="navigation">
|
|
<li>
|
|
<a href="index.html"><i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-th"></i><span class="mm-text">Layouts</span><span class="label label-warning">Updated</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="layouts-grid.html"><span class="mm-text">Grid</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="layouts-main-menu.html"><i class="menu-icon fa fa-th-list"></i><span class="mm-text">Main menu</span><span class="label label-warning">Updated</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="stat-panels.html"><i class="menu-icon fa fa-tasks"></i><span class="mm-text">Stat panels</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="widgets.html"><i class="menu-icon fa fa-flask"></i><span class="mm-text">Widgets</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-desktop"></i><span class="mm-text">UI elements</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="ui-buttons.html"><span class="mm-text">Buttons</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-typography.html"><span class="mm-text">Typography</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-tabs.html"><span class="mm-text">Tabs & Accordions</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-modals.html"><span class="mm-text">Modals</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-alerts.html"><span class="mm-text">Alerts & Tooltips</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-components.html"><span class="mm-text">Components</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-panels.html"><span class="mm-text">Panels</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-jqueryui.html"><span class="mm-text">jQuery UI</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-icons.html"><span class="mm-text">Icons</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-utility-classes.html"><span class="mm-text">Utility classes</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-check-square"></i><span class="mm-text">Form components</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="forms-layouts.html"><span class="mm-text">Layouts</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="forms-general.html"><span class="mm-text">General</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="forms-advanced.html"><span class="mm-text">Advanced</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="forms-pickers.html"><span class="mm-text">Pickers</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="forms-validation.html"><span class="mm-text">Validation</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="forms-editors.html"><span class="mm-text">Editors</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="tables.html"><i class="menu-icon fa fa-table"></i><span class="mm-text">Tables</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="charts.html"><i class="menu-icon fa fa-bar-chart-o"></i><span class="mm-text">Charts</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-files-o"></i><span class="mm-text">Pages</span><span class="label label-success">16</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="pages-search.html"><span class="mm-text">Search results</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-pricing.html"><span class="mm-text">Plans & pricing</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-faq.html"><span class="mm-text">FAQ</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-profile.html"><span class="mm-text">Profile</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-timeline.html"><span class="mm-text">Timeline</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-signin.html"><span class="mm-text">Sign In</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-signup.html"><span class="mm-text">Sign Up</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-signin-alt.html"><span class="mm-text">Sign In Alt</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-signup-alt.html"><span class="mm-text">Sign Up Alt</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-invoice.html"><span class="mm-text">Invoice</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-404.html"><span class="mm-text">Error 404</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-500.html"><span class="mm-text">Error 500</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-envelope"></i><span class="mm-text">Messages</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="pages-inbox.html"><span class="mm-text">Inbox</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-show-email.html"><span class="mm-text">Show message</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-new-email.html"><span class="mm-text">New message</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-blank.html"><span class="mm-text">Blank page</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="complete-ui.html"><i class="menu-icon fa fa-briefcase"></i><span class="mm-text">Complete UI</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="color-builder.html"><i class="menu-icon fa fa-tint"></i><span class="mm-text">Color Builder</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-sitemap"></i><span class="mm-text">Menu levels</span><span class="badge badge-primary">6</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.1</span><span class="badge badge-danger">12</span><span class="label label-info">21</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.2</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.3</span><span class="label label-warning">5</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.1</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.2</span></a>
|
|
<ul>
|
|
<li class="mm-dropdown">
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 3.1</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 4.1</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 3.2</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.2</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul> <!-- / .navigation -->
|
|
<div class="menu-content">
|
|
<a href="pages-invoice.html" class="btn btn-primary btn-block btn-outline dark">Create Invoice</a>
|
|
</div>
|
|
</div> <!-- / #main-menu-inner -->
|
|
</div> <!-- / #main-menu -->
|
|
<!-- /4. $MAIN_MENU -->
|
|
|
|
|
|
<div id="content-wrapper">
|
|
|
|
<div class="page-header">
|
|
<h1><span class="text-light-gray">UI Elements / </span>jQuery UI</h1>
|
|
</div> <!-- / .page-header -->
|
|
|
|
<div class="note note-info">More info and examples at <a href="http://jqueryui.com" target="_blank">http://jqueryui.com</a></div>
|
|
<div class="note note-warning">
|
|
jQuery UI horizontal sliders are not supporting right-to-left direction. To use horizontal sliders with right-to-left direction you need set <code>range: 'max'</code> option.
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
|
|
<!-- 5. $SLIDERS ===================================================================================
|
|
|
|
Sliders
|
|
-->
|
|
<!-- Styles -->
|
|
<style>
|
|
.ui-slider-colors-demo { margin-bottom: 20px; }
|
|
.ui-v-slider-colors-demo { float: left; margin-right: 20px; }
|
|
.right-to-left .ui-v-slider-colors-demo { float: right; margin-left: 20px; margin-right: 0; }
|
|
</style>
|
|
<!-- / Styles -->
|
|
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
var colorful_sliders_options = {
|
|
'range': 'min',
|
|
'min': 0,
|
|
'max': 100,
|
|
'value': 60
|
|
};
|
|
$('.ui-slider-colors-demo').slider(colorful_sliders_options);
|
|
$('.ui-v-slider-colors-demo').slider($.extend({ orientation: 'vertical' }, colorful_sliders_options));
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Sliders</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<!-- Horizontal sliders -->
|
|
<div class="ui-slider-colors-demo"></div>
|
|
<div class="ui-slider-success ui-slider-colors-demo"></div>
|
|
<div class="ui-slider-danger ui-slider-colors-demo"></div>
|
|
<div class="ui-slider-warning ui-slider-colors-demo"></div>
|
|
<div class="ui-slider-info ui-slider-colors-demo"></div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<!-- Vertical sliders -->
|
|
<div style="height: 100px;" class="ui-v-slider-colors-demo"></div>
|
|
<div style="height: 100px;" class="ui-slider-success ui-v-slider-colors-demo"></div>
|
|
<div style="height: 100px;" class="ui-slider-danger ui-v-slider-colors-demo"></div>
|
|
<div style="height: 100px;" class="ui-slider-warning ui-v-slider-colors-demo"></div>
|
|
<div style="height: 100px;" class="ui-slider-info ui-v-slider-colors-demo"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /5. $SLIDERS -->
|
|
|
|
</div>
|
|
<div class="col-sm-6">
|
|
|
|
<!-- 6. $RANGE_SLIDERS =============================================================================
|
|
|
|
Range sliders
|
|
-->
|
|
<!-- Styles -->
|
|
<style>
|
|
.ui-slider-range-demo { margin-bottom: 20px; }
|
|
.ui-v-slider-range-demo { float: left; margin-right: 20px; }
|
|
.right-to-left .ui-v-slider-range-demo { float: right; margin-left: 20px; margin-right: 0; }
|
|
</style>
|
|
<!-- / Styles -->
|
|
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
var range_sliders_options = {
|
|
'range': true,
|
|
'min': 0,
|
|
'max': 500,
|
|
'values': [ 125, 300 ]
|
|
};
|
|
$('.ui-slider-range-demo').slider(range_sliders_options);
|
|
$('.ui-v-slider-range-demo').slider($.extend({ orientation: 'vertical' }, range_sliders_options));
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Range sliders</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<!-- Horizontal sliders -->
|
|
<div class="ui-slider-range-demo"></div>
|
|
<div class="ui-slider-success ui-slider-range-demo"></div>
|
|
<div class="ui-slider-danger ui-slider-range-demo"></div>
|
|
<div class="ui-slider-warning ui-slider-range-demo"></div>
|
|
<div class="ui-slider-info ui-slider-range-demo"></div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<!-- Vertical sliders -->
|
|
<div style="height: 100px;" class="ui-v-slider-range-demo"></div>
|
|
<div style="height: 100px;" class="ui-slider-success ui-v-slider-range-demo"></div>
|
|
<div style="height: 100px;" class="ui-slider-danger ui-v-slider-range-demo"></div>
|
|
<div style="height: 100px;" class="ui-slider-warning ui-v-slider-range-demo"></div>
|
|
<div style="height: 100px;" class="ui-slider-info ui-v-slider-range-demo"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /6. $RANGE_SLIDERS -->
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
|
|
<!-- 7. $SORTABLE_ACCORDIONS =======================================================================
|
|
|
|
Sortable accordions
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
$( "#ui-accordion" ).accordion({
|
|
heightStyle: "content",
|
|
header: "> div > h3"
|
|
}).sortable({
|
|
axis: "y",
|
|
handle: "h3",
|
|
stop: function( event, ui ) {
|
|
// IE doesn't register the blur when sorting
|
|
// so trigger focusout handlers to remove .ui-state-focus
|
|
ui.item.children( "h3" ).triggerHandler( "focusout" );
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Sortable accordions</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div id="ui-accordion">
|
|
<div class="group">
|
|
<h3>Section 1</h3>
|
|
<div>
|
|
<p>
|
|
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
|
|
</p>
|
|
</div>
|
|
</div> <!-- / .group -->
|
|
<div class="group">
|
|
<h3>Section 2</h3>
|
|
<div>
|
|
<p>
|
|
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
|
|
</p>
|
|
</div>
|
|
</div> <!-- / .group -->
|
|
<div class="group">
|
|
<h3>Section 3</h3>
|
|
<div>
|
|
<p>
|
|
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
|
|
</p>
|
|
<ul>
|
|
<li>List item one</li>
|
|
<li>List item two</li>
|
|
<li>List item three</li>
|
|
</ul>
|
|
</div>
|
|
</div> <!-- / .group -->
|
|
<div class="group">
|
|
<h3>Section 4</h3>
|
|
<div>
|
|
<p>
|
|
Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
|
|
</p>
|
|
<p>
|
|
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
|
|
</p>
|
|
</div>
|
|
</div> <!-- / .group -->
|
|
</div> <!-- / #ui-accordion -->
|
|
</div>
|
|
</div>
|
|
<!-- /7. $SORTABLE_ACCORDIONS -->
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
|
|
<!-- 8. $SORTABLE_TABS =============================================================================
|
|
|
|
Sortable tabs
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function(){
|
|
var tabs = $( "#ui-tabs-demo" ).tabs({ active: 0 });
|
|
tabs.find(".ui-tabs-nav").sortable({
|
|
axis: "x",
|
|
stop: function() {
|
|
tabs.tabs( "refresh" );
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Sortable tabs</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div id="ui-tabs-demo">
|
|
<ul class="nav nav-tabs">
|
|
<li><a href="#ui-tabs-1-demo">Nunc tincidunt</a></li>
|
|
<li><a href="#ui-tabs-2-demo">Proin dolor <span class="label label-success">12</span></a></li>
|
|
<li><a href="#ui-tabs-3-demo">Aenean lacinia</a></li>
|
|
</ul> <!-- / .nav -->
|
|
<div class="tab-content tab-content-bordered">
|
|
<div id="ui-tabs-1-demo">
|
|
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
|
|
</div>
|
|
<div id="ui-tabs-2-demo">
|
|
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
|
|
</div>
|
|
<div id="ui-tabs-3-demo">
|
|
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
|
|
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id e titor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
|
|
</div>
|
|
</div> <!-- / .tab-content -->
|
|
</div> <!-- / .ui-tabs -->
|
|
</div>
|
|
</div>
|
|
<!-- /8. $SORTABLE_TABS -->
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
|
|
<!-- 9. $MULTILEVEL_MENUS ==========================================================================
|
|
|
|
Multilevel menus
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function(){
|
|
$( "#ui-menu-demo" ).menu();
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Multilevel menus</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Show menu <i class="fa fa-caret-down"></i></button>
|
|
|
|
<ul id="ui-menu-demo" class="dropdown-menu">
|
|
<li class="disabled"><a href="#">Aberdeen</a></li>
|
|
<li><a href="#">Ada</a></li>
|
|
<li><a href="#"><i class="fa fa-cog"></i>Adamsville</a></li>
|
|
<li class="divider"></li>
|
|
<li class="dropdown-header">Some header</li>
|
|
<li><a href="#">Addyston</a></li>
|
|
<li>
|
|
<a href="#">Delphi</a>
|
|
<ul>
|
|
<li class="ui-state-disabled"><a href="#">Ada</a></li>
|
|
<li><a href="#">Saarland</a></li>
|
|
<li><a href="#">Salzburg</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#">Saarland</a></li>
|
|
<li>
|
|
<a href="#">Salzburg</a>
|
|
<ul>
|
|
<li>
|
|
<a href="#">Delphi</a>
|
|
<ul>
|
|
<li><a href="#">Ada</a></li>
|
|
<li><a href="#">Saarland</a></li>
|
|
<li><a href="#">Salzburg</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="#">Delphi</a>
|
|
<ul>
|
|
<li><a href="#">Ada</a></li>
|
|
<li><a href="#">Saarland</a></li>
|
|
<li><a href="#">Salzburg</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#">Perch</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="ui-state-disabled"><a href="#">Amesville</a></li>
|
|
</ul> <!-- / .dropdown-menu -->
|
|
</div> <!-- / .btn-group -->
|
|
</div>
|
|
</div>
|
|
<!-- /9. $MULTILEVEL_MENUS -->
|
|
|
|
<!-- 10. $AUTOCOMPLETE =============================================================================
|
|
|
|
Autocomplete
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
$("#ui-autocomplete-city").autocomplete({
|
|
source: function(request, response) {
|
|
$.ajax({
|
|
url: "http://ws.geonames.org/searchJSON",
|
|
dataType: "jsonp",
|
|
data: {
|
|
featureClass: "P",
|
|
style: "full",
|
|
maxRows: 12,
|
|
name_startsWith: request.term,
|
|
username: 'pixeladmin' // replace it with your geonames' username
|
|
},
|
|
success: function(data) {
|
|
response($.map(data.geonames, function(item) {
|
|
return {
|
|
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
|
|
value: item.name
|
|
}
|
|
}));
|
|
}
|
|
});
|
|
},
|
|
minLength: 2,
|
|
select: function(event, ui) {
|
|
console.log(ui.item ?
|
|
"Selected: " + ui.item.label :
|
|
"Nothing selected, input was " + this.value);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Autocomplete</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<input id="ui-autocomplete-city" class="form-control" placeholder="Type your city">
|
|
</div>
|
|
</div>
|
|
<!-- /10. $AUTOCOMPLETE -->
|
|
|
|
</div>
|
|
<div class="col-sm-6">
|
|
|
|
<!-- 11. $PROGRESS_BARS ============================================================================
|
|
|
|
Progress bars
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function(){
|
|
$("#ui-progressbar-demo").progressbar({ value: 37 });
|
|
$("#ui-progressbar1-demo").progressbar({ value: 17 });
|
|
$("#ui-progressbar2-demo").progressbar({ value: 59 });
|
|
$("#ui-progressbar3-demo").progressbar({ value: 41 });
|
|
$("#ui-progressbar4-demo").progressbar({ value: 72 });
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<!-- Styles -->
|
|
<style>
|
|
.uidemo-jui-progress-bars-demo > div + div { margin-top: 15px; }
|
|
</style>
|
|
<!-- / Styles -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Progress bars</span>
|
|
</div>
|
|
<div class="panel-body uidemo-jui-progress-bars-demo">
|
|
<div id="ui-progressbar-demo"></div>
|
|
<div id="ui-progressbar1-demo" class="ui-progressbar-warning"></div>
|
|
<div id="ui-progressbar2-demo" class="ui-progressbar-danger"></div>
|
|
<div id="ui-progressbar3-demo" class="ui-progressbar-success"></div>
|
|
<div id="ui-progressbar4-demo" class="ui-progressbar-info"></div>
|
|
</div>
|
|
</div>
|
|
<!-- /11. $PROGRESS_BARS -->
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
|
|
<!-- 12. $SPINNERS =================================================================================
|
|
|
|
Spinners
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function(){
|
|
$("#ui-spinner-demo").spinner();
|
|
|
|
$("#ui-spinner-disable-demo").click(function() {
|
|
if ($("#ui-spinner-demo").spinner("option", "disabled")) {
|
|
$("#ui-spinner-demo").spinner("enable");
|
|
} else {
|
|
$("#ui-spinner-demo").spinner("disable");
|
|
}
|
|
});
|
|
|
|
$( "#ui-spinner-toggle-demo").click(function() {
|
|
if ($("#ui-spinner-demo").data("ui-spinner")) {
|
|
$("#ui-spinner-demo").spinner("destroy");
|
|
} else {
|
|
$("#ui-spinner-demo").spinner();
|
|
}
|
|
});
|
|
|
|
$("#ui-spinner-getvalue-demo").click(function() {
|
|
alert($("#ui-spinner-demo").spinner("value"));
|
|
});
|
|
|
|
$("#ui-spinner-setvalue-demo").click(function() {
|
|
$("#ui-spinner-demo").spinner("value", 5);
|
|
});
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Spinners</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p><input id="ui-spinner-demo" name="value" class="form-control"></p>
|
|
<div>
|
|
<button id="ui-spinner-disable-demo" class="btn">Toggle disable/enable</button>
|
|
<button id="ui-spinner-toggle-demo" class="btn">Toggle widget</button>
|
|
<button id="ui-spinner-getvalue-demo" class="btn">Get value</button>
|
|
<button id="ui-spinner-setvalue-demo" class="btn">Set value to 5</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /12. $SPINNERS -->
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
|
|
<!-- 13. $JQUERY_UI_EXTRAS =========================================================================
|
|
|
|
jQuery UI extras
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
if (window.JQUERY_UI_EXTRAS_LOADED) {
|
|
$('#enable-jquery-ui-extras').attr('disabled', 'disabled');
|
|
} else {
|
|
$('#enable-jquery-ui-extras').click(function () {
|
|
$button = $(this);
|
|
$button.button('loading');
|
|
$.getScript('assets/javascripts/jquery-ui-extras.min.js', function () {
|
|
// Initialize datepickers and tooltips
|
|
initDatepickerDemo();
|
|
initDatepickerCustomDemo();
|
|
initTooltipsDemo();
|
|
$button.attr('disabled', 'disabled').text('jQuery UI extras is enabled');
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">jQuery UI extras</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
|
|
<div class="note note-info">
|
|
jQuery UI extras includes datepicker and tooltips. Extras is disabled by default because it overrides plugins with the same name. To enable jQuery UI extras just uncomment <code><script src="assets/javascripts/jquery-ui-extras.min.js"></script></code> line at the end of the html file.<br><br> <button id="enable-jquery-ui-extras" class="btn btn-success btn-sm">Enable jQuery UI extras</button>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
|
|
<!-- 13.1. $DATEPICKER =============================================================================
|
|
|
|
Datepicker
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
var initDatepickerDemo = function () {
|
|
if (window.JQUERY_UI_EXTRAS_LOADED) {
|
|
$('#ui-datepicker-demo').datepicker();
|
|
}
|
|
}
|
|
init.push(initDatepickerDemo);
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<h6 class="text-light-gray text-semibold text-xs" style="margin:20px 0 10px 0;">DATEPICKER</h6>
|
|
<input type="text" id="ui-datepicker-demo" class="form-control">
|
|
<!-- /13.1. $DATEPICKER -->
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
|
|
<!-- 13.2. $DATEPICKER_MULTIPLE_MONTHS =============================================================
|
|
|
|
Datepicker - multiple months
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
var initDatepickerCustomDemo = function () {
|
|
if (window.JQUERY_UI_EXTRAS_LOADED) {
|
|
$('#ui-datepicker-custom-demo').datepicker({
|
|
numberOfMonths: 3,
|
|
showButtonPanel: true
|
|
});
|
|
}
|
|
}
|
|
init.push(initDatepickerCustomDemo);
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<h6 class="text-light-gray text-semibold text-xs" style="margin:20px 0 10px 0;">DATEPICKER - MULTIPLE MONTHS</h6>
|
|
<input type="text" id="ui-datepicker-custom-demo" class="form-control">
|
|
<!-- /13.2. $DATEPICKER_MULTIPLE_MONTHS -->
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
|
|
<!-- 13.3. $TOOLTIPS ===============================================================================
|
|
|
|
Tooltips
|
|
-->
|
|
<!-- Javascript -->
|
|
<script>
|
|
var initTooltipsDemo = function () {
|
|
if (window.JQUERY_UI_EXTRAS_LOADED) {
|
|
$('#jquery-ui-tooltips-demo').tooltip();
|
|
}
|
|
}
|
|
init.push(initTooltipsDemo);
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<h6 class="text-light-gray text-semibold text-xs" style="margin:20px 0 10px 0;">TOOLTIPS</h6>
|
|
<div class="well" id="jquery-ui-tooltips-demo">
|
|
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
|
|
<p>But as it's not a native tooltip, it can be styled. Any themes built with <a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a> will also style tooltips accordingly.</p>
|
|
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
|
|
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." class="form-control input-sm"></p>
|
|
<p>Hover the field to see the tooltip.</p>
|
|
</div>
|
|
<!-- /13.3. $TOOLTIPS -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /13. $JQUERY_UI_EXTRAS -->
|
|
|
|
</div>
|
|
</div>
|
|
</div> <!-- / #content-wrapper -->
|
|
<div id="main-menu-bg"></div>
|
|
</div> <!-- / #main-wrapper -->
|
|
|
|
<!-- Get jQuery from Google CDN -->
|
|
<!--[if !IE]> -->
|
|
<script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">'+"<"+"/script>"); </script>
|
|
<!-- <![endif]-->
|
|
<!--[if lte IE 9]>
|
|
<script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">'+"<"+"/script>"); </script>
|
|
<![endif]-->
|
|
|
|
|
|
<!-- Pixel Admin's javascripts -->
|
|
<script src="assets/javascripts/bootstrap.min.js"></script>
|
|
<script src="assets/javascripts/pixel-admin.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
init.push(function () {
|
|
// Javascript code here
|
|
})
|
|
window.PixelAdmin.start(init);
|
|
</script>
|
|
|
|
</body>
|
|
</html> |