top navbar
, sidebar
, breadcrumbs
, search bar
, chat
, content
and footer
as shown below:
<!DOCTYPE html> <html>
.rtl
classname in <html>
tag.
<!DOCTYPE html> <html class="rtl">
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Con - Admin Dashboard with Material Design</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> <link rel="icon" type="image/png" href="assets/_con/images/icon.png"> <!-- nanoScroller --> <link rel="stylesheet" type="text/css" href="bower_components/nanoscroller/bin/css/nanoscroller.css" /> <!-- Main --> <link rel="stylesheet" type="text/css" href="assets/_con/css/_con.min.css" /> <!--[if lt IE 9]> <script src="bower_components/html5shiv/dist/html5shiv.min.js"></script> <![endif]--> </head>
<!-- Top Navbar Options: .navbar-dark - dark color scheme .navbar-static - static navbar .navbar-under - under sidebar --> <nav class="navbar-top"> <div class="nav-wrapper"> <!-- Sidebar toggle --> <a href="#" class="yay-toggle"> <div class="burg1"></div> <div class="burg2"></div> <div class="burg3"></div> </a> <!-- Sidebar toggle --> <!-- Logo --> <a href="#!" class="brand-logo"> <img src="assets/_con/images/logo.png" alt="Con"> </a> <!-- /Logo --> <!-- Menu --> <ul> <li><a href="#!" class="search-bar-toggle"><i class="mdi-action-search"></i></a> </li> <li class="user"> <a class="dropdown-button" href="#!" data-activates="user-dropdown"> <img src="assets/_con/images/user.jpg" alt="John Doe" class="circle">John Doe<i class="mdi-navigation-expand-more right"></i> </a> <ul id="user-dropdown" class="dropdown-content"> <li><a href="page-profile.html"><i class="fa fa-user"></i> Profile</a> </li> <li><a href="mail-inbox.html"><i class="fa fa-envelope"></i> Messages <span class="badge new">2</span></a> </li> <li><a href="#!"><i class="fa fa-cogs"></i> Settings</a> </li> <li class="divider"></li> <li><a href="page-sign-in.html"><i class="fa fa-sign-out"></i> Logout</a> </li> </ul> </li> </ul> <!-- /Menu --> </div> </nav> <!-- /Top Navbar -->
<body>
tag.<!-- Yay Sidebar Options [you can use all of theme classnames]: .yay-hide-to-small - no hide menu, just set it small with big icons .yay-static - stop using fixed sidebar (will scroll with content) .yay-gestures - to show and hide menu using gesture swipes .yay-light - light color scheme .yay-hide-on-content-click - hide menu on content click Effects [you can use one of these classnames]: .yay-overlay - overlay content .yay-push - push content to right .yay-shrink - shrink content width --> <aside class="yaybar yay-shrink yay-hide-to-small yay-gestures"> <div class="top"><div> <!-- Sidebar toggle --> <a href="#" class="yay-toggle"> <div class="burg1"></div> <div class="burg2"></div> <div class="burg3"></div> </a> <!-- Sidebar toggle --> <!-- Logo --> <a href="#!" class="brand-logo"> <img src="assets/_con/images/logo-white.png" alt="Con"> </a> <!-- /Logo --> </div></div> <div class="nano"> <div class="nano-content"> <ul> <li class="yay-user-info"> <a href="page-profile.html"> <img src="assets/_con/images/user.jpg" alt="John Doe" class="circle"> <h3 class="yay-user-info-name">John Doe</h3> <div class="yay-user-location"> <i class="fa fa-map-marker"></i> Las Vegas, NV </div> </a> </li> <li> <a href="angularjs/" class="waves-effect waves-blue"><i class="ion ion-social-angular"></i> Open Angular Version</a> </li> <li class="label">Menu</li> <li > <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-dashboard"></i> Dashboards<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a> <ul> <li > <a href="dashboard.html" class="waves-effect waves-blue"> Dashboard</a> </li> <li > <a href="dashboard-v1.html" class="waves-effect waves-blue"> Dashboard v1</a> </li> </ul> </li> <li > <a href="widgets.html" class="waves-effect waves-blue"><i class="fa fa-magic"></i> Widgets</a> </li> <li > <a href="layouts.html" class="waves-effect waves-blue"><i class="mdi mdi-av-web"></i> Layouts <span class="badge new"></span></a> </li> <li class="label">Elements</li> <li > <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-css3"></i> CSS<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a> <ul> <li ><a class="waves-effect waves-blue" href="css-alerts.html"><i class="mdi-alert-warning"></i> Alerts</a></li> <li ><a class="waves-effect waves-blue" href="css-badges.html"><i class="mdi-action-stars"></i> Badges</a></li> <li ><a class="waves-effect waves-blue" href="css-colors.html"><i class="mdi-image-palette"></i> Colors</a></li> <li ><a class="waves-effect waves-blue" href="css-grid.html"><i class="mdi-action-dashboard"></i> Grid</a></li> <li ><a class="waves-effect waves-blue" href="css-helpers.html"><i class="mdi-action-help"></i> Helpers</a></li> <li ><a class="waves-effect waves-blue" href="css-icons.html"><i class="mdi-communication-invert-colors-on"></i> Icons</a></li> <li ><a class="waves-effect waves-blue" href="css-shadow.html"><i class="mdi-maps-layers"></i> Shadow</a></li> <li ><a class="waves-effect waves-blue" href="css-typography.html"><i class="fa fa-font"></i> Typography</a></li> </ul> </li> <li > <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-cubes"></i> UI Elements<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a> <ul> <li ><a class="waves-effect waves-blue" href="ui-buttons.html"><i class="fa fa-square"></i> Buttons</a></li> <li ><a class="waves-effect waves-blue" href="ui-chips.html"><i class="fa fa-tag"></i> Chips <span class="badge new"></span></a></li> <li ><a class="waves-effect waves-blue" href="ui-cards.html"><i class="mdi-av-web"></i> Cards</a></li> <li ><a class="waves-effect waves-blue" href="ui-collapsible.html"><i class="mdi-action-view-day"></i> Collapsible</a></li> <li ><a class="waves-effect waves-blue" href="ui-collections.html"><i class="fa fa-server"></i> Collections</a></li> <li ><a class="waves-effect waves-blue" href="ui-dropdown.html"><i class="mdi-navigation-arrow-drop-down-circle"></i> Dropdown</a></li> <li ><a class="waves-effect waves-blue" href="ui-modals.html"><i class="fa fa-external-link"></i> Modals</a></li> <li ><a class="waves-effect waves-blue" href="ui-nestable.html"><i class="fa fa-list"></i> Nestable <span class="badge new"></span></a></li> <li ><a class="waves-effect waves-blue" href="ui-pagination.html"><i class="mdi mdi-navigation-more-horiz"></i> Pagination</a></li> <li ><a class="waves-effect waves-blue" href="ui-progress-bars.html"><i class="fa fa-tasks"></i> Progress Bars</a></li> <li ><a class="waves-effect waves-blue" href="ui-tabs.html"><i class="mdi-action-tab-unselected"></i> Tabs</a></li> <li ><a class="waves-effect waves-blue" href="ui-toasts.html"><i class="mdi-action-announcement"></i> Toasts</a></li> <li ><a class="waves-effect waves-blue" href="ui-tooltips.html"><i class="fa fa-comment-o"></i> Tooltips</a></li> <li ><a class="waves-effect waves-blue" href="ui-tree-view.html"><i class="fa fa-list"></i> Tree View <span class="badge new"></span></a></li> <li ><a class="waves-effect waves-blue" href="ui-waves.html"><i class="mdi-image-blur-on"></i> Waves</a></li> <li ><a class="waves-effect waves-blue" href="ui-search-bar.html"><i class="mdi-action-search"></i> Search Bar</a></li> </ul> </li> <li > <a class="yay-sub-toggle waves-effect waves-blue"><i class="mdi mdi-image-panorama"></i> Media<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a> <ul> <li ><a class="waves-effect waves-blue" href="media-hover-effects.html"><i class="mdi mdi-image-style"></i> Hover Effects</a></li> <li ><a class="waves-effect waves-blue" href="media-scroll-effects.html"><i class="fa fa-magic"></i> Scroll Effects</a></li> <li ><a class="waves-effect waves-blue" href="media-gallery.html"><i class="mdi mdi-image-collections"></i> Gallery</a></li> <li ><a class="waves-effect waves-blue" href="media-material-box.html"><i class="mdi mdi-image-collections"></i> Material Box</a></li> <li ><a class="waves-effect waves-blue" href="media-parallax.html"><i class="mdi mdi-image-panorama"></i> Parallax</a></li> <li ><a class="waves-effect waves-blue" href="media-player.html"><i class="mdi mdi-av-play-circle-outline"></i> Player</a></li> <li ><a class="waves-effect waves-blue" href="media-slider.html"><i class="mdi mdi-action-view-carousel"></i> Slider</a></li> </ul> </li> <li class="label">Components</li> <li > <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-check-square-o"></i> Forms<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a> <ul> <li ><a class="waves-effect waves-blue" href="forms-base.html"><i class="fa fa-cube"></i> Base</a></li> <li ><a class="waves-effect waves-blue" href="forms-advanced.html"><i class="fa fa-cubes"></i> Advanced</a></li> <li ><a class="waves-effect waves-blue" href="forms-validation.html"><i class="fa fa-check-square-o"></i> Validation</a></li> <li ><a class="waves-effect waves-blue" href="forms-editors.html"><i class="fa fa-edit"></i> Editors</a></li> <li ><a class="waves-effect waves-blue" href="forms-checkout.html"> Checkout</a></li> <li ><a class="waves-effect waves-blue" href="forms-contacts.html"> Contacts</a></li> <li ><a class="waves-effect waves-blue" href="forms-login.html"> Login</a></li> <li ><a class="waves-effect waves-blue" href="forms-register.html"> Register</a></li> </ul> </li> <li class="open" > <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-globe"></i> Pages<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a> <ul> <li ><a class="waves-effect waves-blue" href="page-profile.html">Profile</a></li> <li ><a class="waves-effect waves-blue" href="page-timeline.html">Timeline</a></li> <li ><a class="waves-effect waves-blue" href="page-calendar.html">Calendar</a></li> <li><a class="waves-effect waves-blue" href="page-forgot-password.html">Forgot Password</a></li> <li><a class="waves-effect waves-blue" href="page-lock.html">Screen Lock</a></li> <li><a class="waves-effect waves-blue" href="page-sign-in.html">Sign In</a></li> <li><a class="waves-effect waves-blue" href="page-sign-up.html">Sign Up</a></li> <li><a class="waves-effect waves-blue" href="page-404.html">404</a></li> <li><a class="waves-effect waves-blue" href="page-500.html">500</a></li> <li class="active" ><a class="waves-effect waves-blue" href="page-blank.html">Blank</a></li> </ul> </li> <li class="label">Extra</li> <li > <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-envelope"></i> Mailbox<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a> <ul> <li ><a class="waves-effect waves-blue" href="mail-inbox.html"><i class="mdi-content-inbox"></i> Inbox</a></li> <li ><a class="waves-effect waves-blue" href="mail-compose.html"><i class="mdi-content-add-circle"></i> Compose</a></li> <li ><a class="waves-effect waves-blue" href="mail-view.html"><i class="mdi-content-drafts"></i> View</a></li> </ul> </li> <li > <a class="yay-sub-toggle waves-effect waves-blue"><i class="mdi mdi-action-shopping-cart"></i> eCommerce<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a> <ul> <li ><a class="waves-effect waves-blue" href="ecommerce-dashboard.html"><i class="fa fa-dashboard"></i> Dashboard</a></li> <li ><a class="waves-effect waves-blue" href="ecommerce-products.html"><i class="fa fa-tags"></i> Products</a></li> <li ><a class="waves-effect waves-blue" href="ecommerce-product-single.html"><i class="fa fa-tag"></i> Product Single</a></li> <li ><a class="waves-effect waves-blue" href="ecommerce-orders.html"><i class="fa fa-cart-plus"></i> Orders</a></li> <li ><a class="waves-effect waves-blue" href="ecommerce-order-single.html"><i class="fa fa-cart-plus"></i> Order Single</a></li> <li ><a class="waves-effect waves-blue" href="ecommerce-customers.html"><i class="fa fa-users"></i> Customers</a></li> <li ><a class="waves-effect waves-blue" href="ecommerce-settings.html"><i class="fa fa-cog"></i> Settings</a></li> <li ><a class="waves-effect waves-blue" href="ecommerce-invoice.html"><i class="ion ion-android-list"></i> Invoice</a></li> <li ><a class="waves-effect waves-blue" href="ecommerce-pricing-tables.html"><i class="fa fa-money"></i> Pricing Tables</a></li> </ul> </li> <li > <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-bar-chart"></i> Charts<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a> <ul> <li ><a class="waves-effect waves-blue" href="charts-flot.html">Flot</a></li> <li ><a class="waves-effect waves-blue" href="charts-rickshaw.html">Rickshaw</a></li> <li ><a class="waves-effect waves-blue" href="charts-sparkline.html">Sparkline</a></li> <li ><a class="waves-effect waves-blue" href="charts-nvd3.html">NVD3</a></li> </ul> </li> <li > <a class="yay-sub-toggle waves-effect waves-blue"><i class="mdi mdi-maps-place"></i> Maps<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a> <ul> <li ><a class="waves-effect waves-blue" href="maps-google.html">Google Maps</a></li> <li ><a class="waves-effect waves-blue" href="maps-vector.html">Vector Maps</a></li> </ul> </li> <li > <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-table"></i> Tables<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a> <ul> <li ><a class="waves-effect waves-blue" href="ui-tables.html">Base Tables</a></li> <li ><a class="waves-effect waves-blue" href="ui-datatables.html">Data Tables</a></li> </ul> </li> <li> <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-indent"></i> Menu Levels<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a> <ul> <li> <a class="yay-sub-toggle waves-effect waves-blue" href="#!">Second Level<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a> <ul> <li> <a class="yay-sub-toggle waves-effect waves-blue" href="#!">Third Level<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a> <ul> <li><a href="#!" class="waves-effect waves-blue">Fourth Level</a></li> <li><a href="#!" class="waves-effect waves-blue">Fourth Level</a></li> <li><a href="#!" class="waves-effect waves-blue">Fourth Level</a></li> </ul> </li> <li> <a class="yay-sub-toggle waves-effect waves-blue" href="#!">Third Level<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a> <ul> <li><a href="#!" class="waves-effect waves-blue">Fourth Level</a></li> <li><a href="#!" class="waves-effect waves-blue">Fourth Level</a></li> <li><a href="#!" class="waves-effect waves-blue">Fourth Level</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="label">Stats</li> <li class="content"> <span><i class="fa fa-spinner"></i> Server Load</span> <div class="progress small light-green lighten-4"> <div class="light-green accent-5" style="width: 37%"></div> </div> <span><i class="fa fa-thumbs-o-up"></i> User Satisfaction</span> <div class="progress small"> <div style="width: 91%"></div> </div> </li> </ul> </div> </div> </aside> <!-- /Yay Sidebar -->
<!-- Main Content --> <section class="content-wrap"> <!-- Breadcrumb --> <div class="page-title"> <div class="row"> <div class="col s12 m9 l10"> <h1>Blank</h1> <ul> <li> <a href="#"><i class="fa fa-home"></i> Home</a> <i class="fa fa-angle-right"></i> </li> <li><a href='dashboard.html'>Dashboard</a> <i class='fa fa-angle-right'></i> </li> <li><a href='#'>Pages</a> <i class='fa fa-angle-right'></i> </li> <li><a href='page-blank.html'>Blank</a> </li> </ul> </div> <div class="col s12 m3 l2 right-align"> <a href="#!" class="btn grey lighten-3 grey-text z-depth-0 chat-toggle"><i class="fa fa-comments"></i></a> </div> </div> </div> <!-- /Breadcrumb --> <!-- Page Content--> Page content goes here <!-- /Page Content--> </section> <!-- /Main Content -->
<!-- Search Bar --> <div class="search-bar"> <div class="layer-overlay"></div> <div class="layer-content"> <form action="#!"> <!-- Header --> <a class="search-bar-toggle grey-text text-darken-2" href="#!"><i class="mdi-navigation-close"></i></a> <!-- Search Input --> <div class="input-field"> <i class="mdi-action-search prefix"></i> <input type="text" name="con-search" placeholder="Search..."> </div> <!-- Search Results --> <div class="search-results"> <div class="row"> <div class="col s12 l4"> <h4>Users</h4> <div class="each-result"> <img src="assets/_con/images/user2.jpg" alt="Felecia Castro" class="circle photo"> <div class="title">Felecia Castro</div> <div class="label">Content Manager</div> </div> <div class="each-result"> <img src="assets/_con/images/user3.jpg" alt="Max Brooks" class="circle photo"> <div class="title">Max Brooks</div> <div class="label">Programmer</div> </div> <div class="each-result"> <img src="assets/_con/images/user4.jpg" alt="Patsy Griffin" class="circle photo"> <div class="title">Patsy Griffin</div> <div class="label">Support</div> </div> <div class="each-result"> <img src="assets/_con/images/user6.jpg" alt="Vernon Garrett" class="circle photo"> <div class="title">Vernon Garrett</div> <div class="label">Photographer</div> </div> </div> <div class="col s12 l4"> <h4>Articles</h4> <div class="each-result"> <div class="icon circle blue white-text">MD</div> <div class="title">Material Design</div> <div class="label nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!</div> </div> <div class="each-result"> <div class="icon circle teal white-text"> <i class="fa fa-dashboard"></i> </div> <div class="title">Admin Dashboard</div> <div class="label nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!</div> </div> <div class="each-result"> <div class="icon circle orange white-text">RD</div> <div class="title">Responsive Design</div> <div class="label nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!</div> </div> <div class="each-result"> <div class="icon circle red white-text"> <i class="fa fa-tablet"></i> </div> <div class="title">Mobile First</div> <div class="label nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!</div> </div> </div> <div class="col s12 l4"> <h4>Posts</h4> <div class="no-result">No results were found ;(</div> </div> </div> </div> </form> </div> </div> <!-- /Search Bar -->
chat-light
classname. HTML code as shown below:
<!-- Chat .chat-light - light color scheme --> <div class="chat"> <div class="layer-overlay"></div> <div class="layer-content"> <!-- Contacts --> <div class="contacts"> <!-- Top Bar --> <div class="topbar"> <a href="#!" class="text">Chat</a> <a href="#!" class="chat-toggle"><i class="mdi-navigation-close"></i></a> </div> <!-- /Top Bar --> <div class="nano"> <div class="nano-content"> <span class="label">Online</span> <div class="user"> <img src="assets/_con/images/user2.jpg" alt="Felecia Castro" class="circle photo"> <div class="name">Felecia Castro</div> <div class="status">Lorem status</div> <div class="online"><i class="green-text fa fa-circle"></i> </div> </div> <div class="user"> <img src="assets/_con/images/user3.jpg" alt="Max Brooks" class="circle photo"> <div class="name">Max Brooks</div> <div class="status">Lorem status</div> <div class="online"><i class="green-text fa fa-circle"></i> </div> </div> <div class="user"> <img src="assets/_con/images/user4.jpg" alt="Patsy Griffin" class="circle photo"> <div class="name">Patsy Griffin</div> <div class="status">Lorem status</div> <div class="online"><i class="green-text fa fa-circle"></i> </div> </div> <div class="user"> <img src="assets/_con/images/user5.jpg" alt="Chloe Morgan" class="circle photo"> <div class="name">Chloe Morgan</div> <div class="status">Lorem status</div> <div class="online"><i class="green-text fa fa-circle"></i> </div> </div> <div class="user"> <img src="assets/_con/images/user6.jpg" alt="Vernon Garrett" class="circle photo"> <div class="name">Vernon Garrett</div> <div class="status">Lorem status</div> <div class="online"><i class="yellow-text fa fa-circle"></i> </div> </div> <div class="user"> <img src="assets/_con/images/user7.jpg" alt="Greg Mcdonalid" class="circle photo"> <div class="name">Greg Mcdonalid</div> <div class="status">Lorem status</div> <div class="online"><i class="yellow-text fa fa-circle"></i> </div> </div> <div class="user"> <img src="assets/_con/images/user8.jpg" alt="Christian Jackson" class="circle photo"> <div class="name">Christian Jackson</div> <div class="status">Lorem status</div> <div class="online"><i class="yellow-text fa fa-circle"></i> </div> </div> <span class="label">Offline</span> <div class="user"> <img src="assets/_con/images/user9.jpg" alt="Willie Kelly" class="circle photo"> <div class="name">Willie Kelly</div> <div class="status">Lorem status</div> </div> <div class="user"> <img src="assets/_con/images/user10.jpg" alt="Jenny Phillips" class="circle photo"> <div class="name">Jenny Phillips</div> <div class="status">Lorem status</div> </div> <div class="user"> <img src="assets/_con/images/user11.jpg" alt="Darren Cunningham" class="circle photo"> <div class="name">Darren Cunningham</div> <div class="status">Lorem status</div> </div> <div class="user"> <img src="assets/_con/images/user12.jpg" alt="Sandra Cole" class="circle photo"> <div class="name">Sandra Cole</div> <div class="status">Lorem status</div> </div> </div> </div> </div> <!-- /Contacts --> <!-- Messages --> <div class="messages"> <!-- Top Bar with back link --> <div class="topbar"> <a href="#!" class="chat-toggle"><i class="mdi-navigation-close"></i></a> <a href="#!" class="chat-back"><i class="mdi-hardware-keyboard-arrow-left"></i> Back</a> </div> <!-- /Top Bar with back link --> <!-- All messages list --> <div class="list"> <div class="nano scroll-bottom"> <div class="nano-content"> <div class="date">Monday, Feb 23, 8:23 pm</div> <div class="from-me"> Hi, Felicia. <br>How are you? </div> <div class="clear"></div> <div class="from-them"> <img src="assets/_con/images/user2.jpg" alt="John Doe" class="circle photo">Hi! I am good! </div> <div class="clear"></div> <div class="from-me"> Glad to see you :) <br>This long text is intended to show how the chat will display it. </div> <div class="clear"></div> <div class="from-them"> <img src="assets/_con/images/user2.jpg" alt="John Doe" class="circle photo">Also, we will send the longest word to show how it will fit in the chat window: <strong>Pneumonoultramicroscopicsilicovolcanoconiosis</strong> </div> <div class="date">Friday, Mar 10, 5:07 pm</div> <div class="from-me"> Hi again! </div> <div class="clear"></div> <div class="from-them"> <img src="assets/_con/images/user2.jpg" alt="John Doe" class="circle photo">Hi! Glad to see you. </div> <div class="clear"></div> <div class="from-me"> I want to add you in my Facebook. </div> <div class="clear"></div> <div class="from-me"> Can you give me your page? </div> <div class="clear"></div> <div class="from-them"> <img src="assets/_con/images/user2.jpg" alt="John Doe" class="circle photo">I do not use Facebook. But you can follow me in Twitter. </div> <div class="clear"></div> <div class="from-me"> It's good idea! </div> <div class="clear"></div> <div class="from-them"> <img src="assets/_con/images/user2.jpg" alt="John Doe" class="circle photo">You can find me here - <a href="https://twitter.com/nkdevv">https://twitter.com/nkdevv</a> </div> </div> </div> </div> <!-- /All messages list --> <!-- Send message --> <div class="send"> <form action="#!"> <div class="input-field"> <input id="chat-message" type="text" name="chat-message"> </div> <button class="btn waves-effect z-depth-0"><i class="mdi-content-send"></i> </button> </form> </div> <!-- /Send message --> </div> <!-- /Messages --> </div> </div> <!-- /Chat -->
<footer>© 2015 <strong>nK</strong>. All rights reserved.</footer>
<!-- DEMO [REMOVE IT ON PRODUCTION] --> <script type="text/javascript" src="assets/_con/js/_demo.js"></script> <!-- jQuery --> <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> <!-- jQuery RAF (improved animation performance) --> <script type="text/javascript" src="bower_components/jquery-requestAnimationFrame/dist/jquery.requestAnimationFrame.min.js"></script> <!-- nanoScroller --> <script type="text/javascript" src="bower_components/nanoscroller/bin/javascripts/jquery.nanoscroller.min.js"></script> <!-- Materialize --> <script type="text/javascript" src="bower_components/materialize/bin/materialize.js"></script> <!-- Sortable --> <script type="text/javascript" src="bower_components/Sortable/Sortable.min.js"></script> <!-- Main --> <script type="text/javascript" src="assets/_con/js/_con.min.js"></script> </body> </html>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
base
,
amber
,
blue-grey
,
brown
,
cyan
,
deep-orange
,
deep-purple
,
green
,
indigo
,
light-blue
,
light-green
,
lime
,
orange
,
pink
,
purple
,
red
,
teal
,
yellow
To setup a selected theme. Include assets/_con/css/_con-[theme_name].css
in page head.
<link rel="stylesheet" type="text/css" href="assets/_con/css/_con-red.min.css" />
src
directory. Ready to use gulpfile.js, batch files, source scss, html and js files.
<link rel="stylesheet" type="text/css" href="bower_components/fontawesome/css/font-awesome.min.css">JavaScript Files:
No JavaScriptUsage Example:
<i class="fa fa-html5"></i>
<link rel="stylesheet" type="text/css" href="assets/material-design-icons/css/material-design-icons.min.css">JavaScript Files:
No JavaScriptUsage Example:
<i class="mdi-content-add"></i>
<link rel="stylesheet" type="text/css" href="bower_components/ionicons/css/ionicons.min.css">JavaScript Files:
No JavaScriptUsage Example:
<i class="ion-fireball"></i>
<link rel="stylesheet" type="text/css" href="bower_components/weather-icons/css/weather-icons.min.css">JavaScript Files:
No JavaScriptUsage Example:
<i class="wi wi-wind-default"></i>
<link rel="stylesheet" type="text/css" href="bower_components/pikaday/css/pikaday.css">JavaScript Files:
<script type="text/javascript" src="bower_components/pikaday/pikaday.js"></script> <script type="text/javascript" src="bower_components/pikaday/plugins/pikaday.jquery.js"></script>Usage Example:
<input class="pikaday" type="date">
<link rel="stylesheet" type="text/css" href="bower_components/clockpicker/dist/jquery-clockpicker.min.css">JavaScript Files:
<script type="text/javascript" src="bower_components/clockpicker/dist/jquery-clockpicker.min.js"></script>Usage Example:
<input class="clockpicker" type="text" value="18:10" data-donetext="OK">
<link rel="stylesheet" type="text/css" href="bower_components/spectrum/spectrum.css">JavaScript Files:
<script type="text/javascript" src="bower_components/spectrum/spectrum.js">Usage Example:
<input type='text' class="spectrum" value="#42A5F5" />
<link rel="stylesheet" type="text/css" href="bower_components/select2/dist/css/select2.min.css" />JavaScript Files:
<script type="text/javascript" src="bower_components/select2/dist/js/select2.full.min.js"></script>Usage Example:
<select class="select2"> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> ... </select>
<link rel="stylesheet" type="text/css" href="bower_components/jquery.tagsinput/src/jquery.tagsinput.css" />JavaScript Files:
<script type="text/javascript" src="bower_components/jquery.tagsinput/src/jquery.tagsinput.js"></script>Usage Example:
<input class="input-tag" type="text" name="tags" id="tags" value="PHP,JavaScript,CSS" />
<link rel="stylesheet" type="text/css" href="bower_components/dropzone/dist/min/dropzone.min.css" />JavaScript Files:
<script type="text/javascript" src="bower_components/dropzone/dist/min/dropzone.min.js"></script>Usage Example:
<form action="/file-upload" class="dropzone" id="my-dropzone"></form>
No CSSJavaScript Files:
<script type="text/javascript" src="bower_components/jquery.inputmask/dist/min/jquery.inputmask.bundle.min.js"></script>Usage Example:
<!-- Date --> <div class="input-field"> <input id="masked-date" type="text" data-inputmask="'alias': 'date'"> <label for="masked-date">Date</label> </div> <!-- /Date --> <!-- Date Alt --> <div class="input-field"> <input id="masked-date-alt" type="text" data-inputmask="'mask': 'y/m/d'"> <label for="masked-date-alt">Date Alt</label> </div> <!-- /Date Alt --> <!-- Time --> <div class="input-field"> <input id="masked-time" type="text" data-inputmask="'mask': 'h:s'"> <label for="masked-time">Time</label> </div> <!-- /Time --> <!-- Phone --> <div class="input-field"> <input id="masked-phone" type="text" data-inputmask="'mask': '(999) 999-9999'"> <label for="masked-phone">Phone</label> </div> <!-- /Phone --> <!-- Currency --> <div class="input-field"> <input id="masked-currency" type="text" data-inputmask="'numericInput': true, 'mask': '$ 999,999.99', 'rightAlignNumerics':false"> <label for="masked-currency">Currency</label> </div> <!-- /Currency -->
No CSSJavaScript Files:
<script type="text/javascript" src="bower_components/parsleyjs/dist/parsley.min.js"></script>Usage Example:
<form data-parsley-validate> <!-- Name --> <div class="input-field"> <input id="input-name" type="text" required> <label for="input-name">Name</label> </div> <!-- /Name --> <!-- Email --> <div class="input-field"> <input id="input-email" type="email" required> <label for="input-email">Email</label> </div> <!-- /Email --> <!-- Gender --> <p> <input name="radio-gender" type="radio" id="radio-gender-1" required /> <label for="radio-gender-1">Male</label> <input name="radio-gender" type="radio" id="radio-gender-2" /> <label for="radio-gender-2">Female</label> </p> <!-- /Gender --> <!-- Hobbies --> <label>Hobbies (2 minimum):</label> <p> <input name="check-hobbies" type="checkbox" id="check-skiing" value="skiing" data-parsley-mincheck="2" required /> <label for="check-skiing">Skiing</label> <input name="check-hobbies" type="checkbox" id="check-running" value="running" /> <label for="check-running">Running</label> <input name="check-hobbies" type="checkbox" id="check-eating" value="eating" /> <label for="check-eating">Eating</label> <input name="check-hobbies" type="checkbox" id="check-sleeping" value="sleeping" /> <label for="check-sleeping">Sleeping</label> </p> <!-- /Hobbies --> <!-- Heard --> <select name="heard" required> <option value="" disabled selected>Choose option</option> <option value="press">Press</option> <option value="internet">Internet</option> <option value="mouth">Word of mouth</option> <option value="other">Other...</option> </select> <!-- /Heard --> <!-- Message --> <div class="input-field"> <textarea id="textarea-msg" class="materialize-textarea" name="message" data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-validation-threshold="10" data-parsley-minlength-message="Come on! You need to enter at least a 20 caracters long comment.." required></textarea> <label for="textarea-msg">Message (20 chars min, 100 max):</label> </div> <!-- /Message --> <!-- Validation Button --> <div class="row"> <div class="col s12"> <button class="btn">Validate</button> </div> </div> <!-- /Validation Button --> <form>
<link href="assets/_con/squire/squire-ui.css" rel="stylesheet" type="text/css" />JavaScript Files:
<script type="text/javascript" src="bower_components/squire/build/squire.js"></script> <script type="text/javascript" src="assets/_con/squire/squire-ui.js"></script>Usage Example:
<textarea id="squire1"> <h3>Default Value</h3> <p>Default text</p> </textarea> <!-- Squire --> <script> new SquireUI({ replace: 'textarea#squire1', height: 200, buildPath: 'assets/_con/squire/' }); </script>
No CSSJavaScript Files:
<script type="text/javascript" src="bower_components/ckeditor/ckeditor.js"></script>Usage Example:
<textarea id="ckeditor1"></textarea> <div id="ckeditor2">Inline Text Editing</div> <script> CKEDITOR.replace( 'ckeditor1' ); CKEDITOR.inline( 'ckeditor2' ); </script>
<link rel="stylesheet" type="text/css" href="assets/_con/markitup/skins/_con/style.css" /> <link rel="stylesheet" type="text/css" href="bower_components/markitup-1x/markitup/sets/default/style.css" />JavaScript Files:
<script type="text/javascript" src="bower_components/markitup-1x/markitup/sets/default/set.js"></script> <script type="text/javascript" src="bower_components/markitup-1x/markitup/jquery.markitup.js"></script>Usage Example:
<textarea class="markItUp"></textarea>
No CSSJavaScript Files:
<script type="text/javascript" src="bower_components/flot/jquery.flot.js"></script> <script type="text/javascript" src="bower_components/flot/jquery.flot.time.js"></script> <script type="text/javascript" src="bower_components/flot/jquery.flot.pie.js"></script> <script type="text/javascript" src="bower_components/flot/jquery.flot.categories.js"></script> <script type="text/javascript" src="bower_components/flot.tooltip/js/jquery.flot.tooltip.min.js"></script>Usage Example:
<div id="flotLineChart" style="height: 250px"></div> <script> (function() { var chart = $("#flotLineChart"); var data1 = { data: [[1, 50], [2, 40], [3, 45], [4, 23],[5, 55],[6, 65],[7, 61],[8, 70],[9, 65],[10, 75],[11, 57],[12, 59]], label: "Mails" }; var data2 = { data: [[1, 25], [2, 50], [3, 23], [4, 48],[5, 38],[6, 40],[7, 47],[8, 55],[9, 43],[10,50],[11,47],[12, 39]], label: "SMS" }; var options = { series: { lines: { show: true, lineWidth: 1, fill: true, fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.13 } ] } }, points: { show: true, lineWidth: 2, radius: 3 }, shadowSize: 0, stack: true }, grid: { hoverable: true, clickable: true, tickColor: "#f9f9f9", borderWidth: 0 }, legend: { // show: false backgroundOpacity: 0, labelBoxBorderColor: "#fff" }, colors: ["#3f51b5", "#009688"], xaxis: { ticks: [[1, "Jan"], [2, "Feb"], [3, "Mar"], [4,"Apr"], [5,"May"], [6,"Jun"], [7,"Jul"], [8,"Aug"], [9,"Sep"], [10,"Oct"], [11,"Nov"], [12,"Dec"]], font: { family: "Roboto,sans-serif", color: "#ccc" } }, yaxis: { ticks:7, tickDecimals: 0, font: {color: "#ccc"} } }; function initFlot() { $.plot(chart, [data1, data2], options); chart.find('.legend table').css('width', 'auto') .find('td').css('padding', 5); } initFlot(); $(window).on('resize', initFlot); function showTooltip(x, y, contents) { $('<div id="tooltip">' + contents + '</div>').css( { position: 'absolute', display: 'none', top: y - 40, left: x - 55, color: "#fff", padding: '5px 10px', 'border-radius': '3px', 'background-color': 'rgba(0,0,0,0.6)' }).appendTo("body").fadeIn(200); } var previousPoint = null; chart.bind("plothover", function (event, pos, item) { if (item) { if (previousPoint != item.dataIndex) { previousPoint = item.dataIndex; $("#tooltip").remove(); var x = item.datapoint[0].toFixed(0), y = item.datapoint[1].toFixed(0); var month = item.series.xaxis.ticks[item.dataIndex].label; showTooltip(item.pageX, item.pageY, item.series.label + " of " + month + ": " + y); } } else { $("#tooltip").remove(); previousPoint = null; } }); }()); </script>
<link rel="stylesheet" type="text/css" href="bower_components/rickshaw/rickshaw.min.css" />JavaScript Files:
<script type="text/javascript" src="bower_components/d3/d3.min.js"></script> <script type="text/javascript" src="bower_components/rickshaw/rickshaw.min.js"></script>Usage Example:
<div id="rickshawLine" style="height: 250px"></div> <script> var rickshawLine1 = [ { x: 0, y: 43 }, { x: 1, y: 42 }, { x: 2, y: 32 }, { x: 3, y: 12 }, { x: 4, y: 46 }, { x: 5, y: 67 }, { x: 6, y: 34 }, { x: 7, y: 25 }, { x: 8, y: 32 }, { x: 9, y: 14 }, { x: 10, y: 2 }, { x: 11, y: 25 }, { x: 12, y: 48 } ]; var rickshawLine2 = [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 24 }, { x: 3, y: 32 }, { x: 4, y: 67 }, { x: 5, y: 53 }, { x: 6, y: 42 }, { x: 7, y: 32 }, { x: 8, y: 12 }, { x: 9, y: 35 }, { x: 10, y: 87 }, { x: 11, y: 56 }, { x: 12, y: 36 } ]; var rickshawLine3 = [ { x: 0, y: 30 }, { x: 1, y: 29 }, { x: 2, y: 12 }, { x: 3, y: 5 }, { x: 4, y: 38 }, { x: 5, y: 57 }, { x: 6, y: 21 }, { x: 7, y: 16 }, { x: 8, y: 29 }, { x: 9, y: 10 }, { x: 10, y: 0 }, { x: 11, y: 20 }, { x: 12, y: 37 } ]; // Line (function() { var element = $("#rickshawLine"); var graph = new Rickshaw.Graph( { element: element[0], renderer: 'line', stroke: true, series: [ { data: rickshawLine1, color: '#673ab7', name: 'Visits' }, { data: rickshawLine3, color: '#2196f3', name: 'Posts' }] } ); graph.render(); var hoverDetail = new Rickshaw.Graph.HoverDetail({ graph: graph, xFormatter: function(x) { return x + " Jan 2015" }, yFormatter: function(y) { return Math.floor(y) } }); // responsive $(window).on('resize', function() { graph.configure({ width: element.width() }); graph.render(); }); }()); </script>
No CSSJavaScript Files:
<script type="text/javascript" src="bower_components/jquery.sparkline/dist/jquery.sparkline.min.js"></script>Usage Example:
<div id="sparkline1"></div> <div id="sparkline2"></div> <script> $("#sparkline1").conSparkline([5,6,7,9,9,5,3,2,2,4,6,7], { type: 'line', width: '100%', height: '100', lineColor: '#64b5f6', spotColor: undefined, minSpotColor: undefined, maxSpotColor: undefined, highlightSpotColor: '#2196f3', highlightLineColor: '#2196f3', spotRadius: 2}); $("#sparkline2").conSparkline([12,9,7,8,9,5,3,5,10,14,5,2,3,4,6,9,4 ], { type: 'line', width: '100%', height: '100 ', lineColor: '#4db6ac', fillColor: '#b2dfdb', highlightSpotColor: '#009688', spotColor: false, minSpotColor: false, maxSpotColor: false, highlightLineColor: false, highlightLineColor: false, spotRadius: 5}); </script>
<link rel="stylesheet" type="text/css" href="bower_components/nvd3/build/nv.d3.min.css" />JavaScript Files:
<script type="text/javascript" src="bower_components/d3/d3.min.js"></script> <script type="text/javascript" src="bower_components/nvd3/build/nv.d3.min.js"></script>Usage Example:
<div id="chart1" style="height: 300px;"></div> <script> (function() { nv.addGraph(function() { var chart = nv.models.lineChart() .margin({right: 10}) .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! .showLegend(true) //Show the legend, allowing users to turn on/off line series. .showYAxis(true) //Show the y-axis .showXAxis(true) //Show the x-axis ; chart.xAxis //Chart x-axis settings .axisLabel('Time (ms)') .tickFormat(d3.format(',r')); chart.yAxis //Chart y-axis settings .axisLabel('Voltage (v)') .tickFormat(d3.format('.02f')); /* Done setting the chart up? Time to render it!*/ var myData = sinAndCos(); //You need data... d3.select('#chart1').append('svg') //Select the <svg> element you want to render the chart in. .datum(myData) //Populate the <svg> element with chart data... .call(chart); //Finally, render the chart! //Update the chart when window resizes. nv.utils.windowResize(function() { chart.update() }); return chart; }); function sinAndCos() { var sin = [],sin2 = [], cos = []; //Data is represented as an array of {x,y} pairs. for (var i = 0; i < 100; i++) { sin.push({x: i, y: Math.sin(i/10)}); sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5}); cos.push({x: i, y: .5 * Math.cos(i/10)}); } //Line chart data should be sent as an array of series objects. return [ { values: sin, //values - represents the array of {x,y} data points key: 'Sine Wave', //key - the name of the series. color: '#ff7f0e' //color - optional: choose your own line color. }, { values: cos, key: 'Cosine Wave', color: '#2ca02c' }, { values: sin2, key: 'Another sine wave', color: '#7777ff', area: true //area - set to true if you want this line to turn into a filled area chart. } ]; } }()); </script>
No CSSJavaScript Files:
<script src="https://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="bower_components/gmaps/gmaps.min.js"></script>Usage Example:
<!-- Map --> <div class="map" id="map1"></div> <!-- /Map --> <script> /* * MAP 1 */ jQuery(function() { "use strict"; // init panorama var panorama = GMaps.createPanorama({ el: '#map1', lat: -23.442896, lng: 151.906584, pov: { heading: 340, pitch: -3 } }); }); </script>
<link rel="stylesheet" type="text/css" href="assets/jquery-jvectormap/jquery-jvectormap.css" />JavaScript Files:
<script type="text/javascript" src="assets/jquery-jvectormap/jquery-jvectormap.min.js"></script> <script type="text/javascript" src="assets/jquery-jvectormap/jquery-jvectormap-world-mill-en.js"></script> <script type="text/javascript" src="assets/jquery-jvectormap/gdp-data.js"></script>Usage Example:
<!-- map --> <div id="map1" class="map"></div> <!-- /map --> <script> /* * MAP 1 */ jQuery(function() { $('#map1').vectorMap({ map: 'world_mill_en', series: { regions: [{ values: gdpData, scale: ['#C8EEFF', '#0071A4'], normalizeFunction: 'polynomial' }] }, onRegionTipShow: function(e, el, code){ el.html(el.html()+' (GDP - '+gdpData[code]+')'); } }); }) </script>
No CSSJavaScript Files:
<script type="text/javascript" src="bower_components/wow/dist/wow.min.js"></script>Usage Example:
<div class="wow fadeIn"></div> <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div> <div class="wow pulse" data-wow-offset="10" data-wow-iteration="100"></div>
bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
<link rel="stylesheet" type="text/css" href="bower_components/animate.css/animate.min.css" />JavaScript Files:
No JSUsage Example:
<h1 class="animated infinite bounce">Example</h1>
<link rel="stylesheet" type="text/css" href="bower_components/photoswipe/dist/default-skin/default-skin.css" /> <link rel="stylesheet" type="text/css" href="bower_components/photoswipe/dist/photoswipe.css" />JavaScript Files:
<script type="text/javascript" src="bower_components/photoswipe/dist/photoswipe.min.js"></script> <script type="text/javascript" src="bower_components/photoswipe/dist/photoswipe-ui-default.min.js"></script>Usage Example:
<div class="photoswipe-gallery"> <a href="assets/_con/images/gallery-1.jpg" data-size="2880x1800" data-med="assets/_con/images/gallery-1-med.jpg" data-med-size="1440x900" data-author="AUTHOR"> <img src="assets/_con/images/gallery-1-small.jpg" alt="" /> <figure>CAPTION</figure> </a> <a href="assets/_con/images/gallery-2.jpg" data-size="2880x1800" data-med="assets/_con/images/gallery-2-med.jpg" data-med-size="1440x900" data-author="AUTHOR"> <img src="assets/_con/images/gallery-2-small.jpg" alt="" /> <figure>CAPTION</figure> </a> </div>
No CSSJavaScript Files:
<script type="text/javascript" src="bower_components/isotope/dist/isotope.pkgd.min.js"></script>Usage Example:
<div class="row isotope"> <div class="col s12 m6 l3 item"> Item </div> <div class="col s12 m6 l3 item"> Item </div> <div class="col s12 m6 l3 item"> Item </div> <div class="col s12 m6 l3 item"> Item </div> <div class="col s12 m6 l3 item"> Item </div> </div>
No CSSJavaScript Files:
<script type="text/javascript" src="bower_components/datatables/media/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="bower_components/datatables-tabletools/js/dataTables.tableTools.js"></script> <script type="text/javascript" src="bower_components/datatables-scroller/js/dataTables.scroller.js"></script>Usage Example:
<table id="table1" class="display table table-bordered table-striped table-hover"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> ... </tbody> </table> <script type="text/javascript" src="assets/dataTables/js/jquery.dataTables.min.js"></script> <script> $('#table1').DataTable({ "bLengthChange": false, "iDisplayLength": 5, "filter": false }); </script>
<link rel="stylesheet" type="text/css" href="bower_components/fullcalendar/dist/fullcalendar.min.css" />JavaScript Files:
<script type="text/javascript" src="bower_components/moment/min/moment.min.js"></script> <script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.min.js"></script> <script type="text/javascript" src="bower_components/fullcalendar/dist/fullcalendar.min.js"></script>Usage Example:
<!-- Calendar --> <div class="card"> <div id="calendar"></div> </div> <!-- /Calendar --> <script> $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: '2015-02-12', editable: true, events: [ { title: 'All Day Event', start: '2015-02-01' }, { title: 'Long Event', start: '2015-02-07', end: '2015-02-10' }, { id: 999, title: 'Repeating Event', start: '2015-02-09T16:00:00' }, { id: 999, title: 'Repeating Event', start: '2015-02-16T16:00:00' }, { title: 'Conference', start: '2015-02-11', end: '2015-02-13' }, { title: 'Meeting', start: '2015-02-12T10:30:00', end: '2015-02-12T12:30:00' }, { title: 'Lunch', start: '2015-02-12T12:00:00' }, { title: 'Meeting', start: '2015-02-12T14:30:00' }, { title: 'Click for Google', url: 'http://google.com/', start: '2015-02-28' } ] }); </script>
No CSSJavaScript Files:
<script type="text/javascript" src="bower_components/nestable/jquery.nestable.js"></script>Usage Example:
<div class="dd"> <ol class="dd-list"> <li class="dd-item" data-id="1"> <div class="dd-handle">Item 1</div> </li> <li class="dd-item" data-id="2"> <div class="dd-handle">Item 2</div> <ol class="dd-list"> <li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li> <li class="dd-item" data-id="4"><div class="dd-handle">Item 4</div></li> <li class="dd-item" data-id="5"> <div class="dd-handle">Item 5</div> <ol class="dd-list"> <li class="dd-item" data-id="6"><div class="dd-handle">Item 6</div></li> <li class="dd-item" data-id="7"><div class="dd-handle">Item 7</div></li> <li class="dd-item" data-id="8"><div class="dd-handle">Item 8</div></li> </ol> </li> <li class="dd-item" data-id="9"><div class="dd-handle">Item 9</div></li> <li class="dd-item" data-id="10"><div class="dd-handle">Item 10</div></li> </ol> </li> <li class="dd-item" data-id="11"> <div class="dd-handle">Item 11</div> </li> <li class="dd-item" data-id="12"> <div class="dd-handle">Item 12</div> </li> </ol> </div>
<link rel="stylesheet" type="text/css" href="assets/_con/jstree/style.min.css" />JavaScript Files:
<script type="text/javascript" src="bower_components/jstree/dist/jstree.min.js"></script>Usage Example:
<div class="js-tree-1"> <ul> <li>Root node 1 <ul> <li data-jstree='{ "selected" : true }'><a href="#"><em>initially</em> <strong>selected</strong></a></li> <li data-jstree='{ "icon" : "//jstree.com/tree-icon.png" }'>custom icon URL</li> <li data-jstree='{ "opened" : true }'>initially open <ul> <li>Another node</li> </ul> </li> <li data-jstree='{ "icon" : "glyphicon glyphicon-leaf" }'>Custom icon class (bootstrap)</li> </ul> </li> <li><a href="//www.jstree.com">Root node 2</a></li> </ul> </div> <script> $('.js-tree-1').jstree(); </script>
You can add your setting for each page in js/app.js file. Full list of available options:
conAngular.factory('settings', ['$rootScope', function($rootScope) { var settings = { rtl: false, // rtl mode boxed: false, // boxed layout navbar: { dark: false, // dark color scheme static: false, // static under: false // navbar under sidebar }, sidebar: { hideToSmall: true, // hide to small sidebar static: false, // static gestures: true, // gestures support light: false, // light color scheme overlapContent: false, // Overlay content when opened effect: 'shrink' // show effect: [shrink, push, overlay] }, chat: { light: false // light color scheme } } ...
To create new page in AngularJS version of template, you need to done some steps:
<li> <a href="#/new_page.html" class="waves-effect waves-blue"><i class="fa fa-css3"></i> New Page</a> </li>
.state('/new_page', { url: "/new_page.html", templateUrl: "tpl/new_page.html", controller: "PageController", data: { pageTitle: 'New Page Title', crumbs: [{ title: '<i class="fa fa-home"></i> Home', href: '#' }, { title: 'Dashboard', href: '#/dashboard.html' }, { title: 'New Page', href: '#/new_page.html' }] }, resolve: { deps: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load([{ name: 'conAngular', insertBefore: '#ngInsertBefore', files: conAssets('sortable') }]); }] } })
To use plugins you have 2 ways:
resolve: { deps: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load([{ name: 'conAngular', insertBefore: '#ngInsertBefore', files: [ '../assets/sortable/Sortable.min.js', '../assets/markitup/skins/_con/style.css', '../assets/markitup/sets/default/style.css', '../assets/markitup/sets/default/set.js', '../assets/markitup/jquery.markitup.js' ] }]); }] }
resolve: { deps: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load([{ name: 'conAngular', insertBefore: '#ngInsertBefore', files: conAssets('sortable,markitup') }]); }] }
All available plugin names for conAssets method