First Initial
This commit is contained in:
Nakorn Rientrakrunchai
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2013 - Vincent Gabriel & Jason Gill
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
@@ -0,0 +1,262 @@
|
||||
Twitter Bootstrap Wizard
|
||||
============================
|
||||
|
||||
This Twitter Bootstrap plugin builds a wizard using a formatted tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.
|
||||
|
||||
##### Note
|
||||
We will not longer be updating the bower version of bootstrap wizard or any other package manager. See <a href="https://github.com/VinceG/twitter-bootstrap-wizard/issues/81#issuecomment-42909528">#81</a> for the reason why. Please use 'master' branch instead.
|
||||
|
||||
<a href="http://vadimg.com/twitter-bootstrap-wizard-example/" target="_blank">Website & Demo</a>
|
||||
|
||||
<a href='https://twitter.com/gabrielva' target='_blank'>Follow @gabrielva</a>
|
||||
|
||||
Requirements
|
||||
-------------
|
||||
|
||||
* Requires jQuery v1.3.2 or later
|
||||
* Bootstrap 2.2.x, 2.3.x, 3.0
|
||||
|
||||
Code Examples
|
||||
-------------
|
||||
|
||||
```javascript
|
||||
//basic wizard
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard();
|
||||
});
|
||||
```
|
||||
|
||||
```javascript
|
||||
//wizard with options and events
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({
|
||||
tabClass: 'nav nav-pills',
|
||||
onNext: function(tab, navigation, index) {
|
||||
alert('next');
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
```javascript
|
||||
//calling a method
|
||||
$('#rootwizard').bootstrapWizard('show',3);
|
||||
```
|
||||
|
||||
Options
|
||||
-------
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>tabClass</td>
|
||||
<td>'nav nav-pills'</td>
|
||||
<td>ul navigation class</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>nextSelector</td>
|
||||
<td>'.wizard li.next'</td>
|
||||
<td>next element selector</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>previousSelector</td>
|
||||
<td>'.wizard li.previous'</td>
|
||||
<td>previous element selector</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>firstSelector</td>
|
||||
<td>'.wizard li.first'</td>
|
||||
<td>first element selector</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lastSelector</td>
|
||||
<td>'.wizard li.last'</td>
|
||||
<td>last element selector</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>backSelector</td>
|
||||
<td>'.wizard li.back'</td>
|
||||
<td>back element selector</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>finishSelector</td>
|
||||
<td>'.wizard li.finish'</td>
|
||||
<td>finish element selector</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Events
|
||||
------
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>onInit</td>
|
||||
<td>Fired when plugin is initialized</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onShow</td>
|
||||
<td>Fired when plugin data is shown</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onNext</td>
|
||||
<td>Fired when next button is clicked (return false to disable moving to the next step)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onPrevious</td>
|
||||
<td>Fired when previous button is clicked (return false to disable moving to the previous step)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onFirst</td>
|
||||
<td>Fired when first button is clicked (return false to disable moving to the first step)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onLast</td>
|
||||
<td>Fired when last button is clicked (return false to disable moving to the last step)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onBack</td>
|
||||
<td>Fired when back button is clicked (return false to disable moving backwards in navigation history)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onFinish</td>
|
||||
<td>Fired when finish button is clicked (return value is irrelevant)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onTabChange</td>
|
||||
<td>Fired when a tab is changed (return false to disable moving to that tab and showing its contents)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onTabClick</td>
|
||||
<td>Fired when a tab is clicked (return false to disable moving to that tab and showing its contents)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onTabShow</td>
|
||||
<td>Fired when a tab content is shown (return false to disable showing that tab content)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Methods
|
||||
-------
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Parameters</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>next</td>
|
||||
<td></td>
|
||||
<td>Moves to the next tab</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>previous</td>
|
||||
<td></td>
|
||||
<td>Moves to the previous tab</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>first</td>
|
||||
<td></td>
|
||||
<td>Jumps to the first tab</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>last</td>
|
||||
<td></td>
|
||||
<td>Jumps to the last tab</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>back</td>
|
||||
<td></td>
|
||||
<td>Moves back in navigation history by jumping to the former tab</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>finish</td>
|
||||
<td></td>
|
||||
<td>"Finishes" the wizard by calling onFinish callback</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>zero based index or tab target id</td>
|
||||
<td>Jumps to the specified tab</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>currentIndex</td>
|
||||
<td></td>
|
||||
<td>Returns the zero based index number for the current tab</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>navigationLength</td>
|
||||
<td></td>
|
||||
<td>Returns the number of tabs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>enable</td>
|
||||
<td>zero based index</td>
|
||||
<td>Enables a tab, allows a user to click it (removes .disabled if the item has that class)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disable</td>
|
||||
<td>zero based index</td>
|
||||
<td>Disables a tab, disallows a user to click it (adds .disabled to the li element)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>display</td>
|
||||
<td>zero based index</td>
|
||||
<td>Displays the li element if it was previously hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide</td>
|
||||
<td>zero based index</td>
|
||||
<td>Hides the li element (will not remove it from the DOM)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>remove</td>
|
||||
<td>zero based index, optinal bool remove tab-pane element or not false by default</td>
|
||||
<td>Removes the li element from the DOM if second argument is true will also remove the tab-pane element</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>© <a href='http://vadimg.com' target="_blank">Vadim Vincent Gabriel</a> <a href='https://twitter.com/gabrielva' target='_blank'>Follow @gabrielva</a> 2012</p>
|
||||
|
||||
License
|
||||
===============
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2013 - Vincent Gabriel & Jason Gill
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
|
||||
|
||||
1109
wwwroot/BackendScript/assets/twitter-bootstrap-wizard-master/bootstrap/css/bootstrap-responsive.css
vendored
Normal file
1109
wwwroot/BackendScript/assets/twitter-bootstrap-wizard-master/bootstrap/css/bootstrap-responsive.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
6167
wwwroot/BackendScript/assets/twitter-bootstrap-wizard-master/bootstrap/css/bootstrap.css
vendored
Normal file
6167
wwwroot/BackendScript/assets/twitter-bootstrap-wizard-master/bootstrap/css/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
9
wwwroot/BackendScript/assets/twitter-bootstrap-wizard-master/bootstrap/css/bootstrap.min.css
vendored
Normal file
9
wwwroot/BackendScript/assets/twitter-bootstrap-wizard-master/bootstrap/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
2280
wwwroot/BackendScript/assets/twitter-bootstrap-wizard-master/bootstrap/js/bootstrap.js
vendored
Normal file
2280
wwwroot/BackendScript/assets/twitter-bootstrap-wizard-master/bootstrap/js/bootstrap.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
6
wwwroot/BackendScript/assets/twitter-bootstrap-wizard-master/bootstrap/js/bootstrap.min.js
vendored
Normal file
6
wwwroot/BackendScript/assets/twitter-bootstrap-wizard-master/bootstrap/js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "twitter-bootstrap-wizard",
|
||||
"version": "1.2",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"examples",
|
||||
"README.md",
|
||||
"*.txt",
|
||||
"*.html",
|
||||
"prettify.js",
|
||||
"prettify.css",
|
||||
"bower.json",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"main": [
|
||||
"jquery.bootstrap.wizard.min.js"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">=1.9.1",
|
||||
"bootstrap": ">=2.3.0"
|
||||
},
|
||||
"homepage": "https://github.com/VinceG/twitter-bootstrap-wizard",
|
||||
"authors": [
|
||||
"Vincent Gabriel <vadimg88@gmail.com>"
|
||||
],
|
||||
"description": "This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.",
|
||||
"keywords": [
|
||||
"twitter",
|
||||
"bootstrap",
|
||||
"wizard"
|
||||
],
|
||||
"license": "MIT"
|
||||
}
|
||||
@@ -0,0 +1,214 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Basic Custom Example</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- custom styles -->
|
||||
<link href="custom.css" rel="stylesheet">
|
||||
<link href="../prettify.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
|
||||
<div class="span12">
|
||||
<section id="wizard">
|
||||
<div class="page-header">
|
||||
<h1>Basic Custom Wizard</h1>
|
||||
</div>
|
||||
|
||||
<div id="rootwizard">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab"><span class="label">1</span> First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab"><span class="label">2</span> Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab"><span class="label">3</span> Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab"><span class="label">4</span> Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab"><span class="label">5</span> Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab"><span class="label">6</span> Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab"><span class="label">7</span> Seventh</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="rootwizard">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab"><span class="label">1</span> First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab"><span class="label">2</span> Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab"><span class="label">3</span> Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab"><span class="label">4</span> Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab"><span class="label">5</span> Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab"><span class="label">6</span> Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab"><span class="label">7</span> Seventh</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>JS</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({'tabClass': 'bwizard-steps'});
|
||||
});
|
||||
</pre>
|
||||
|
||||
<h3>CSS</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
.bwizard-steps {
|
||||
display: inline-block;
|
||||
margin: 0; padding: 0;
|
||||
background: #fff }
|
||||
.bwizard-steps .active {
|
||||
color: #fff;
|
||||
background: #007ACC }
|
||||
.bwizard-steps .active:after {
|
||||
border-left-color: #007ACC }
|
||||
.bwizard-steps .active a {
|
||||
color: #fff;
|
||||
cursor: default }
|
||||
.bwizard-steps .label {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
margin: 0 5px 0 0; padding: 1px 5px 2px }
|
||||
.bwizard-steps .active .label {
|
||||
background-color: #333;}
|
||||
.bwizard-steps li {
|
||||
display: inline-block; position: relative;
|
||||
margin-right: 5px;
|
||||
padding: 12px 17px 10px 30px;
|
||||
*display: inline;
|
||||
*padding-left: 17px;
|
||||
background: #efefef;
|
||||
line-height: 18px;
|
||||
list-style: none;
|
||||
zoom: 1; }
|
||||
.bwizard-steps li:first-child {
|
||||
padding-left: 12px;
|
||||
-moz-border-radius: 4px 0 0 4px;
|
||||
-webkit-border-radius: 4px 0 0 4px;
|
||||
border-radius: 4px 0 0 4px; }
|
||||
.bwizard-steps li:first-child:before {
|
||||
border: none }
|
||||
.bwizard-steps li:last-child {
|
||||
margin-right: 0;
|
||||
-moz-border-radius: 0 4px 4px 0;
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0; }
|
||||
.bwizard-steps li:last-child:after {
|
||||
border: none }
|
||||
.bwizard-steps li:before {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
height: 0; width: 0;
|
||||
border-bottom: 20px inset transparent;
|
||||
border-left: 20px solid #fff;
|
||||
border-top: 20px inset transparent;
|
||||
content: "" }
|
||||
.bwizard-steps li:after {
|
||||
position: absolute;
|
||||
right: -20px; top: 0;
|
||||
height: 0; width: 0;
|
||||
border-bottom: 20px inset transparent;
|
||||
border-left: 20px solid #efefef;
|
||||
border-top: 20px inset transparent;
|
||||
content: "";
|
||||
z-index: 2; }
|
||||
.bwizard-steps a {
|
||||
color: #333 }
|
||||
.bwizard-steps a:hover {
|
||||
text-decoration: none }
|
||||
.bwizard-steps.clickable li:not(.active) {
|
||||
cursor: pointer }
|
||||
.bwizard-steps.clickable li:hover:not(.active) {
|
||||
background: #ccc }
|
||||
.bwizard-steps.clickable li:hover:not(.active):after {
|
||||
border-left-color: #ccc }
|
||||
.bwizard-steps.clickable li:hover:not(.active) a {
|
||||
color: #08c }
|
||||
@media (max-width: 480px) {
|
||||
/* badges only on small screens */
|
||||
.bwizard-steps li:after,
|
||||
.bwizard-steps li:before {
|
||||
border: none }
|
||||
.bwizard-steps li,
|
||||
.bwizard-steps li.active,
|
||||
.bwizard-steps li:first-child,
|
||||
.bwizard-steps li:last-child {
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
background-color: transparent }
|
||||
}
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../jquery.bootstrap.wizard.js"></script>
|
||||
<script src="../prettify.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({'tabClass': 'bwizard-steps'});
|
||||
window.prettyPrint && prettyPrint()
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Wizard With Custom Tabs Example</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../prettify.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
|
||||
<div class="span12">
|
||||
<section id="wizard">
|
||||
<div class="page-header">
|
||||
<h1>Wizard With Custom Tabs Example</h1>
|
||||
</div>
|
||||
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<div style="float:right">
|
||||
<input type='button' class='btn button-next' name='next' value='Next' />
|
||||
</div>
|
||||
<div style="float:left">
|
||||
<input type='button' class='btn button-previous' name='previous' value='Previous' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<div style="float:right">
|
||||
<input type='button' class='btn button-next' name='next' value='Next' />
|
||||
</div>
|
||||
<div style="float:left">
|
||||
<input type='button' class='btn button-previous' name='previous' value='Previous' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>JS</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({'nextSelector': '.button-next', 'previousSelector': '.button-previous'});
|
||||
});
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../jquery.bootstrap.wizard.js"></script>
|
||||
<script src="../prettify.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({'nextSelector': '.button-next', 'previousSelector': '.button-previous'});
|
||||
window.prettyPrint && prettyPrint()
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Wizard With Custom Next/Previous Buttons & First and Last buttons</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../prettify.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
|
||||
<div class="span12">
|
||||
<section id="wizard">
|
||||
<div class="page-header">
|
||||
<h1>Wizard With Custom Next/Previous Buttons & First and Last buttons</h1>
|
||||
</div>
|
||||
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<div style="float:right">
|
||||
<input type='button' class='btn button-next' name='next' value='Next' />
|
||||
<input type='button' class='btn button-last' name='last' value='Last' />
|
||||
</div>
|
||||
<div style="float:left">
|
||||
<input type='button' class='btn button-first' name='first' value='First' />
|
||||
<input type='button' class='btn button-previous' name='previous' value='Previous' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<div style="float:right">
|
||||
<input type='button' class='btn button-next' name='next' value='Next' />
|
||||
<input type='button' class='btn button-last' name='last' value='Last' />
|
||||
</div>
|
||||
<div style="float:left">
|
||||
<input type='button' class='btn button-first' name='first' value='First' />
|
||||
<input type='button' class='btn button-previous' name='previous' value='Previous' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>JS</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({'nextSelector': '.button-next', 'previousSelector': '.button-previous', 'firstSelector': '.button-first', 'lastSelector': '.button-last'});
|
||||
});
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../jquery.bootstrap.wizard.js"></script>
|
||||
<script src="../prettify.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({'nextSelector': '.button-next', 'previousSelector': '.button-previous', 'firstSelector': '.button-first', 'lastSelector': '.button-last'});
|
||||
window.prettyPrint && prettyPrint()
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Wizard With Disabled Tab Click</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../prettify.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
|
||||
<div class="span12">
|
||||
<section id="wizard">
|
||||
<div class="page-header">
|
||||
<h1>Wizard With Disabled Tab Click</h1>
|
||||
</div>
|
||||
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>JS</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({onTabClick: function(tab, navigation, index) {
|
||||
alert('on tab click disabled');
|
||||
return false;
|
||||
}});
|
||||
});
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../jquery.bootstrap.wizard.js"></script>
|
||||
<script src="../prettify.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({onTabClick: function(tab, navigation, index) {
|
||||
alert('on tab click disabled');
|
||||
return false;
|
||||
}});
|
||||
window.prettyPrint && prettyPrint()
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Wizard With Finish Button On last tab</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../prettify.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
|
||||
<div class="span12">
|
||||
<section id="wizard">
|
||||
<div class="page-header">
|
||||
<h1>Wizard With Finish Button On last tab</h1>
|
||||
<p>Auto-hide of Finish, Next, and Last buttons only when used with Bootstrap 3</p>
|
||||
</div>
|
||||
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first"><a href="javascript:;">First</a></li>
|
||||
<li class="previous"><a href="javascript:;">Previous</a></li>
|
||||
<li class="next last"><a href="javascript:;">Last</a></li>
|
||||
<li class="next"><a href="javascript:;">Next</a></li>
|
||||
<li class="finish"><a href="javascript:;">Finish</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first"><a href="javascript:;">First</a></li>
|
||||
<li class="previous"><a href="javascript:;">Previous</a></li>
|
||||
<li class="next last"><a href="javascript:;">Last</a></li>
|
||||
<li class="next"><a href="javascript:;">Next</a></li>
|
||||
<li class="finish"><a href="javascript:;">Finish</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>JS</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
|
||||
var $total = navigation.find('li').length;
|
||||
var $current = index+1;
|
||||
var $percent = ($current/$total) * 100;
|
||||
$('#rootwizard').find('.bar').css({width:$percent+'%'});
|
||||
}});
|
||||
$('#rootwizard .finish').click(function() {
|
||||
alert('Finished!, Starting over!');
|
||||
$('#rootwizard').find("a[href*='tab1']").trigger('click');
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../jquery.bootstrap.wizard.js"></script>
|
||||
<script src="../prettify.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
|
||||
var $total = navigation.find('li').length;
|
||||
var $current = index+1;
|
||||
var $percent = ($current/$total) * 100;
|
||||
$('#rootwizard').find('.bar').css({width:$percent+'%'});
|
||||
}});
|
||||
$('#rootwizard .finish').click(function() {
|
||||
alert('Finished!, Starting over!');
|
||||
$('#rootwizard').find("a[href*='tab1']").trigger('click');
|
||||
});
|
||||
window.prettyPrint && prettyPrint()
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Wizard With Form Validation</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../prettify.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
|
||||
<div class="span12">
|
||||
<section id="wizard">
|
||||
<div class="page-header">
|
||||
<h1>Wizard With Form Validation</h1>
|
||||
</div>
|
||||
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bar" class="progress progress-striped active">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
<p>
|
||||
<input type='text' name='name' id='name' placeholder='Enter Your Name'>
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bar" class="progress progress-striped active">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
<p>
|
||||
<input type='text' name='name' id='name' placeholder='Enter Your Name'>
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>JS</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({onNext: function(tab, navigation, index) {
|
||||
if(index==2) {
|
||||
// Make sure we entered the name
|
||||
if(!$('#name').val()) {
|
||||
alert('You must enter your name');
|
||||
$('#name').focus();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Set the name for the next tab
|
||||
$('#tab3').html('Hello, ' + $('#name').val());
|
||||
|
||||
}, onTabShow: function(tab, navigation, index) {
|
||||
var $total = navigation.find('li').length;
|
||||
var $current = index+1;
|
||||
var $percent = ($current/$total) * 100;
|
||||
$('#rootwizard').find('.bar').css({width:$percent+'%'});
|
||||
}});
|
||||
});
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../jquery.bootstrap.wizard.js"></script>
|
||||
<script src="../prettify.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({onNext: function(tab, navigation, index) {
|
||||
if(index==2) {
|
||||
// Make sure we entered the name
|
||||
if(!$('#name').val()) {
|
||||
alert('You must enter your name');
|
||||
$('#name').focus();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Set the name for the next tab
|
||||
$('#tab3').html('Hello, ' + $('#name').val());
|
||||
|
||||
}, onTabShow: function(tab, navigation, index) {
|
||||
var $total = navigation.find('li').length;
|
||||
var $current = index+1;
|
||||
var $percent = ($current/$total) * 100;
|
||||
$('#rootwizard').find('.bar').css({width:$percent+'%'});
|
||||
}});
|
||||
window.prettyPrint && prettyPrint()
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Basic Inverse Example</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../prettify.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
|
||||
<div class="span12">
|
||||
<section id="wizard">
|
||||
<div class="page-header">
|
||||
<h1>Basic Inverse Wizard</h1>
|
||||
</div>
|
||||
|
||||
<div id="rootwizard">
|
||||
<div class="navbar navbar-inverse">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="rootwizard">
|
||||
<div class="navbar navbar-inverse">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>JS</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard();
|
||||
});
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../jquery.bootstrap.wizard.js"></script>
|
||||
<script src="../prettify.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard();
|
||||
window.prettyPrint && prettyPrint()
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Basic Pills Example</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../prettify.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
|
||||
<div class="span12">
|
||||
<section id="wizard">
|
||||
<div class="page-header">
|
||||
<h1>Basic Pills Wizard</h1>
|
||||
</div>
|
||||
|
||||
<div id="rootwizard">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="rootwizard">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>JS</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'});
|
||||
});
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../jquery.bootstrap.wizard.js"></script>
|
||||
<script src="../prettify.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'});
|
||||
window.prettyPrint && prettyPrint()
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,152 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Wizard With Progress Bar using events</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../prettify.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
|
||||
<div class="span12">
|
||||
<section id="wizard">
|
||||
<div class="page-header">
|
||||
<h1>Wizard With Progress Bar using events</h1>
|
||||
</div>
|
||||
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bar" class="progress progress-striped active">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bar" class="progress progress-striped active">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>JS</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
|
||||
var $total = navigation.find('li').length;
|
||||
var $current = index+1;
|
||||
var $percent = ($current/$total) * 100;
|
||||
$('#rootwizard').find('.bar').css({width:$percent+'%'});
|
||||
}});
|
||||
});
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../jquery.bootstrap.wizard.js"></script>
|
||||
<script src="../prettify.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
|
||||
var $total = navigation.find('li').length;
|
||||
var $current = index+1;
|
||||
var $percent = ($current/$total) * 100;
|
||||
$('#rootwizard').find('.bar').css({width:$percent+'%'});
|
||||
}});
|
||||
window.prettyPrint && prettyPrint()
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Basic Tabs Left Example</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../prettify.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
|
||||
<div class="span12">
|
||||
<section id="wizard">
|
||||
<div class="page-header">
|
||||
<h1>Basic Tabs Left Wizard</h1>
|
||||
</div>
|
||||
|
||||
<div id="rootwizard" class="tabbable tabs-left">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="rootwizard" class="tabbable tabs-left">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>JS</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-tabs'});
|
||||
});
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../jquery.bootstrap.wizard.js"></script>
|
||||
<script src="../prettify.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-tabs'});
|
||||
window.prettyPrint && prettyPrint()
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Basic Example</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../prettify.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
|
||||
<div class="span12">
|
||||
<section id="wizard">
|
||||
<div class="page-header">
|
||||
<h1>Basic Wizard</h1>
|
||||
</div>
|
||||
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>JS</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard();
|
||||
});
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../jquery.bootstrap.wizard.js"></script>
|
||||
<script src="../prettify.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard();
|
||||
window.prettyPrint && prettyPrint()
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,84 @@
|
||||
.bwizard-steps {
|
||||
display: inline-block;
|
||||
margin: 0; padding: 0;
|
||||
background: #fff }
|
||||
.bwizard-steps .active {
|
||||
color: #fff;
|
||||
background: #007ACC }
|
||||
.bwizard-steps .active:after {
|
||||
border-left-color: #007ACC }
|
||||
.bwizard-steps .active a {
|
||||
color: #fff;
|
||||
cursor: default }
|
||||
.bwizard-steps .label {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
margin: 0 5px 0 0; padding: 1px 5px 2px }
|
||||
.bwizard-steps .active .label {
|
||||
background-color: #333;}
|
||||
.bwizard-steps li {
|
||||
display: inline-block; position: relative;
|
||||
margin-right: 5px;
|
||||
padding: 12px 17px 10px 30px;
|
||||
*display: inline;
|
||||
*padding-left: 17px;
|
||||
background: #efefef;
|
||||
line-height: 18px;
|
||||
list-style: none;
|
||||
zoom: 1; }
|
||||
.bwizard-steps li:first-child {
|
||||
padding-left: 12px;
|
||||
-moz-border-radius: 4px 0 0 4px;
|
||||
-webkit-border-radius: 4px 0 0 4px;
|
||||
border-radius: 4px 0 0 4px; }
|
||||
.bwizard-steps li:first-child:before {
|
||||
border: none }
|
||||
.bwizard-steps li:last-child {
|
||||
margin-right: 0;
|
||||
-moz-border-radius: 0 4px 4px 0;
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0; }
|
||||
.bwizard-steps li:last-child:after {
|
||||
border: none }
|
||||
.bwizard-steps li:before {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
height: 0; width: 0;
|
||||
border-bottom: 20px inset transparent;
|
||||
border-left: 20px solid #fff;
|
||||
border-top: 20px inset transparent;
|
||||
content: "" }
|
||||
.bwizard-steps li:after {
|
||||
position: absolute;
|
||||
right: -20px; top: 0;
|
||||
height: 0; width: 0;
|
||||
border-bottom: 20px inset transparent;
|
||||
border-left: 20px solid #efefef;
|
||||
border-top: 20px inset transparent;
|
||||
content: "";
|
||||
z-index: 2; }
|
||||
.bwizard-steps a {
|
||||
color: #333 }
|
||||
.bwizard-steps a:hover {
|
||||
text-decoration: none }
|
||||
.bwizard-steps.clickable li:not(.active) {
|
||||
cursor: pointer }
|
||||
.bwizard-steps.clickable li:hover:not(.active) {
|
||||
background: #ccc }
|
||||
.bwizard-steps.clickable li:hover:not(.active):after {
|
||||
border-left-color: #ccc }
|
||||
.bwizard-steps.clickable li:hover:not(.active) a {
|
||||
color: #08c }
|
||||
@media (max-width: 480px) {
|
||||
/* badges only on small screens */
|
||||
.bwizard-steps li:after,
|
||||
.bwizard-steps li:before {
|
||||
border: none }
|
||||
.bwizard-steps li,
|
||||
.bwizard-steps li.active,
|
||||
.bwizard-steps li:first-child,
|
||||
.bwizard-steps li:last-child {
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
background-color: transparent }
|
||||
}
|
||||
@@ -0,0 +1,328 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Multiple Wizards</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../prettify.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
|
||||
<div class="span9">
|
||||
<section id="wizard">
|
||||
<div class="page-header">
|
||||
<h1>Multiple Wizards</h1>
|
||||
</div>
|
||||
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bar" class="progress progress-striped active">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
<p>I'm in Section 1.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
<p>Howdy, I'm in Section 2.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pills">
|
||||
<ul>
|
||||
<li><a href="#pills-tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#pills-tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#pills-tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#pills-tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#pills-tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#pills-tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#pills-tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
<div class="progress progress-danger progress-striped active">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="pills-tab1">
|
||||
<p>I'm in Section 1.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="pills-tab2">
|
||||
<p>Howdy, I'm in Section 2.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="pills-tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="pills-tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="pills-tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="pills-tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="pills-tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="inverse">
|
||||
<div class="navbar navbar-inverse">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#inverse-tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#inverse-tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#inverse-tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#inverse-tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#inverse-tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#inverse-tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#inverse-tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bar" class="progress progress-info progress-striped">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="inverse-tab1">
|
||||
<p>I'm in Section 1.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="inverse-tab2">
|
||||
<p>
|
||||
<input type='text' name='name' id='name' placeholder='Enter Your Name'>
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="inverse-tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="inverse-tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="inverse-tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="inverse-tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="inverse-tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tabsleft" class="tabbable tabs-left">
|
||||
<ul>
|
||||
<li><a href="#tabsleft-tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tabsleft-tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tabsleft-tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tabsleft-tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tabsleft-tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tabsleft-tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tabsleft-tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
<div class="progress progress-info progress-striped">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tabsleft-tab1">
|
||||
<p>I'm in Section 1.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="tabsleft-tab2">
|
||||
<p>Howdy, I'm in Section 2.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="tabsleft-tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tabsleft-tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tabsleft-tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tabsleft-tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tabsleft-tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first"><a href="javascript:;">First</a></li>
|
||||
<li class="previous"><a href="javascript:;">Previous</a></li>
|
||||
<li class="next last"><a href="javascript:;">Last</a></li>
|
||||
<li class="next"><a href="javascript:;">Next</a></li>
|
||||
<li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../jquery.bootstrap.wizard.js"></script>
|
||||
<script src="../prettify.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({'tabClass': 'nav', 'debug': false, onShow: function(tab, navigation, index) {
|
||||
console.log('onShow');
|
||||
}, onNext: function(tab, navigation, index) {
|
||||
console.log('onNext');
|
||||
}, onPrevious: function(tab, navigation, index) {
|
||||
console.log('onPrevious');
|
||||
}, onLast: function(tab, navigation, index) {
|
||||
console.log('onLast');
|
||||
}, onTabClick: function(tab, navigation, index) {
|
||||
console.log('onTabClick');
|
||||
alert('on tab click disabled');
|
||||
}, onTabShow: function(tab, navigation, index) {
|
||||
console.log('onTabShow');
|
||||
var $total = navigation.find('li').length;
|
||||
var $current = index+1;
|
||||
var $percent = ($current/$total) * 100;
|
||||
$('#rootwizard').find('.bar').css({width:$percent+'%'});
|
||||
}});
|
||||
|
||||
$('#pills').bootstrapWizard({'tabClass': 'nav nav-pills', 'debug': false, onShow: function(tab, navigation, index) {
|
||||
console.log('onShow');
|
||||
}, onNext: function(tab, navigation, index) {
|
||||
console.log('onNext');
|
||||
}, onPrevious: function(tab, navigation, index) {
|
||||
console.log('onPrevious');
|
||||
}, onLast: function(tab, navigation, index) {
|
||||
console.log('onLast');
|
||||
}, onTabClick: function(tab, navigation, index) {
|
||||
console.log('onTabClick');
|
||||
alert('on tab click disabled');
|
||||
}, onTabShow: function(tab, navigation, index) {
|
||||
console.log('onTabShow');
|
||||
var $total = navigation.find('li').length;
|
||||
var $current = index+1;
|
||||
var $percent = ($current/$total) * 100;
|
||||
$('#pills').find('.bar').css({width:$percent+'%'});
|
||||
}});
|
||||
|
||||
$('#tabsleft').bootstrapWizard({'tabClass': 'nav nav-tabs', 'debug': false, onShow: function(tab, navigation, index) {
|
||||
console.log('onShow');
|
||||
}, onNext: function(tab, navigation, index) {
|
||||
console.log('onNext');
|
||||
}, onPrevious: function(tab, navigation, index) {
|
||||
console.log('onPrevious');
|
||||
}, onLast: function(tab, navigation, index) {
|
||||
console.log('onLast');
|
||||
}, onTabClick: function(tab, navigation, index) {
|
||||
console.log('onTabClick');
|
||||
|
||||
}, onTabShow: function(tab, navigation, index) {
|
||||
console.log('onTabShow');
|
||||
var $total = navigation.find('li').length;
|
||||
var $current = index+1;
|
||||
var $percent = ($current/$total) * 100;
|
||||
$('#tabsleft').find('.bar').css({width:$percent+'%'});
|
||||
|
||||
// If it's the last tab then hide the last button and show the finish instead
|
||||
if($current >= $total) {
|
||||
$('#tabsleft').find('.pager .next').hide();
|
||||
$('#tabsleft').find('.pager .finish').show();
|
||||
$('#tabsleft').find('.pager .finish').removeClass('disabled');
|
||||
} else {
|
||||
$('#tabsleft').find('.pager .next').show();
|
||||
$('#tabsleft').find('.pager .finish').hide();
|
||||
}
|
||||
|
||||
}});
|
||||
|
||||
$('#inverse').bootstrapWizard({'tabClass': 'nav', 'debug': false, onShow: function(tab, navigation, index) {
|
||||
console.log('onShow');
|
||||
}, onNext: function(tab, navigation, index) {
|
||||
console.log('onNext');
|
||||
if(index==2) {
|
||||
// Make sure we entered the name
|
||||
if(!$('#name').val()) {
|
||||
alert('You must enter your name');
|
||||
$('#name').focus();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Set the name for the next tab
|
||||
$('#inverse-tab3').html('Hello, ' + $('#name').val());
|
||||
|
||||
}, onPrevious: function(tab, navigation, index) {
|
||||
console.log('onPrevious');
|
||||
}, onLast: function(tab, navigation, index) {
|
||||
console.log('onLast');
|
||||
}, onTabClick: function(tab, navigation, index) {
|
||||
console.log('onTabClick');
|
||||
alert('on tab click disabled');
|
||||
return false;
|
||||
}, onTabShow: function(tab, navigation, index) {
|
||||
console.log('onTabShow');
|
||||
var $total = navigation.find('li').length;
|
||||
var $current = index+1;
|
||||
var $percent = ($current/$total) * 100;
|
||||
$('#inverse').find('.bar').css({width:$percent+'%'});
|
||||
}});
|
||||
|
||||
|
||||
$('#tabsleft .finish').click(function() {
|
||||
alert('Finished!, Starting over!');
|
||||
$('#tabsleft').find("a[href*='tabsleft-tab1']").trigger('click');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,192 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Basic Example</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../prettify.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
|
||||
<div class="span12">
|
||||
<section id="wizard">
|
||||
<div class="page-header">
|
||||
<h1>Basic Wizard</h1>
|
||||
</div>
|
||||
|
||||
<div id="rootwizard">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span12">
|
||||
<input type='text' name='stepid' id='stepid' value='1' size='2' style='width:20px;' />
|
||||
<input type='button' class='btn' id='disable-step' value='Disable' />
|
||||
<input type='button' class='btn' id='enable-step' value='Enable' />
|
||||
<input type='button' class='btn' id='show-step' value='Show' />
|
||||
<input type='button' class='btn' id='hide-step' value='Hide' />
|
||||
<input type='button' class='btn' id='remove-step' value='Remove' />
|
||||
</div>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
<div id="rootwizard">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<input type='text' name='stepid' id='stepid' value='1' size='2' style='width:20px;' />
|
||||
<input type='button' class='btn' id='disable-step' value='Disable' />
|
||||
<input type='button' class='btn' id='enable-step' value='Enable' />
|
||||
<input type='button' class='btn' id='show-step' value='Show' />
|
||||
<input type='button' class='btn' id='hide-step' value='Hide' />
|
||||
<input type='button' class='btn' id='remove-step' value='Remove' />
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>JS</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'});
|
||||
|
||||
// Disable step
|
||||
$('#disable-step').on('click', function() {
|
||||
$('#rootwizard').bootstrapWizard('disable', $('#stepid').val());
|
||||
});
|
||||
|
||||
// Enable step
|
||||
$('#enable-step').on('click', function() {
|
||||
$('#rootwizard').bootstrapWizard('enable', $('#stepid').val());
|
||||
});
|
||||
|
||||
// Remove step
|
||||
$('#remove-step').on('click', function() {
|
||||
$('#rootwizard').bootstrapWizard('remove', $('#stepid').val(), true);
|
||||
});
|
||||
|
||||
// Show step
|
||||
$('#show-step').on('click', function() {
|
||||
$('#rootwizard').bootstrapWizard('display', $('#stepid').val());
|
||||
});
|
||||
|
||||
// Hide step
|
||||
$('#hide-step').on('click', function() {
|
||||
$('#rootwizard').bootstrapWizard('hide', $('#stepid').val());
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../jquery.bootstrap.wizard.js"></script>
|
||||
<script src="../prettify.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'});
|
||||
window.prettyPrint && prettyPrint();
|
||||
|
||||
// Disable step
|
||||
$('#disable-step').on('click', function() {
|
||||
$('#rootwizard').bootstrapWizard('disable', $('#stepid').val());
|
||||
});
|
||||
|
||||
// Enable step
|
||||
$('#enable-step').on('click', function() {
|
||||
$('#rootwizard').bootstrapWizard('enable', $('#stepid').val());
|
||||
});
|
||||
|
||||
// Remove step
|
||||
$('#remove-step').on('click', function() {
|
||||
$('#rootwizard').bootstrapWizard('remove', $('#stepid').val(), true);
|
||||
});
|
||||
|
||||
// Show step
|
||||
$('#show-step').on('click', function() {
|
||||
$('#rootwizard').bootstrapWizard('display', $('#stepid').val());
|
||||
});
|
||||
|
||||
// Hide step
|
||||
$('#hide-step').on('click', function() {
|
||||
$('#rootwizard').bootstrapWizard('hide', $('#stepid').val());
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Basic Pills Example</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../prettify.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
|
||||
<div class="span12">
|
||||
<section id="wizard">
|
||||
<div class="page-header">
|
||||
<h1>Basic Pills Wizard</h1>
|
||||
</div>
|
||||
<form id="commentForm" method="get" action="" class="form-horizontal">
|
||||
<div id="rootwizard">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="email">Email</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="emailfield" name="emailfield" class="required email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="name">Name</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="namefield" name="namefield" class="required">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="url">URL</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="urlfield" name="urlfield" class="required url">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
<form id="commentForm" method="get" action="" class="form-horizontal">
|
||||
<div id="rootwizard">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="email">Email</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="emailfield" name="emailfield" class="required email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="name">Name</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="namefield" name="namefield" class="required">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="url">URL</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="urlfield" name="urlfield" class="required url">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="#">First</a></li>
|
||||
<li class="previous"><a href="#">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="#">Last</a></li>
|
||||
<li class="next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>JS</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
$(document).ready(function() {
|
||||
var $validator = $("#commentForm").validate({
|
||||
rules: {
|
||||
emailfield: {
|
||||
required: true,
|
||||
email: true,
|
||||
minlength: 3
|
||||
},
|
||||
namefield: {
|
||||
required: true,
|
||||
minlength: 3
|
||||
},
|
||||
urlfield: {
|
||||
required: true,
|
||||
minlength: 3,
|
||||
url: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#rootwizard').bootstrapWizard({
|
||||
'tabClass': 'nav nav-pills',
|
||||
'onNext': function(tab, navigation, index) {
|
||||
var $valid = $("#commentForm").valid();
|
||||
if(!$valid) {
|
||||
$validator.focusInvalid();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
|
||||
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../jquery.bootstrap.wizard.js"></script>
|
||||
<script src="../prettify.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
var $validator = $("#commentForm").validate({
|
||||
rules: {
|
||||
emailfield: {
|
||||
required: true,
|
||||
email: true,
|
||||
minlength: 3
|
||||
},
|
||||
namefield: {
|
||||
required: true,
|
||||
minlength: 3
|
||||
},
|
||||
urlfield: {
|
||||
required: true,
|
||||
minlength: 3,
|
||||
url: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#rootwizard').bootstrapWizard({
|
||||
'tabClass': 'nav nav-pills',
|
||||
'onNext': function(tab, navigation, index) {
|
||||
var $valid = $("#commentForm").valid();
|
||||
if(!$valid) {
|
||||
$validator.focusInvalid();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
window.prettyPrint && prettyPrint()
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,246 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Twitter Bootstrap Wizard</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Twitter Bootstrap Wizard Plugin">
|
||||
<meta name="author" content="Vincent Gabriel">
|
||||
<!-- Bootstrap -->
|
||||
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style type="text/css">
|
||||
body {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
.sidebar-nav {
|
||||
padding: 9px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container-fluid">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Twitter Bootstrap Wizard</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<p class="navbar-text pull-right">
|
||||
<a href="http://twitter.com/gabrielva" class="navbar-link">@gabrielva</a>
|
||||
</p>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#examples">Examples</a></li>
|
||||
<li><a href="#docs">Documentation</a></li>
|
||||
<li><a href="#demo">Demo</a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div class="hero-unit">
|
||||
<h1>Twitter Bootstrap Wizard Plugin</h1>
|
||||
<p>This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.</p>
|
||||
<p><a class="btn btn-primary btn-large" href="https://github.com/VinceG/twitter-bootstrap-wizard" target="_blank">Fork It »</a></p>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<a name="examples"></a>
|
||||
<h2>Examples</h2>
|
||||
<p>Following are just a set of examples using this plugin.</p>
|
||||
<ul>
|
||||
<li><a href="examples/basic.html">Basic Usage</a></li>
|
||||
<li><a href="examples/basic-pills.html">Basic Pills Usage</a></li>
|
||||
<li><a href="examples/basic-inverse.html">Basic Inverse Usage</a></li>
|
||||
<li><a href="examples/basic-tabsleft.html">Basic Tabs Left Usage</a></li>
|
||||
<li><a href="examples/basic-custombuttons.html">Wizard With Custom Next/Previous Buttons</a></li>
|
||||
<li><a href="examples/basic-custombuttonsfirstlast.html">Wizard With Custom Next/Previous Buttons & First and Last buttons</a></li>
|
||||
<li><a href="examples/basic-progressbar.html">Wizard With Progress Bar using events</a></li>
|
||||
<li><a href="examples/basic-formvalidation.html">Wizard With Form Validation</a></li>
|
||||
<li><a href="examples/basic-disabletabclick.html">Wizard With Disabled Tab Click</a></li>
|
||||
<li><a href="examples/basic-finishbutton.html">Wizard With Finish Button On last tab</a></li>
|
||||
<li><a href="examples/multiple.html">Multiple Wizards</a></li>
|
||||
<li><a href="examples/remove-step.html">Disabling/Enabling/Showing/Hiding/Removing Steps</a></li>
|
||||
<li><a href="examples/validation.html">jQuery Validation Plugin With Step Validation</a></li>
|
||||
</ul>
|
||||
</div><!--/span-->
|
||||
|
||||
|
||||
<div class="span11">
|
||||
<a name="docs"></a>
|
||||
<h2>Documentation</h2>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>tabClass</td>
|
||||
<td>nav nav-pills</td>
|
||||
<td>ul navigation class</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>nextSelector</td>
|
||||
<td>.wizard li.next</td>
|
||||
<td>next element selector</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>previousSelector</td>
|
||||
<td>.wizard li.previous</td>
|
||||
<td>previous element selector</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>firstSelector</td>
|
||||
<td>.wizard li.first</td>
|
||||
<td>first element selector</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lastSelector</td>
|
||||
<td>.wizard li.last</td>
|
||||
<td>last element selector</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onInit</td>
|
||||
<td>null</td>
|
||||
<td>Fired when plugin is initialized</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onShow</td>
|
||||
<td>null</td>
|
||||
<td>Fired when plugin data is shown</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onNext</td>
|
||||
<td>null</td>
|
||||
<td>Fired when next button is clicked (return false to disable moving to the next step)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onPrevious</td>
|
||||
<td>null</td>
|
||||
<td>Fired when previous button is clicked (return false to disable moving to the previous step)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onFirst</td>
|
||||
<td>null</td>
|
||||
<td>Fired when first button is clicked (return false to disable moving to the first step)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onLast</td>
|
||||
<td>null</td>
|
||||
<td>Fired when last button is clicked (return false to disable moving to the last step)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onTabClick</td>
|
||||
<td>null</td>
|
||||
<td>Fired when a tab is clicked (return false to disable moving to that tab and showing it's contents)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onTabShow</td>
|
||||
<td>null</td>
|
||||
<td>Fired when a tab content is shown (return false to disable showing that tab content)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!--/span-->
|
||||
|
||||
<div class="span11">
|
||||
<a name="demo"></a>
|
||||
<h2>Demo</h2>
|
||||
<p>Basic Demo Example.</p>
|
||||
<div id="rootwizard">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#tab1" data-toggle="tab">First</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Second</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Third</a></li>
|
||||
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
|
||||
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
|
||||
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
|
||||
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bar" class="progress progress-striped active">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane" id="tab1">
|
||||
1
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
2
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
3
|
||||
</div>
|
||||
<div class="tab-pane" id="tab4">
|
||||
4
|
||||
</div>
|
||||
<div class="tab-pane" id="tab5">
|
||||
5
|
||||
</div>
|
||||
<div class="tab-pane" id="tab6">
|
||||
6
|
||||
</div>
|
||||
<div class="tab-pane" id="tab7">
|
||||
7
|
||||
</div>
|
||||
<ul class="pager wizard">
|
||||
<li class="previous first" style="display:none;"><a href="javascript:;">First</a></li>
|
||||
<li class="previous"><a href="javascript:;">Previous</a></li>
|
||||
<li class="next last" style="display:none;"><a href="javascript:;">Last</a></li>
|
||||
<li class="next"><a href="javascript:;">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
|
||||
</div><!--/row-->
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<footer>
|
||||
<p>© <a href='http://vadimg.com' target="_blank">Vadim Vincent Gabriel</a> 2012</p>
|
||||
</footer>
|
||||
|
||||
</div><!--/.fluid-container-->
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="jquery.bootstrap.wizard.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
|
||||
var $total = navigation.find('li').length;
|
||||
var $current = index+1;
|
||||
var $percent = ($current/$total) * 100;
|
||||
$('#rootwizard').find('.bar').css({width:$percent+'%'});
|
||||
}});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,331 @@
|
||||
/*!
|
||||
* jQuery twitter bootstrap wizard plugin
|
||||
* Examples and documentation at: http://github.com/VinceG/twitter-bootstrap-wizard
|
||||
* version 1.0
|
||||
* Requires jQuery v1.3.2 or later
|
||||
* Supports Bootstrap 2.2.x, 2.3.x, 3.0
|
||||
* Dual licensed under the MIT and GPL licenses:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
* Authors: Vadim Vincent Gabriel (http://vadimg.com), Jason Gill (www.gilluminate.com)
|
||||
*/
|
||||
;(function($) {
|
||||
var bootstrapWizardCreate = function(element, options) {
|
||||
var element = $(element);
|
||||
var obj = this;
|
||||
|
||||
// selector skips any 'li' elements that do not contain a child with a tab data-toggle
|
||||
var baseItemSelector = 'li:has([data-toggle="tab"])';
|
||||
var historyStack = [];
|
||||
|
||||
// Merge options with defaults
|
||||
var $settings = $.extend({}, $.fn.bootstrapWizard.defaults, options);
|
||||
var $activeTab = null;
|
||||
var $navigation = null;
|
||||
|
||||
this.rebindClick = function(selector, fn)
|
||||
{
|
||||
selector.unbind('click', fn).bind('click', fn);
|
||||
}
|
||||
|
||||
this.fixNavigationButtons = function() {
|
||||
// Get the current active tab
|
||||
if(!$activeTab.length) {
|
||||
// Select first one
|
||||
$navigation.find('a:first').tab('show');
|
||||
$activeTab = $navigation.find(baseItemSelector + ':first');
|
||||
}
|
||||
|
||||
// See if we're currently in the first/last then disable the previous and last buttons
|
||||
$($settings.previousSelector, element).toggleClass('disabled', (obj.firstIndex() >= obj.currentIndex()));
|
||||
$($settings.nextSelector, element).toggleClass('disabled', (obj.currentIndex() >= obj.navigationLength()));
|
||||
$($settings.nextSelector, element).toggleClass('hidden', (obj.currentIndex() >= obj.navigationLength() && $($settings.finishSelector, element).length > 0));
|
||||
$($settings.lastSelector, element).toggleClass('hidden', (obj.currentIndex() >= obj.navigationLength() && $($settings.finishSelector, element).length > 0));
|
||||
$($settings.finishSelector, element).toggleClass('hidden', (obj.currentIndex() < obj.navigationLength()));
|
||||
$($settings.backSelector, element).toggleClass('disabled', (historyStack.length == 0));
|
||||
$($settings.backSelector, element).toggleClass('hidden', (obj.currentIndex() >= obj.navigationLength() && $($settings.finishSelector, element).length > 0));
|
||||
|
||||
// We are unbinding and rebinding to ensure single firing and no double-click errors
|
||||
obj.rebindClick($($settings.nextSelector, element), obj.next);
|
||||
obj.rebindClick($($settings.previousSelector, element), obj.previous);
|
||||
obj.rebindClick($($settings.lastSelector, element), obj.last);
|
||||
obj.rebindClick($($settings.firstSelector, element), obj.first);
|
||||
obj.rebindClick($($settings.finishSelector, element), obj.finish);
|
||||
obj.rebindClick($($settings.backSelector, element), obj.back);
|
||||
|
||||
if($settings.onTabShow && typeof $settings.onTabShow === 'function' && $settings.onTabShow($activeTab, $navigation, obj.currentIndex())===false){
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
this.next = function(e) {
|
||||
// If we clicked the last then dont activate this
|
||||
if(element.hasClass('last')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if($settings.onNext && typeof $settings.onNext === 'function' && $settings.onNext($activeTab, $navigation, obj.nextIndex())===false){
|
||||
return false;
|
||||
}
|
||||
|
||||
var formerIndex = obj.currentIndex();
|
||||
$index = obj.nextIndex();
|
||||
|
||||
// Did we click the last button
|
||||
if($index > obj.navigationLength()) {
|
||||
} else {
|
||||
historyStack.push(formerIndex);
|
||||
$navigation.find(baseItemSelector + ':eq(' + $index + ') a').tab('show');
|
||||
}
|
||||
};
|
||||
|
||||
this.previous = function(e) {
|
||||
// If we clicked the first then dont activate this
|
||||
if(element.hasClass('first')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if($settings.onPrevious && typeof $settings.onPrevious === 'function' && $settings.onPrevious($activeTab, $navigation, obj.previousIndex())===false){
|
||||
return false;
|
||||
}
|
||||
|
||||
var formerIndex = obj.currentIndex();
|
||||
$index = obj.previousIndex();
|
||||
|
||||
if($index < 0) {
|
||||
} else {
|
||||
historyStack.push(formerIndex);
|
||||
$navigation.find(baseItemSelector + ':eq(' + $index + ') a').tab('show');
|
||||
}
|
||||
};
|
||||
|
||||
this.first = function (e) {
|
||||
if($settings.onFirst && typeof $settings.onFirst === 'function' && $settings.onFirst($activeTab, $navigation, obj.firstIndex())===false){
|
||||
return false;
|
||||
}
|
||||
|
||||
// If the element is disabled then we won't do anything
|
||||
if(element.hasClass('disabled')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
historyStack.push(obj.currentIndex());
|
||||
$navigation.find(baseItemSelector + ':eq(0) a').tab('show');
|
||||
};
|
||||
|
||||
this.last = function(e) {
|
||||
if($settings.onLast && typeof $settings.onLast === 'function' && $settings.onLast($activeTab, $navigation, obj.lastIndex())===false){
|
||||
return false;
|
||||
}
|
||||
|
||||
// If the element is disabled then we won't do anything
|
||||
if(element.hasClass('disabled')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
historyStack.push(obj.currentIndex());
|
||||
$navigation.find(baseItemSelector + ':eq(' + obj.navigationLength() + ') a').tab('show');
|
||||
};
|
||||
|
||||
this.finish = function (e) {
|
||||
if ($settings.onFinish && typeof $settings.onFinish === 'function') {
|
||||
$settings.onFinish($activeTab, $navigation, obj.lastIndex());
|
||||
}
|
||||
};
|
||||
|
||||
this.back = function () {
|
||||
if (historyStack.length == 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var formerIndex = historyStack.pop();
|
||||
if ($settings.onBack && typeof $settings.onBack === 'function' && $settings.onBack($activeTab, $navigation, formerIndex) === false) {
|
||||
historyStack.push(formerIndex);
|
||||
return false;
|
||||
}
|
||||
|
||||
element.find(baseItemSelector + ':eq(' + formerIndex + ') a').tab('show');
|
||||
};
|
||||
|
||||
this.currentIndex = function() {
|
||||
return $navigation.find(baseItemSelector).index($activeTab);
|
||||
};
|
||||
|
||||
this.firstIndex = function() {
|
||||
return 0;
|
||||
};
|
||||
|
||||
this.lastIndex = function() {
|
||||
return obj.navigationLength();
|
||||
};
|
||||
this.getIndex = function(e) {
|
||||
return $navigation.find(baseItemSelector).index(e);
|
||||
};
|
||||
this.nextIndex = function() {
|
||||
return $navigation.find(baseItemSelector).index($activeTab) + 1;
|
||||
};
|
||||
this.previousIndex = function() {
|
||||
return $navigation.find(baseItemSelector).index($activeTab) - 1;
|
||||
};
|
||||
this.navigationLength = function() {
|
||||
return $navigation.find(baseItemSelector).length - 1;
|
||||
};
|
||||
this.activeTab = function() {
|
||||
return $activeTab;
|
||||
};
|
||||
this.nextTab = function() {
|
||||
return $navigation.find(baseItemSelector + ':eq('+(obj.currentIndex()+1)+')').length ? $navigation.find(baseItemSelector + ':eq('+(obj.currentIndex()+1)+')') : null;
|
||||
};
|
||||
this.previousTab = function() {
|
||||
if(obj.currentIndex() <= 0) {
|
||||
return null;
|
||||
}
|
||||
return $navigation.find(baseItemSelector + ':eq('+parseInt(obj.currentIndex()-1)+')');
|
||||
};
|
||||
this.show = function(index) {
|
||||
var tabToShow = isNaN(index) ?
|
||||
element.find(baseItemSelector + ' a[href=#' + index + ']') :
|
||||
element.find(baseItemSelector + ':eq(' + index + ') a');
|
||||
if (tabToShow.length > 0) {
|
||||
historyStack.push(obj.currentIndex());
|
||||
tabToShow.tab('show');
|
||||
}
|
||||
};
|
||||
this.disable = function (index) {
|
||||
$navigation.find(baseItemSelector + ':eq('+index+')').addClass('disabled');
|
||||
};
|
||||
this.enable = function(index) {
|
||||
$navigation.find(baseItemSelector + ':eq('+index+')').removeClass('disabled');
|
||||
};
|
||||
this.hide = function(index) {
|
||||
$navigation.find(baseItemSelector + ':eq('+index+')').hide();
|
||||
};
|
||||
this.display = function(index) {
|
||||
$navigation.find(baseItemSelector + ':eq('+index+')').show();
|
||||
};
|
||||
this.remove = function(args) {
|
||||
var $index = args[0];
|
||||
var $removeTabPane = typeof args[1] != 'undefined' ? args[1] : false;
|
||||
var $item = $navigation.find(baseItemSelector + ':eq('+$index+')');
|
||||
|
||||
// Remove the tab pane first if needed
|
||||
if($removeTabPane) {
|
||||
var $href = $item.find('a').attr('href');
|
||||
$($href).remove();
|
||||
}
|
||||
|
||||
// Remove menu item
|
||||
$item.remove();
|
||||
};
|
||||
|
||||
var innerTabClick = function (e) {
|
||||
// Get the index of the clicked tab
|
||||
var $ul = $navigation.find(baseItemSelector);
|
||||
var clickedIndex = $ul.index($(e.currentTarget).parent(baseItemSelector));
|
||||
var $clickedTab = $( $ul[clickedIndex] );
|
||||
if($settings.onTabClick && typeof $settings.onTabClick === 'function' && $settings.onTabClick($activeTab, $navigation, obj.currentIndex(), clickedIndex, $clickedTab)===false){
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
var innerTabShown = function (e) { // use shown instead of show to help prevent double firing
|
||||
$element = $(e.target).parent();
|
||||
var nextTab = $navigation.find(baseItemSelector).index($element);
|
||||
|
||||
// If it's disabled then do not change
|
||||
if($element.hasClass('disabled')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if($settings.onTabChange && typeof $settings.onTabChange === 'function' && $settings.onTabChange($activeTab, $navigation, obj.currentIndex(), nextTab)===false){
|
||||
return false;
|
||||
}
|
||||
|
||||
$activeTab = $element; // activated tab
|
||||
obj.fixNavigationButtons();
|
||||
};
|
||||
|
||||
this.resetWizard = function() {
|
||||
|
||||
// remove the existing handlers
|
||||
$('a[data-toggle="tab"]', $navigation).off('click', innerTabClick);
|
||||
$('a[data-toggle="tab"]', $navigation).off('shown shown.bs.tab', innerTabShown);
|
||||
|
||||
// reset elements based on current state of the DOM
|
||||
$navigation = element.find('ul:first', element);
|
||||
$activeTab = $navigation.find(baseItemSelector + '.active', element);
|
||||
|
||||
// re-add handlers
|
||||
$('a[data-toggle="tab"]', $navigation).on('click', innerTabClick);
|
||||
$('a[data-toggle="tab"]', $navigation).on('shown shown.bs.tab', innerTabShown);
|
||||
|
||||
obj.fixNavigationButtons();
|
||||
};
|
||||
|
||||
$navigation = element.find('ul:first', element);
|
||||
$activeTab = $navigation.find(baseItemSelector + '.active', element);
|
||||
|
||||
if(!$navigation.hasClass($settings.tabClass)) {
|
||||
$navigation.addClass($settings.tabClass);
|
||||
}
|
||||
|
||||
// Load onInit
|
||||
if($settings.onInit && typeof $settings.onInit === 'function'){
|
||||
$settings.onInit($activeTab, $navigation, 0);
|
||||
}
|
||||
|
||||
// Load onShow
|
||||
if($settings.onShow && typeof $settings.onShow === 'function'){
|
||||
$settings.onShow($activeTab, $navigation, obj.nextIndex());
|
||||
}
|
||||
|
||||
$('a[data-toggle="tab"]', $navigation).on('click', innerTabClick);
|
||||
|
||||
// attach to both shown and shown.bs.tab to support Bootstrap versions 2.3.2 and 3.0.0
|
||||
$('a[data-toggle="tab"]', $navigation).on('shown shown.bs.tab', innerTabShown);
|
||||
};
|
||||
$.fn.bootstrapWizard = function(options) {
|
||||
//expose methods
|
||||
if (typeof options == 'string') {
|
||||
var args = Array.prototype.slice.call(arguments, 1)
|
||||
if(args.length === 1) {
|
||||
args.toString();
|
||||
}
|
||||
return this.data('bootstrapWizard')[options](args);
|
||||
}
|
||||
return this.each(function(index){
|
||||
var element = $(this);
|
||||
// Return early if this element already has a plugin instance
|
||||
if (element.data('bootstrapWizard')) return;
|
||||
// pass options to plugin constructor
|
||||
var wizard = new bootstrapWizardCreate(element, options);
|
||||
// Store plugin object in this element's data
|
||||
element.data('bootstrapWizard', wizard);
|
||||
// and then trigger initial change
|
||||
wizard.fixNavigationButtons();
|
||||
});
|
||||
};
|
||||
|
||||
// expose options
|
||||
$.fn.bootstrapWizard.defaults = {
|
||||
tabClass: 'nav nav-pills',
|
||||
nextSelector: '.wizard li.next',
|
||||
previousSelector: '.wizard li.previous',
|
||||
firstSelector: '.wizard li.first',
|
||||
lastSelector: '.wizard li.last',
|
||||
finishSelector: '.wizard li.finish',
|
||||
backSelector: '.wizard li.back',
|
||||
onShow: null,
|
||||
onInit: null,
|
||||
onNext: null,
|
||||
onPrevious: null,
|
||||
onLast: null,
|
||||
onFirst: null,
|
||||
onFinish: null,
|
||||
onBack: null,
|
||||
onTabChange: null,
|
||||
onTabClick: null,
|
||||
onTabShow: null
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
22
wwwroot/BackendScript/assets/twitter-bootstrap-wizard-master/jquery.bootstrap.wizard.min.js
vendored
Normal file
22
wwwroot/BackendScript/assets/twitter-bootstrap-wizard-master/jquery.bootstrap.wizard.min.js
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
/*!
|
||||
* jQuery twitter bootstrap wizard plugin
|
||||
* Examples and documentation at: http://github.com/VinceG/twitter-bootstrap-wizard
|
||||
* version 1.0
|
||||
* Requires jQuery v1.3.2 or later
|
||||
* Supports Bootstrap 2.2.x, 2.3.x, 3.0
|
||||
* Dual licensed under the MIT and GPL licenses:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
* Authors: Vadim Vincent Gabriel (http://vadimg.com), Jason Gill (www.gilluminate.com)
|
||||
*/
|
||||
(function(e){var n=function(d,k){d=e(d);var a=this,g=[],c=e.extend({},e.fn.bootstrapWizard.defaults,k),f=null,b=null;this.rebindClick=function(h,a){h.unbind("click",a).bind("click",a)};this.fixNavigationButtons=function(){f.length||(b.find("a:first").tab("show"),f=b.find('li:has([data-toggle="tab"]):first'));e(c.previousSelector,d).toggleClass("disabled",a.firstIndex()>=a.currentIndex());e(c.nextSelector,d).toggleClass("disabled",a.currentIndex()>=a.navigationLength());e(c.backSelector,d).toggleClass("disabled",
|
||||
0==g.length);a.rebindClick(e(c.nextSelector,d),a.next);a.rebindClick(e(c.previousSelector,d),a.previous);a.rebindClick(e(c.lastSelector,d),a.last);a.rebindClick(e(c.firstSelector,d),a.first);a.rebindClick(e(c.backSelector,d),a.back);if(c.onTabShow&&"function"===typeof c.onTabShow&&!1===c.onTabShow(f,b,a.currentIndex()))return!1};this.next=function(h){if(d.hasClass("last")||c.onNext&&"function"===typeof c.onNext&&!1===c.onNext(f,b,a.nextIndex()))return!1;h=a.currentIndex();$index=a.nextIndex();$index>
|
||||
a.navigationLength()||(g.push(h),b.find('li:has([data-toggle="tab"]):eq('+$index+") a").tab("show"))};this.previous=function(h){if(d.hasClass("first")||c.onPrevious&&"function"===typeof c.onPrevious&&!1===c.onPrevious(f,b,a.previousIndex()))return!1;h=a.currentIndex();$index=a.previousIndex();0>$index||(g.push(h),b.find('li:has([data-toggle="tab"]):eq('+$index+") a").tab("show"))};this.first=function(h){if(c.onFirst&&"function"===typeof c.onFirst&&!1===c.onFirst(f,b,a.firstIndex())||d.hasClass("disabled"))return!1;
|
||||
g.push(a.currentIndex());b.find('li:has([data-toggle="tab"]):eq(0) a').tab("show")};this.last=function(h){if(c.onLast&&"function"===typeof c.onLast&&!1===c.onLast(f,b,a.lastIndex())||d.hasClass("disabled"))return!1;g.push(a.currentIndex());b.find('li:has([data-toggle="tab"]):eq('+a.navigationLength()+") a").tab("show")};this.back=function(){if(0==g.length)return null;var a=g.pop();if(c.onBack&&"function"===typeof c.onBack&&!1===c.onBack(f,b,a))return g.push(a),!1;d.find('li:has([data-toggle="tab"]):eq('+
|
||||
a+") a").tab("show")};this.currentIndex=function(){return b.find('li:has([data-toggle="tab"])').index(f)};this.firstIndex=function(){return 0};this.lastIndex=function(){return a.navigationLength()};this.getIndex=function(a){return b.find('li:has([data-toggle="tab"])').index(a)};this.nextIndex=function(){return b.find('li:has([data-toggle="tab"])').index(f)+1};this.previousIndex=function(){return b.find('li:has([data-toggle="tab"])').index(f)-1};this.navigationLength=function(){return b.find('li:has([data-toggle="tab"])').length-
|
||||
1};this.activeTab=function(){return f};this.nextTab=function(){return b.find('li:has([data-toggle="tab"]):eq('+(a.currentIndex()+1)+")").length?b.find('li:has([data-toggle="tab"]):eq('+(a.currentIndex()+1)+")"):null};this.previousTab=function(){return 0>=a.currentIndex()?null:b.find('li:has([data-toggle="tab"]):eq('+parseInt(a.currentIndex()-1)+")")};this.show=function(b){b=isNaN(b)?d.find('li:has([data-toggle="tab"]) a[href=#'+b+"]"):d.find('li:has([data-toggle="tab"]):eq('+b+") a");0<b.length&&
|
||||
(g.push(a.currentIndex()),b.tab("show"))};this.disable=function(a){b.find('li:has([data-toggle="tab"]):eq('+a+")").addClass("disabled")};this.enable=function(a){b.find('li:has([data-toggle="tab"]):eq('+a+")").removeClass("disabled")};this.hide=function(a){b.find('li:has([data-toggle="tab"]):eq('+a+")").hide()};this.display=function(a){b.find('li:has([data-toggle="tab"]):eq('+a+")").show()};this.remove=function(a){var c="undefined"!=typeof a[1]?a[1]:!1;a=b.find('li:has([data-toggle="tab"]):eq('+a[0]+
|
||||
")");c&&(c=a.find("a").attr("href"),e(c).remove());a.remove()};var l=function(d){var g=b.find('li:has([data-toggle="tab"])');d=g.index(e(d.currentTarget).parent('li:has([data-toggle="tab"])'));g=e(g[d]);if(c.onTabClick&&"function"===typeof c.onTabClick&&!1===c.onTabClick(f,b,a.currentIndex(),d,g))return!1},m=function(d){$element=e(d.target).parent();d=b.find('li:has([data-toggle="tab"])').index($element);if($element.hasClass("disabled")||c.onTabChange&&"function"===typeof c.onTabChange&&!1===c.onTabChange(f,
|
||||
b,a.currentIndex(),d))return!1;f=$element;a.fixNavigationButtons()};this.resetWizard=function(){e('a[data-toggle="tab"]',b).off("click",l);e('a[data-toggle="tab"]',b).off("shown shown.bs.tab",m);b=d.find("ul:first",d);f=b.find('li:has([data-toggle="tab"]).active',d);e('a[data-toggle="tab"]',b).on("click",l);e('a[data-toggle="tab"]',b).on("shown shown.bs.tab",m);a.fixNavigationButtons()};b=d.find("ul:first",d);f=b.find('li:has([data-toggle="tab"]).active',d);b.hasClass(c.tabClass)||b.addClass(c.tabClass);
|
||||
if(c.onInit&&"function"===typeof c.onInit)c.onInit(f,b,0);if(c.onShow&&"function"===typeof c.onShow)c.onShow(f,b,a.nextIndex());e('a[data-toggle="tab"]',b).on("click",l);e('a[data-toggle="tab"]',b).on("shown shown.bs.tab",m)};e.fn.bootstrapWizard=function(d){if("string"==typeof d){var k=Array.prototype.slice.call(arguments,1);1===k.length&&k.toString();return this.data("bootstrapWizard")[d](k)}return this.each(function(a){a=e(this);if(!a.data("bootstrapWizard")){var g=new n(a,d);a.data("bootstrapWizard",
|
||||
g);g.fixNavigationButtons()}})};e.fn.bootstrapWizard.defaults={tabClass:"nav nav-pills",nextSelector:".wizard li.next",previousSelector:".wizard li.previous",firstSelector:".wizard li.first",lastSelector:".wizard li.last",backSelector:".wizard li.back",onShow:null,onInit:null,onNext:null,onPrevious:null,onLast:null,onFirst:null,onBack:null,onTabChange:null,onTabClick:null,onTabShow:null}})(jQuery);
|
||||
@@ -0,0 +1,30 @@
|
||||
.com { color: #93a1a1; }
|
||||
.lit { color: #195f91; }
|
||||
.pun, .opn, .clo { color: #93a1a1; }
|
||||
.fun { color: #dc322f; }
|
||||
.str, .atv { color: #D14; }
|
||||
.kwd, .prettyprint .tag { color: #1e347b; }
|
||||
.typ, .atn, .dec, .var { color: teal; }
|
||||
.pln { color: #48484c; }
|
||||
|
||||
.prettyprint {
|
||||
padding: 8px;
|
||||
background-color: #f7f7f9;
|
||||
border: 1px solid #e1e1e8;
|
||||
}
|
||||
.prettyprint.linenums {
|
||||
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
}
|
||||
|
||||
/* Specify class=linenums on a pre to get line numbering */
|
||||
ol.linenums {
|
||||
margin: 0 0 0 33px; /* IE indents via margin-left */
|
||||
}
|
||||
ol.linenums li {
|
||||
padding-left: 12px;
|
||||
color: #bebec5;
|
||||
line-height: 20px;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
|
||||
(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
|
||||
[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
|
||||
f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
|
||||
(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
|
||||
{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
|
||||
t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
|
||||
"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
|
||||
l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
|
||||
q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
|
||||
q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
|
||||
"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
|
||||
a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
|
||||
for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
|
||||
m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
|
||||
a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
|
||||
j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
|
||||
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
|
||||
H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
|
||||
J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
|
||||
I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
|
||||
["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
|
||||
/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
|
||||
["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
|
||||
hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
|
||||
!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
|
||||
250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
|
||||
PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();
|
||||
Reference in New Issue
Block a user