439 lines
18 KiB
HTML
Executable File
439 lines
18 KiB
HTML
Executable File
<!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 Twitter 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>Twitter Bootstrap © <strong class="text-info">Twitter</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> |