"NavBar 4.4"
Bootstrap 3.1.0 Snippet by miguelbustamante

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39"> <title>Support</title> <!-- Force IE to turn off past version compatibility mode and use current version mode --> <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"> <!-- Get the width of the users display--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Text encoded as UTF-8 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- icons --> <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <!-- bootstrap --> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="default"> <!-- theme --> <link href="https://netdna.bootstrapcdn.com/bootswatch/3.1.0/bootstrap/bootstrap.min.css" rel="stylesheet" title="theme"> <style> * { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } body {background-color: white;} table#TixManagementContent {background-color: white;} .double-input .form-control { width: 100%; } .navbar .btn {max-width: 80px;} .navbar-left .btn {margin-left: 10px;} .navbar-right .btn {margin-right: 10px;} </style> </head> <body> <!-- start header --> <center> <table width="960px" id="TixManagementContent" class="TixManagementContent"> <tbody> <tr> <td align="left"> <!-- end header --> <div class="container" style="width:960px;"> <div class="row"> <nav class="navbar navbar-default navbar-justified" role="navigation"> <div class="col-lg-12"> <div class="pull-left"> <div class="navbar-btn navbar-left"> <button class="btn btn-default"> <span class="glyphicon glyphicon-align-justify"></span> <span class="label-icon">Menu</span> </button> </div> <div class="navbar-btn navbar-left"> <button class="btn btn-default"> <span class="glyphicon glyphicon-dashboard"></span> <span class="label-icon">Dashboard</span> </button> </div> </div> <div class="pull-left" > <form class="navbar-form" role="search"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> <span class="glyphicon glyphicon-search"></span> <span class="label-icon">Search</span> <span class="caret"></span> </button> <ul class="dropdown-menu pull-left" role="menu"> <li> <a href="#"> <span class="fa fa-user"></span> <span class="label-icon">Search By User</span> </a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-book"></span> <span class="label-icon">Search By Organization</span> </a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-search"></span> <span class="label-icon">Search</span> </a> </li> </ul> </span> <input type="text" style="width:350px;" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go</button> </span> </div><!-- /input-group --> </form> </div> <div class="pull-right" > <div class="navbar-nav navbar-btn navbar-right"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-cog"></span> <span class="label-icon">Preferences</span> </button> <ul class="dropdown-menu" style="width:300px; padding:0px;"> <li> <form class="form-horizontal" id="preferences" action="" method="post" accept-charset="utf-8"> <hidden input value ="netdna.bootstrapcdn.com/bootswatch/3.1.0/" name="theme_url"> <div class="panel panel-default" id="preferences" style="margin:0px;"> <div class="panel-heading"> <span class="panel-label">User Preferences</span> </div> <div class="panel-body"> <div class="form-group"> <label for="nav_theme" class="col-lg-6 control-label" > Navbar </label> <div class="col-lg-6"> <select class="form-control" id="nav_theme" name="nav_theme"> <option value="navbar-default">Basic</option> <option value="navbar-default">Default</option> <option value="navbar-default">Inverse</option> <option value="navbar-default">Outline</option> </select> </div> </div> <div class="form-group"> <label for="btn_theme" class="col-lg-6 control-label" > Button Theme </label> <div class="col-lg-6"> <select class="form-control" id="btn_theme" name="btn_theme"> <option value="btn-primary">Primary</option> <option value="btn-default">Default</option> <option value="btn-success">Success</option> <option value="btn-info">Info</option> <option value="btn-warning">Warning</option> <option value="btn-danger">Danger</option> <option value="btn-inverse">Inverse</option> </select> </div> </div> <div class="form-group"> <label for="theme_name" class="col-lg-6 control-label"> Theme </label> <div class="col-lg-6"> <select class="form-control" id="theme_name" name="theme_name"> <option value="amelia"> Amelia </option> <option value="bootstrap"> Default </option> <option value="cerulean"> Cerulean </option> <option value="cosmo"> Cosmo </option> <option value="cyborg"> Cyborg </option> <option value="flatly"> Flatly </option> <option value="journal"> Journal </option> <option value="lumen"> Lumen </option> <option value="readable"> Readable </option> <option value="simplex"> Simplex </option> <option value="slate"> Slate </option> <option value="spacelab"> Spacelab </option> <option value="superhero"> Superhero </option> <option value="united"> United </option> <option value="yeti"> Yeti </option> <option value="whiteplum"> WhitePlum </option> </select> </div> </div> <div class="form-group"> <label for="text_size" class="col-lg-6 control-label"> Display Label </label> <div class="col-lg-6"> <div class="btn-group" data-toggle="buttons" style="margin:0px padding:0px;"> <label class="btn btn-default toggle-button" style="pull-left margin:0px padding:0px; width:50%"> <input id="inlineradio1" name="display_label" type="radio" value=""> Show </label> <label class="btn btn-default toggle-button" style="pull-right margin:0px padding:0px; width:50%"> <input id="inlineradio2" name="display_label" type="radio" value="hide" > Hide </label> </div> </div> </div> </div> <div class="panel-footer"> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block">Update</button> </div> </div> </form> </li> </ul> </div> </div> <div class="navbar-btn navbar-right"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-bell"></span> <span class="label-icon">Alerts</span> </button> </div> </div> </div> </div><!-- /.col-lg-6 --> </div> </nav> </div> <div class="row"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> <span class="current-theme">Organization Information</span> </h3> </div> <div class="panel-body"> <div class="col-lg-2 dash-widget"> <div class="label-primary" style="padding: 5px; border-radius: 6px;"> <button class="btn btn-primary btn-lg btn-block" role="button" style="padding: 2px;"> <div class="fa fa-clock-o fa-3x"></div> <div class="icon-label">Time Zone</div> </button> <button class="btn btn-primary btn-block" style="height: 40px;"> Eastern </button> </div> </div> <div class="col-lg-2 dash-widget"> <div class="label-primary" style="padding: 5px; border-radius: 6px;"> <button class="btn btn-primary btn-lg btn-block disabled" role="button" style="padding: 2px;"> <div class="fa fa-desktop fa-3x"></div> <div class="icon-label"> Platform </div> </button> <button class="btn btn-primary btn-block disabled" style="height: 40px;"> TIX2 </button> </div> </div> <div class="col-lg-2 dash-widget"> <div class="label-primary" style="padding: 5px; border-radius: 6px;"> <button class="btn btn-primary btn-lg btn-block disabled " role="button" style="padding: 2px;"> <div class="fa fa-shopping-cart fa-3x"></div> <div class="icon-label"> Gateway </div> </button> <button class="btn btn-primary btn-block active" style="height: 40px;"> Eastern </button> </div> </div> <div class="col-lg-2 dash-widget"> <div class="label-primary" style="padding: 5px; border-radius: 6px;"> <button class="btn btn-primary btn-lg btn-block active" role="button" style="padding: 2px;"> <div class="fa fa-print fa-3x"></div> <div class="icon-label"> Fullfilment </div> </button> <button class="btn btn-primary btn-block disabled" style="height: 40px;"> Yes </button> </div> </div> <div class="col-lg-2 dash-widget"> <div class="label-primary" style="padding: 5px; border-radius: 6px;"> <button class="btn btn-primary btn-lg btn-block disabled" role="button" style="padding: 2px;"> <div class="fa fa-suitcase fa-3x"></div> <div class="icon-label"> Sales Rep </div> </button> <button class="btn btn-primary btn-block" style="height: 40px;"> Name Name </button> </div> </div> <div class="col-lg-2 dash-widget"> <div class="label-primary" style="padding: 5px; border-radius: 6px;"> <button class="btn btn-primary btn-lg btn-block disabled" role="button" style="padding: 2px;"> <div class="fa fa-user fa-3x"></div> <div class="icon-label"> Contact </div> </button> <button class="btn btn-inverse btn-block" style="height: 40px;"> Name Name </button> </div> </div> </div> </div> </div> </div> </div> <!-- start footer --> </td> </tr> </tbody> </table> </center> <!-- end footer --> </body> </html>
$(function(){ $(".input-group-btn .dropdown-menu li a").click(function(){ var selText = $(this).html(); //working version - for single button // //$('.btn:first-child').html(selText+'<span class="caret"></sphttp://bootsnipp.com/user/snippets/Ov3q#an>'); //working version - for multiple buttons // $(this).parents('.input-group-btn').find('.dropdown-toggle').html(selText+'<span class="caret"></span>'); }); }); function save_settings() { localStorage.setItem("navbar_name" , $( "#navbar_name" ).val()); localStorage.setItem("btn_theme", $( "#btn_theme" ).val()); localStorage.setItem("theme_name", $( "#theme_name" ).val()); localStorage.setItem("display_label",$('input[name="display_label"]:checked').val()); apply_preferences_to_page(); } function load_settings() { var navbar_name = localStorage.getItem( "navbar_name" ); var btn_theme = localStorage.getItem( "btn_theme" ); var theme_name = localStorage.getItem( "theme_name" ); var display_label = localStorage.getItem( "display_label" ); $("#navbar_name").val(navbar_name); $("#btn_theme").val(btn_theme); $("#theme_name").val(theme_name); $('input[name=display_label][value=display_label]').prop('checked', 'checked'); apply_preferences_to_page(); } function apply_preferences_to_page() { var nav_theme = localStorage.getItem("nav_theme"); var btn_theme = localStorage.getItem("btn_theme"); var theme_name = localStorage.getItem("theme_name"); var display_label = localStorage.getItem("display_label"); $("#wrapper").attr("class",theme_name); $("nav").attr("class", "navbar "+nav_theme); $("div.navbar-btn button.btn").attr("class","btn "+btn_theme); $('link[title="theme"]').attr('href','http://netdna.bootstrapcdn.com/bootswatch/3.1.0/'+theme_name+'/bootstrap.min.css'); $(".current-theme").html(theme_name); $(".label-icon").attr("class","label-icon "+display_label); display_preferences(); } function display_preferences() { //the variable that will hold the results var dataLog = ""; var i = 0; //how many items are in the database starting with zero var logLength = localStorage.length-1; dataLog = "<thead><tr class='active'><th>Item Name</th><th>Item Data</th></tr></thead><tbody>" //now we are going to loop through each item in the database for (i = 0; i <= logLength; i++) { //lets setup some variables for the key and values var itemKey = localStorage.key(i); var itemData = localStorage.getItem(itemKey); //now that we have the item, lets add it to the table dataLog += '<tr><td>'+itemKey+'</td><td>'+itemData+'</td></tr>'; } //if there were no items in the database if (dataLog == "") dataLog = '<li class="empty">Log Currently Empty</li>'; //update the ul with the list items $("#theLog").html(dataLog); } $(function() { load_settings(); $('form#preferences').submit(function(event){ event.preventDefault(); save_settings(); }); });

Related: See More


Questions / Comments: