Skip to content

Commit

Permalink
Version 1.1.0 - fixes #19
Browse files Browse the repository at this point in the history 
Introduces asynchronous functionality for cancelling events by providing
a third argument, `update()`, to all applicable event handlers. This
changeset also replaces the `$step` argument in transition functions
with the `state` object. The current step is still easily accessible via
`state.step`.
  • Loading branch information
@kflorence
kflorence committed Jun 1, 2014
1 parent 07f66b3 commit 52cd4bf
Show file tree
Hide file tree
Showing 71 changed files with 2,972 additions and 6,270 deletions.
8 changes: 4 additions & 4 deletions bower.json
View file
@@ -1,12 +1,12 @@
{
"name": "jquery-wizard",
"version": "1.0.1",
"version": "1.1.0",
"main": [
"src/jquery.wizard.js"
],
"dependencies": {
"jquery": ">=1.3.2",
"jquery.ui.core": ">=1.8.0",
"jquery.ui.widget": ">=1.8.0"
"jquery": ">=1.6.0",
"jquery.ui.core": ">=1.9.0",
"jquery.ui.widget": ">=1.9.0"
}
}
97 changes: 52 additions & 45 deletions examples/index.html
View file
@@ -1,65 +1,79 @@
<!doctype html>
<html>
<head>
<title>jQuery.wizard</title>
<title>jQuery JavaScript Form Wizard | jQuery.wizard</title>

<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="../external/jquery/ui/themes/smoothness/jquery-ui.smoothness.css" />
<meta name="description" content="A jQuery plugin that turns a standard
HTML form into a form wizard by breaking it into a series of
well-defined steps. The purpose of these steps is to better group
related inputs, preventing the user from becoming overwhelmed at the
size or complexity of a form and helping them to better understand
the structure of an unfamiliar form.">

<!-- Required scripts -->
<script type="text/javascript" src="../external/jquery/jquery-1.4.min.js"></script>
<script type="text/javascript" src="../external/jquery/ui/jquery-ui-1.8.12.min.js"></script>
<meta name="keywords" content="form, wizard, javascript, jquery,
asynchronous, branching, steps, finite-state machine, transitions,
stateful">

<!-- Optional scripts -->
<script type="text/javascript" src="../external/jquery/form/jquery.form.js"></script>
<script type="text/javascript" src="../external/jquery/validate/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="../external/jquery/ui/smoothness/jquery-ui-1.10.4.custom.min.css" />

<!-- The plugin -->
<script type="text/javascript" src="../external/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../external/jquery/ui/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="../src/jquery.wizard.js"></script>

<!-- Optional scripts -->
<script type="text/javascript" src="../external/jquery/form/jquery.form-3.50.js"></script>
<script type="text/javascript" src="../external/jquery/validate/jquery.validate-1.12.0.min.js"></script>

