Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added before_step_shown event as a response to pull request from Matt…

…hew Hutton. Thanks Matthew for your input.

Added example for the before_step_shown event.
Updated changelog.
  • Loading branch information...
commit 4548877511645b8d3e8c50efc2a068aa8d0c9cc4 1 parent da9b6a5
Jan Sundman authored
Showing with 217 additions and 0 deletions.
  1. +217 −0 examples/example_22_before_step_shown_event.html
View
217 examples/example_22_before_step_shown_event.html
@@ -0,0 +1,217 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+ <head>
+ <title>JQuery Form Wizard</title>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
+ <link rel="stylesheet" type="text/css" href="./css/ui-lightness/jquery-ui-1.8.2.custom.css" />
+ <style type="text/css">
+ #demoWrapper {
+ padding : 1em;
+ width : 500px;
+ border-style: solid;
+ }
+
+ #fieldWrapper {
+ }
+
+ #demoNavigation {
+ margin-top : 0.5em;
+ margin-right : 1em;
+ text-align: right;
+ }
+
+ #data {
+ font-size : 0.7em;
+ }
+
+ input {
+ margin-right: 0.1em;
+ margin-bottom: 0.5em;
+ }
+
+ .input_field_25em {
+ width: 2.5em;
+ }
+
+ .input_field_3em {
+ width: 3em;
+ }
+
+ .input_field_35em {
+ width: 3.5em;
+ }
+
+ .input_field_12em {
+ width: 12em;
+ }
+
+ label {
+ margin-bottom: 0.2em;
+ font-weight: bold;
+ font-size: 0.8em;
+ }
+
+ label.error {
+ color: red;
+ font-size: 0.8em;
+ margin-left : 0.5em;
+ }
+
+ .step span {
+ float: right;
+ font-weight: bold;
+ padding-right: 0.8em;
+ }
+
+ .navigation_button {
+ width : 70px;
+ }
+
+ #data {
+ overflow : auto;
+ }
+
+ #step_visualization {
+
+ margin : 2em;
+ }
+
+ #visualization_first{
+ background-color : #ffffdd;
+ }
+
+ #visualization_finland{
+ background-color : #ffff99;
+ }
+
+ #visualization_confirmation{
+ background-color : #ffff44;
+ }
+
+ .visualization {
+ border-style : solid;
+ font-size: 0.8em;
+ font-weight: bold;
+ padding-left: 1em;
+ padding-right: 1em;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="demoWrapper">
+ <h3>Example of a straight wizard with a callback function bound to the 'before_step_shown event'</h3>
+ <ul>
+ <li>Straight wizard with three steps.</li>
+ <li>Callback bound to the 'before_step_shown' event</li>
+ <li>Validation plugin enabled for the email field on the second step.</li>
+ <li>Form plugin enabled and beforeSubmit and success callbacks are used.</li>
+ </ul>
+ <hr />
+ <h5 id="status"></h5>
+ <form id="demoForm" method="post" action="json.html" class="bbq">
+ <div id="fieldWrapper">
+ <div id="step_visualization"></div>
+ <div class="step" id="first">
+ <span class="font_normal_07em_black">First step - Name</span><br />
+ <label for="firstname">First name</label><br />
+ <input class="input_field_12em" name="firstname" id="firstname" /><br />
+ <label for="surname">Surname</label><br />
+ <input class="input_field_12em" name="surname" id="surname" /><br />
+ </div>
+ <div id="finland" class="step">
+ <span class="font_normal_07em_black">Step 2 - Personal information</span><br />
+ <label for="day_fi">Social Security Number</label><br />
+ <input class="input_field_25em" name="day" id="day_fi" value="DD" />
+ <input class="input_field_25em" name="month" id="month_fi" value="MM" />
+ <input class="input_field_3em" name="year" id="year_fi" value="YYYY" /> -
+ <input class="input_field_3em" name="lastFour" id="lastFour_fi" value="XXXX" /><br />
+ <label for="countryPrefix_fi">Phone number</label><br />
+ <input class="input_field_35em" name="countryPrefix" id="countryPrefix_fi" value="+358" /> -
+ <input class="input_field_3em" name="areaCode" id="areaCode_fi" /> -
+ <input class="input_field_12em" name="phoneNumber" id="phoneNumber_fi" /><br />
+ <label for="email">*Email</label><br />
+ <input class="input_field_12em email required" name="myemail" id="myemail" /><br />
+ </div>
+ <div id="confirmation" class="step">
+ <span class="font_normal_07em_black">Last step - Username</span><br />
+ <label for="username">User name</label><br />
+ <input class="input_field_12em" name="username" id="username" /><br />
+ <label for="password">Password</label><br />
+ <input class="input_field_12em" name="password" id="password" type="password" /><br />
+ <label for="retypePassword">Retype password</label><br />
+ <input class="input_field_12em" name="retypePassword" id="retypePassword" type="password" /><br />
+ </div>
+ </div>
+ <div id="demoNavigation">
+ <input class="navigation_button" id="back" value="Back" type="reset" />
+ <input class="navigation_button" id="next" value="Next" type="submit" />
+ </div>
+ </form>
+ <hr />
+
+ <p id="data"></p>
+ </div>
+
+ <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
+ <script type="text/javascript" src="../js/jquery.form.js"></script>
+ <script type="text/javascript" src="../js/jquery.validate.js"></script>
+ <script type="text/javascript" src="../js/bbq.js"></script>
+ <script type="text/javascript" src="../js/jquery-ui-1.8.5.custom.min.js"></script>
+ <script type="text/javascript" src="../js/jquery.form.wizard.js"></script>
+
+ <script type="text/javascript">
+ $(function(){
+ $("#demoForm").formwizard({
+ formPluginEnabled: true,
+ validationEnabled: true,
+ focusFirstInput : true,
+ formOptions :{
+ success: function(data){$("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })},
+ beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));},
+ dataType: 'json',
+ resetForm: true
+ }
+ }
+ );
+
+ // function for appending step visualization
+ function addVisualization(id){
+ $("#step_visualization").append("<span class=\"visualization\" id=\"visualization_" + id + "\">" + id + "</span> ")
+ }
+ // initial call to addVisualization (for visualizing the first step)
+ addVisualization($("#demoForm").formwizard("state").firstStep);
+
+ // bind a callback to the before_step_shown event
+ $("#demoForm").bind("before_step_shown", function(event, data){
+ $("#step_visualization").html("");
+
+ if(data.isBackNavigation || !data.isFirstStep){
+ var direction = (data.isBackNavigation)?"back":"forward";
+ $("#step_visualization").append("<div>Moving "+ direction +"</div>");
+ }
+ $.each(data.activatedSteps, function(){
+ addVisualization(this)
+ });
+ /*
+ Available data:
+ isBackNavigation - boolean
+ settings - options object containing the options set for the wizard
+ activatedSteps - list of activated steps (visited steps)
+ isLastStep - boolean specifying whether the current step is a submit step
+ isFirstStep - boolean
+ previousStep - the id of the previously visited step
+ currentStep - the id of the current step
+ backButton
+ nextButton
+ steps - the steps of the wizard
+ firstStep - the id of the first step
+ */
+
+ })
+
+ });
+ </script>
+ </body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.