<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Download jQuery UI Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="A preview of the jQuery UI Bootstrap theme."> <meta name="author" content="Addy Osmani"> <!-- Le styles --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="css/custom-theme/jquery-ui-1.10.3.custom.css"> <!--<link rel="stylesheet" href="css/custom-theme/jquery-ui-1.10.3.theme.css">--> <link rel="stylesheet" href="assets/css/font-awesome.min.css"> <!--[if IE 7]> <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css"> <![endif]--> <!--[if lt IE 9]> <link rel="stylesheet" href="css/custom-theme/jquery.ui.1.10.3.ie.css"> <![endif]--> <link rel="stylesheet" href="assets/css/docs.css"> <link rel="stylesheet" href="assets/js/google-code-prettify/prettify.css"> <!--begin wijmo menu--> <link href="third-party/wijmo/jquery.wijmo-open.1.5.0.css" rel="stylesheet" type="text/css" /> <!--End wijmo menu--> <!--begin file input--> <link href="third-party/jQuery-UI-FileInput/css/enhanced.css" rel="Stylesheet"> <!--End file input--> <!-- jqGrid--> <link rel="stylesheet" href="third-party/jqGrid/jqGrid/css/ui.jqgrid.css" /> <link rel="stylesheet" href="third-party/jqGrid/jqGrid.overrides.css"> <!-- end jqGrid --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="assets/js/vendor/html5shiv.js" type="text/javascript"></script> <script src="assets/js/vendor/respond.min.js" type="text/javascript"></script> <![endif]--> <!-- Le fav and touch icons --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="assets/ico/favicon.png"> </head> <body data-spy="scroll" data-target=".bs-docs-sidebar" data-twttr-rendered="true"> <!-- Navbar ================================================== --> <header class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://github.com/addyosmani/jquery-ui-bootstrap">jQuery UI Bootstrap</a> </div> <nav class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li> <a href="./index.html">Home</a> </li> <li> <a href="./components.html">Components</a> </li> <li class="active"> <a href="./extra.html">Extra</a> </li> <li> <a href="./map.html">Map</a> </li> <li> <a href="http://github.com/addyosmani/jquery-ui-bootstrap/issues">Feedback/Issues</a> </li> <li> <a href="http://twitter.com/addyosmani">Contact</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Switch Theme <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="./index.html">Default Bootstrap Theme (Non LESS'd)</a></li> <li><a href="theme/united/index.html">United Theme via Bootswatch (LESS'd)</a></li> <li><a href="theme/base/index.html">Default Bootstrap Theme (LESS'd)</a></li> </ul> </li> </ul> <div id="twitter-share" class="navbar-right"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://addyosmani.github.com/jquery-ui-bootstrap/" data-text="A new jQuery UI Bootstrap theme" data-via="addyosmani" data-size="large">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> </nav> </div> </header> <!-- Subhead ================================================== --> <header class="bs-header" id="overview"> <div class="container"> <h1>jQuery UI Bootstrap</h1> <p class="lead">A Bootstrap-themed kickstart for jQuery UI widgets (v1.0 alpha).</p> </div> </header> <div class="container" id="layout"> <!-- Docs nav ================================================== --> <div class="row"> <div class="col-lg-3 col-sm-3" id="sidebar"> <div class="bs-sidebar hidden-print" role="complementary"> <ul class="nav bs-sidenav"> <li><a href="#wijmo"><i class="icon-chevron-right"></i> Wijmo</a></li> <li><a href="#file-input"><i class="icon-chevron-right"></i> File input</a></li> <li><a href="#date-range"><i class="icon-chevron-right"></i> Date Range</a></li> <li><a href="#jqgrid"><i class="icon-chevron-right"></i> jqGrid</a></li> <li><a href="#font-awesome"><i class="icon-chevron-right"></i> Font Awesome</a></li> </ul> </div> </div> <div class="col-lg-9 col-sm-9" id="article"> <!-- Wijmo ================================================== --> <section id="wijmo"> <div class="page-header"> <h1>Wijmo</h1> </div> <p> This is an example of how to retheme one of the Wijmo jQuery UI components to match the Bootstrap theme. Whilst a menu component will be arriving to jQueryUI soon, you can find the menu in <a href="http://wijmo.com/widgets/wijmo-open/">Wijmo Open</a>. </p> <div id="wijmo-container" class="container"> <ul id="menu1"> <li> <h3> <a href="">Project Name</a></h3> </li> <li><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Dropdown</a> <ul> <li><a href="#">Secondary link</a> </li> <li><a href="#">Something else here</a> </li> <li></li> <li><a href="#">Another link</a> </li> </ul> </li> <li> <input type="text" placeholder="Search"> </li> </ul> <!-- End demo markup --> </div> <div class="clearfix"></div> <pre class="prettyprint linenums"> $("#menu1").wijmenu({ trigger: ".wijmo-wijmenu-item", triggerEvent: "click" }); </pre> </section> <!-- File input --> <section id="file-input"> <div class="page-header"> <h1>File Input</h1> </div> <div class="container"> <form> <div class="form-group"> <input type="file" name="file" id="file"> </div> </form> </div> <pre class="prettyprint linenums"> $('#file').customFileInput({ button_position : 'right' }); </pre> </section> <!-- end file input --> <!-- Date Range input --> <section id="date-range"> <div class="page-header"> <h1>Select a Date Range with datepicker</h1> </div> <p> <input type="text" value="01/01/2013" id="rangeBa" /> <input type="text" value="02/06/2013" id="rangeBb" /> </p> <pre class="prettyprint linenums"> // Select a Date Range with datepicker $( "#rangeBa" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ) { $( "#rangeBb" ).datepicker( "option", "minDate", selectedDate ); } }); $( "#rangeBb" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ) { $( "#rangeBa" ).datepicker( "option", "maxDate", selectedDate ); } }); </pre> </section> <!-- end Date Range --> <section id="jqgrid"> <div class="page-header"> <h1>jqGrid</h1> </div> <h3>Table with jqGrid</h3> <div class="row"> <div class="col-lg-12 col-sm-12"> <table id="jqGrid01"></table> <div id="jqGridPager01"></div> </div> </div> <p> </p> <pre class="prettyprint linenums"> // ############ jqGrid Table $("#jqGrid01").jqGrid({ data: mydata, datatype: "local", height: 250, rowNum: 10, rowList: [10,20,30], colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:60, sorttype:"int",search:true}, {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"}, {name:'name',index:'name', width:100}, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"}, {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"}, {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, {name:'note',index:'note', width:150, sortable:false} ], pager: "#jqGridPager01", viewrecords: true, caption: "Sample jqGrid Table", hidegrid:false, altRows: true }); $("#jqGrid01") .jqGrid('filterToolbar',{defaultSearch:true,stringResult:true}) .jqGrid('setSelection', '3'); </pre> <p> </p> </section> <!-- File input --> <section id="font-awesome"> <div class="page-header"> <h1>Font Awesome</h1> </div> <h3>Toolbar with Font Awesome</h3> <form class="clearfix"> <div id="toolbar-fa" class="ui-toolbar ui-widget-header ui-corner-all"> <button id="play-fa">Play</button> <button id="stop-fa">Stop</button> <button id="prev-fa">Prev</button> <button id="next-fa">Next</button> <input type="checkbox" id="shuffle-fa"><label for="shuffle-fa">Shuffle</label> <span id="repeat-fa"> <input type="radio" id="repeat0-fa" name="repeat" checked="checked"><label for="repeat0-fa">No Repeat</label> <input type="radio" id="repeat1-fa" name="repeat"><label for="repeat1-fa">Once</label> <input type="radio" id="repeatall-fa" name="repeat"><label for="repeatall-fa">All</label> </span> </div> </form> <pre class="prettyprint linenums"> //####### Toolbar with Font Awesome $("#play-fa").button({ text: false, icons: { primary: "icon-play" } }); $("#stop-fa").button({ text: false, icons: { primary: "icon-stop" } }); $("#prev-fa").button({ text: false, icons: { primary: "icon-fast-backward" } }); $("#next-fa").button({ text: false, icons: { primary: "icon-fast-forward" } }); $("#shuffle-fa").button(); $("#repeat-fa").buttonset(); </pre> <h3>Buttons with icons (Font Awesome)</h3> <p> <button id="button-with-icon-fa">Button with icon only</button> <button id="button-with-icon2-fa" class="ui-button-warning">Button with icon only</button> <button id="button-with-icon3-fa" class="ui-button-danger">Button with icon only</button> </p> <pre class="prettyprint linenums"> // ############ Button with icon (Font Awesome) $("#button-with-icon-fa" ).button({ icons: { primary: "icon-lock" }, text: false }); $("#button-with-icon2-fa" ).button({ icons: { primary: "icon-play" }, text: false }); $("#button-with-icon3-fa" ).button({ icons: { primary: "icon-stop" }, text: false }); </pre> <h3>Split Button (Font Awesome)</h3> <div id="split-button-fa" class="clearfix"> <div> <button id="rerun-fa">Run last action</button> <button id="select-fa">Select an action</button> </div> <ul> <li><a href="#">Open...</a></li> <li><a href="#">Save</a></li> <li><a href="#">Delete</a></li> </ul> </div> <pre class="prettyprint linenums"> // Split Button $( "#rerun-fa" ) .button() .click(function() { alert( "Running the last action" ); }) .next() .button({ text: false, icons: { primary: "ui-icon-triangle-1-s" } }) .click(function() { var menu = $( this ).parent().next().show().position({ my: "left top", at: "left bottom", of: this }); $( document ).one( "click", function() { menu.hide(); }); return false; }).parent() .buttonset() .next() .hide() .menu(); </pre> </section> <!-- end button with icon --> </div> </div> </div> <!-- Footer ================================================== --> <footer class="bs-footer"> <div class="container"> <div class="row"> <div class="col-lg-3 col-sm-3"> <h3><span class="icon-envelope"></span> Contact</h3> <ul class="icons"> <li><i class="icon-link"></i> Blog: <a class="targetblank" href="http://addyosmani.com/blog/">Addy Osmani</a></li> <li><i class="icon-twitter"></i> Twitter: <a class="targetblank" href="https://twitter.com/addyosmani">@addyosmani</a></li> <li><i class="icon-github"></i> Github: <a class="targetblank" href="https://github.com/addyosmani/jquery-ui-bootstrap/issues?state=open">Issues</a></li> </ul> </div> <div class="col-lg-4 col-sm-4"> <h3><span class="icon-group"></span> Team</h3> <ul class="list-unstyled"> <li>Lead Product Developer : <a class="targetblank" href="http://addyosmani.com/blog/" hreflang="en">Addy Osmani</a></li> <li>Chief Maintainer : <a class="targetblank" href="http://blog.aurelien-gerits.be" hreflang="fr">Aurélien Gérits</a></li> </ul> </div> <div class="col-lg-5 col-sm-5"> <h3><span class="icon-lightbulb"></span> Credits</h3> <ul class="list-unstyled"> <li>jQuery UI Bootstrap © <strong class="text-info">Addy Osmani</strong> 2012 - 2013.</li> <li>Bootstrap © <strong class="text-info">Twitter, Inc.</strong> 2012 - 2013</li> </ul> </div> </div> </div> </footer> <!-- Placed at the end of the document so the pages load faster --> <script src="assets/js/vendor/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="assets/js/vendor/jquery-migrate-1.2.1.min.js" type="text/javascript"></script> <script src="assets/js/vendor/bootstrap.js" type="text/javascript"></script> <script src="assets/js/vendor/holder.js" type="text/javascript"></script> <script src="assets/js/vendor/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script> <script src="assets/js/google-code-prettify/prettify.js" type="text/javascript"></script> <script src="assets/js/docs.js" type="text/javascript"></script> <!-- FileInput --> <script src="third-party/jQuery-UI-FileInput/js/enhance.min.js" type="text/javascript"></script> <script src="third-party/jQuery-UI-FileInput/js/fileinput.jquery.js" type="text/javascript"></script> <!-- End FileInput --> <!--wijmo--> <script src="third-party/wijmo/jquery.mousewheel.min.js" type="text/javascript"></script> <script src="third-party/wijmo/jquery.wijmo-open.1.5.0.min.js" type="text/javascript"></script> <!--End wijmo--> <!--jqGrid--> <script src="third-party/jqGrid/jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="third-party/jqGrid/jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script> <!--end jqGrid--> <script src="assets/js/demo-extra.js" type="text/javascript"></script> </body> </html>