<!-- Demo -->
<script type="text/javascript">
jQuery(function($) {
// Example 1: Basic wizard with validation
$("#example-1").wizard({
$( "#example-1" ).wizard({
stepsWrapper: "#wrapped",
submit: ".submit",
beforeForward: function( event, state ) {
return !!$(this).wizard('form').valid();
if ( state.stepIndex === 1 ) {
$("#name").text($("[name=name]").val());

} else if ( state.stepIndex === 2 ) {
$("#gender").text($("[name=gender]").val());
}
return !!$( this ).wizard( "form" ).valid();
}
}).wizard('form').submit(function( event ) {
}).wizard( "form" ).submit(function( event ) {
event.preventDefault();
alert('Form submitted!');
alert( "Form submitted!" );

}).validate({
errorPlacement: function(error, element) {
if ( element.is(':radio') || element.is(':checkbox') ) {
errorPlacement: function( error, element ) {
if ( element.is( ":radio" ) || element.is( ":checkbox" ) ) {
error.insertBefore( element.next() );

} else {
} else {
error.insertAfter( element );
}
}
});

// Example 2: Basic wizard with progress bar
$("#progressbar").progressbar();
$( "#progressbar" ).progressbar();

$("#example-2").wizard({
$( "#example-2" ).wizard({
afterSelect: function( event, state ) {
$("#progressbar").progressbar("value", state.percentComplete);
$("#location").text("(" + state.stepsComplete + "/" + state.stepsPossible + ")");
$( "#progressbar" ).progressbar( "value", state.percentComplete );
$( "#location" ).text( "(" + state.stepsComplete + "/" + state.stepsPossible + ")" );
}
});

// Example 3: Basic branching wizard
$("#example-3").wizard({
$( "#example-3" ).wizard({
transitions: {
color: function( $step, action ) {
var branch = $step.find("[name=color]:checked").val();
color: function( state, action ) {
var branch = state.step.find( "[name=color]:checked" ).val();

if (!branch) {
alert("Please select a value to continue.");
if ( !branch ) {
alert( "Please select a value to continue." );
}

return branch;
Expand All @@ -68,16 +82,9 @@
});

// Example 4: Nested Branches
$("#example-4").wizard();
$( "#example-4" ).wizard();
});
</script>

<style type="text/css">
label.error {
position: relative;

}
</style>
</head>
<body>
<h1><a href="../" title="jQuery.wizard">jQuery.wizard</a></h1>
Expand All @@ -88,20 +95,18 @@ <h2>Basic Wizard With Validation</h2>

<form name="example-1" id="wrapped">
<div class="step">
What is your first name?<br />
<input type="text" name="firstname" class="required" /><br />
What is your last name?<br />
<input type="text" name="lastname" class="required" /><br />
<label>What is your name?</label>
<input type="text" name="name" class="required" />
</div>

<div class="step">
What is your gender?<br />
<p>What is your gender?</p>
<input type="radio" name="gender" value="male" class="required" />Male<br />
<input type="radio" name="gender" value="female" class="required" />Female<br />
</div>

<div class="submit step">
<p>Thanks!</p>
<p>You are a <span id="gender"></span> named <span id="name"></span>.</p>
</div>

<div class="navigation">
Expand All @@ -117,8 +122,10 @@ <h2>Basic Wizard With Validation</h2>
<div id="example-2">
<h2>Basic Wizard With Progress Bar</h2>

<h3>Progress <span id="location"></span></h3>
<div id="progressbar"></div>
<div class="pad">
<h3>Progress <span id="location"></span></h3>
<div id="progressbar"></div>
</div>

<form name="example-2">
<div class="step">
Expand Down Expand Up @@ -158,18 +165,18 @@ <h2>Branching Wizard</h2>

<div class="branch" id="pink">
<div class="step" data-state="end">
<p>This is the pink branch.</p>
<p class="pink">Pink, it was love at first sight</p>
</div>
</div>

<div class="branch" id="blue">
<div class="step" data-state="end">
<p>This is the blue branch.</p>
<p class="blue">I'm blue da ba dee da ba die...</p>
</div>
</div>

<div class="step" id="end">
<p>Back to the default branch and this wizard is over.</p>
<p>FIN.</p>
</div>

<div class="navigation">
Expand Down
21 changes: 20 additions & 1 deletion examples/styles.css
View file
Expand Up @@ -47,6 +47,7 @@ h3 span {
label.error {
color: #ff0000;
margin-left: 10px;
position: relative;
}

#progressbar {
Expand All @@ -73,7 +74,11 @@ label.error {
}

.wizard .wizard-step {
margin: 10px;
margin: 10px 0;
}

.wizard .wizard-step p {
padding: 5px;
}

.navigation {
Expand All @@ -93,6 +98,20 @@ label.error {
margin-right: 10px;
}

.pad {
padding: 5px;
}

.blue {
background: blue;
color: white;
}

.pink {
background: pink;
color: black;
}

.clearfix:before, .clearfix:after {
content: "\0020";
display: block;
Expand Down
12 changes: 0 additions & 12 deletions external/ba-debug.min.js
View file

This file was deleted.

0 comments on commit 52cd4bf

Please sign in to comment.