From 5bd8de1880bf78f413bf0eddff1b4f6a07344e4b Mon Sep 17 00:00:00 2001
From: amazingSurge <amazingSurge@yahoo.com>
Date: Wed, 1 Apr 2015 17:34:00 +0800
Subject: [PATCH 1/2] Added header, body, content, actions & steps css classes
 options

---
 build/jquery.steps.js | 216 ++++++++++++++++++++++++++++++------------
 package.json          |  22 ++---
 src/defaults.js       |  60 ++++++++++++
 src/privates.js       | 151 +++++++++++++++++------------
 src/publics.js        |   2 +-
 5 files changed, 319 insertions(+), 132 deletions(-)

diff --git a/build/jquery.steps.js b/build/jquery.steps.js
index 956b05a..9dd40dc 100644
--- a/build/jquery.steps.js
+++ b/build/jquery.steps.js
@@ -1,6 +1,6 @@
 /*! 
- * jQuery Steps v1.1.0 - 09/04/2014
- * Copyright (c) 2014 Rafael Staib (http://www.jquery-steps.com)
+ * jQuery Steps v1.1.0 - 04/01/2015
+ * Copyright (c) 2015 Rafael Staib (http://www.jquery-steps.com)
  * Licensed under MIT http://www.opensource.org/licenses/MIT
  */
 ;(function ($, undefined)
@@ -273,11 +273,12 @@ function destroy(wizard, options)
  * @private
  * @method finishStep
  * @param wizard {Object} The jQuery wizard object
+  * @param options {Object} Settings of the current wizard
  * @param state {Object} The state container of the current wizard
  **/
-function finishStep(wizard, state)
+function finishStep(wizard, options, state)
 {
-    var currentStep = wizard.find(".steps li").eq(state.currentIndex);
+    var currentStep = getStepsCollection(wizard, options).children("li").eq(state.currentIndex);
 
     if (wizard.triggerHandler("finishing", [state.currentIndex]))
     {
@@ -348,6 +349,26 @@ function getSteps(wizard)
     return wizard.data("steps");
 }
 
+function getStepsCollection(wizard, options)
+{
+    return wizard.find('.' + options.stepsCssClass + ' > ul');
+}
+
+function getContentContainer(wizard, options)
+{
+    return wizard.find('.' + options.contentCssClass);
+}
+
+function getHeaderCollection(wizard, options)
+{
+    return wizard.find('.' + options.contentCssClass + ' > ' + '.' + options.headerCssClass);
+}
+
+function getBodyCollection(wizard, options)
+{
+    return wizard.find('.' + options.contentCssClass + ' > ' + '.' + options.bodyCssClass);
+}
+
 /**
  * Gets a specific step object by index.
  *
@@ -517,7 +538,7 @@ function goToStep(wizard, options, state, index)
     }
     else
     {
-        wizard.find(".steps li").eq(oldIndex).addClass("error");
+        getStepsCollection(wizard, options).children("li").eq(oldIndex).addClass("error");
     }
 
     return true;
@@ -609,7 +630,7 @@ function insertStep(wizard, options, state, index, step)
     }
     state.stepCount++;
 
-    var contentContainer = wizard.find(".content"),
+    var contentContainer = getContentContainer(wizard, options),
         header = $("<{0}>{1}</{0}>".format(options.headerTag, step.title)),
         body = $("<{0}></{0}>".format(options.bodyTag));
 
@@ -627,7 +648,7 @@ function insertStep(wizard, options, state, index, step)
         getStepPanel(wizard, (index - 1)).after(body).after(header);
     }
 
-    renderBody(wizard, state, body, index);
+    renderBody(wizard, options, state, body, index);
     renderTitle(wizard, options, state, header, index);
     refreshSteps(wizard, options, state, index);
     if (index === state.currentIndex)
@@ -709,7 +730,7 @@ function loadAsyncContent(wizard, options, state)
             switch (getValidEnumValue(contentMode, currentStep.contentMode))
             {
                 case contentMode.iframe:
-                    wizard.find(".content > .body").eq(state.currentIndex).empty()
+                    getBodyCollection(wizard, options).eq(state.currentIndex).empty()
                         .html("<iframe src=\"" + currentStep.contentUrl + "\" frameborder=\"0\" scrolling=\"no\" />")
                         .data("loaded", "1");
                     break;
@@ -794,7 +815,7 @@ function paginationClickHandler(event)
             break;
 
         case "finish":
-            finishStep(wizard, state);
+            finishStep(wizard, options, state);
             break;
 
         case "next":
@@ -859,19 +880,19 @@ function refreshStepNavigation(wizard, options, state, oldIndex)
 {
     var currentOrNewStepAnchor = getStepAnchor(wizard, state.currentIndex),
         currentInfo = $("<span class=\"current-info audible\">" + options.labels.current + " </span>"),
-        stepTitles = wizard.find(".content > .title");
+        stepTitles = getHeaderCollection(wizard, options);
 
     if (oldIndex != null)
     {
         var oldStepAnchor = getStepAnchor(wizard, oldIndex);
         oldStepAnchor.parent().addClass("done").removeClass("error")._selectAria(false);
-        stepTitles.eq(oldIndex).removeClass("current").next(".body").removeClass("current");
+        stepTitles.eq(oldIndex).removeClass("current").next("." + options.bodyCssClass).removeClass("current");
         currentInfo = oldStepAnchor.find(".current-info");
         currentOrNewStepAnchor.focus();
     }
 
     currentOrNewStepAnchor.prepend(currentInfo).parent()._selectAria().removeClass("done")._enableAria();
-    stepTitles.eq(state.currentIndex).addClass("current").next(".body").addClass("current");
+    stepTitles.eq(state.currentIndex).addClass("current").next("." + options.bodyCssClass).addClass("current");
 }
 
 /**
@@ -894,12 +915,12 @@ function refreshSteps(wizard, options, state, index)
         var uniqueStepId = uniqueId + _tabSuffix + i,
             uniqueBodyId = uniqueId + _tabpanelSuffix + i,
             uniqueHeaderId = uniqueId + _titleSuffix + i,
-            title = wizard.find(".title").eq(i)._id(uniqueHeaderId);
+            title = wizard.find("." + options.headerCssClass).eq(i)._id(uniqueHeaderId);
 
-        wizard.find(".steps a").eq(i)._id(uniqueStepId)
+        getStepsCollection(wizard, options).find("a").eq(i)._id(uniqueStepId)
             ._aria("controls", uniqueBodyId).attr("href", "#" + uniqueHeaderId)
             .html(renderTemplate(options.titleTemplate, { index: i + 1, title: title.html() }));
-        wizard.find(".body").eq(i)._id(uniqueBodyId)
+        wizard.find("." + options.bodyCssClass).eq(i)._id(uniqueBodyId)
             ._aria("labelledby", uniqueHeaderId);
     }
 }
@@ -960,13 +981,13 @@ function removeStep(wizard, options, state, index)
     // Set the "first" class to the new first step button 
     if (index === 0)
     {
-        wizard.find(".steps li").first().addClass("first");
+        getStepsCollection(wizard, options).children("li").first().addClass("first");
     }
 
     // Set the "last" class to the new last step button 
     if (index === state.stepCount)
     {
-        wizard.find(".steps li").eq(index).addClass("last");
+        getStepsCollection(wizard, options).children("li").eq(index).addClass("last");
     }
 
     refreshSteps(wizard, options, state, index);
@@ -996,8 +1017,8 @@ function render(wizard, options, state)
     var wrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>",
         orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation),
         verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "",
-        contentWrapper = $(wrapperTemplate.format(options.contentContainerTag, "content " + options.clearFixCssClass, wizard.html())),
-        stepsWrapper = $(wrapperTemplate.format(options.stepsContainerTag, "steps " + options.clearFixCssClass, "<ul role=\"tablist\"></ul>")),
+        contentWrapper = $(wrapperTemplate.format(options.contentContainerTag, options.contentCssClass + " " + options.clearFixCssClass, wizard.html())),
+        stepsWrapper = $(wrapperTemplate.format(options.stepsContainerTag, options.stepsCssClass + " " + options.clearFixCssClass, "<ul role=\"tablist\"></ul>")),
         stepTitles = contentWrapper.children(options.headerTag),
         stepContents = contentWrapper.children(options.bodyTag);
 
@@ -1008,7 +1029,7 @@ function render(wizard, options, state)
     // Add WIA-ARIA support
     stepContents.each(function (index)
     {
-        renderBody(wizard, state, $(this), index);
+        renderBody(wizard, options, state, $(this), index);
     });
 
     stepTitles.each(function (index)
@@ -1020,6 +1041,35 @@ function render(wizard, options, state)
     renderPagination(wizard, options, state);
 }
 
+/**
+ * Renders a template and replaces all placeholder.
+ *
+ * @static
+ * @private
+ * @method renderTemplate
+ * @param template {String} A template
+ * @param substitutes {Object} A list of substitute
+ * @return {String} The rendered template
+ */
+function renderTemplate(template, substitutes)
+{
+    var matches = template.match(/#([a-z]+)#/gi);
+    for (var i = 0; i < matches.length; i++)
+    {
+        var match = matches[i], 
+            key = match.substring(1, match.length - 1);
+
+        if (substitutes[key] === undefined)
+        {
+            throwError("The key '{0}' does not exist in the substitute collection!", key);
+        }
+
+        template = template.replace(match, substitutes[key]);
+    }
+
+    return template;
+}
+
 /**
  * Transforms the body to a proper tabpanel.
  *
@@ -1027,17 +1077,18 @@ function render(wizard, options, state)
  * @private
  * @method renderBody
  * @param wizard {Object} A jQuery wizard object
+  * @param options {Object} Settings of the current wizard
  * @param body {Object} A jQuery body object
  * @param index {Integer} The position of the body
  */
-function renderBody(wizard, state, body, index)
+function renderBody(wizard, options, state, body, index)
 {
     var uniqueId = getUniqueId(wizard),
         uniqueBodyId = uniqueId + _tabpanelSuffix + index,
         uniqueHeaderId = uniqueId + _titleSuffix + index;
 
     body._id(uniqueBodyId).attr("role", "tabpanel")._aria("labelledby", uniqueHeaderId)
-        .addClass("body")._showAria(state.currentIndex === index);
+        .addClass(options.bodyCssClass)._showAria(state.currentIndex === index);
 }
 
 /**
@@ -1055,24 +1106,36 @@ function renderPagination(wizard, options, state)
     if (options.enablePagination)
     {
         var pagination = "<{0} class=\"actions {1}\"><ul role=\"menu\" aria-label=\"{2}\">{3}</ul></{0}>",
-            buttonTemplate = "<li><a href=\"#{0}\" role=\"menuitem\">{1}</a></li>",
+            buttonTemplate = options.buttonTemplate,
             buttons = "";
 
         if (!options.forceMoveForward)
         {
-            buttons += buttonTemplate.format("previous", options.labels.previous);
+            buttons += renderTemplate(buttonTemplate, {
+                action: "previous",
+                label: options.labels.previous
+            });
         }
 
-        buttons += buttonTemplate.format("next", options.labels.next);
+        buttons += renderTemplate(buttonTemplate, {
+            action: "next",
+            label: options.labels.next
+        });
 
         if (options.enableFinishButton)
         {
-            buttons += buttonTemplate.format("finish", options.labels.finish);
+            buttons += renderTemplate(buttonTemplate, {
+                action: "finish",
+                label: options.labels.finish
+            });
         }
 
         if (options.enableCancelButton)
         {
-            buttons += buttonTemplate.format("cancel", options.labels.cancel);
+            buttons += renderTemplate(buttonTemplate, {
+                action: "cancel",
+                label: options.labels.cancel
+            });
         }
 
         wizard.append(pagination.format(options.actionContainerTag, options.clearFixCssClass,
@@ -1083,36 +1146,6 @@ function renderPagination(wizard, options, state)
     }
 }
 
-/**
- * Renders a template and replaces all placeholder.
- *
- * @static
- * @private
- * @method renderTemplate
- * @param template {String} A template
- * @param substitutes {Object} A list of substitute
- * @return {String} The rendered template
- */
-function renderTemplate(template, substitutes)
-{
-    var matches = template.match(/#([a-z]*)#/gi);
-
-    for (var i = 0; i < matches.length; i++)
-    {
-        var match = matches[i], 
-            key = match.substring(1, match.length - 1);
-
-        if (substitutes[key] === undefined)
-        {
-            throwError("The key '{0}' does not exist in the substitute collection!", key);
-        }
-
-        template = template.replace(match, substitutes[key]);
-    }
-
-    return template;
-}
-
 /**
  * Transforms the title to a step item button.
  *
@@ -1131,7 +1164,7 @@ function renderTitle(wizard, options, state, header, index)
         uniqueStepId = uniqueId + _tabSuffix + index,
         uniqueBodyId = uniqueId + _tabpanelSuffix + index,
         uniqueHeaderId = uniqueId + _titleSuffix + index,
-        stepCollection = wizard.find(".steps > ul"),
+        stepCollection = getStepsCollection(wizard, options),
         title = renderTemplate(options.titleTemplate, {
             index: index + 1,
             title: header.html()
@@ -1146,7 +1179,7 @@ function renderTitle(wizard, options, state, header, index)
         stepItem.addClass("done");
     }
 
-    header._id(uniqueHeaderId).attr("tabindex", "-1").addClass("title");
+    header._id(uniqueHeaderId).attr("tabindex", "-1").addClass(options.headerCssClass);
 
     if (index === 0)
     {
@@ -1193,7 +1226,7 @@ function saveCurrentStateToCookie(wizard, options, state)
 
 function startTransitionEffect(wizard, options, state, index, oldIndex, doneCallback)
 {
-    var stepContents = wizard.find(".content > .body"),
+    var stepContents = getBodyCollection(wizard, options),
         effect = getValidEnumValue(transitionEffect, options.transitionEffect),
         effectSpeed = options.transitionEffectSpeed,
         newStep = stepContents.eq(index),
@@ -1302,6 +1335,7 @@ function validateArgument(argumentName, argumentValue)
     }
 }
 
+
 /**
  * Represents a jQuery wizard plugin.
  *
@@ -1358,7 +1392,7 @@ $.fn.steps.destroy = function ()
  **/
 $.fn.steps.finish = function ()
 {
-    finishStep(this, getState(this));
+    finishStep(this, getOptions(this), getState(this));
 };
 
 /**
@@ -1676,6 +1710,56 @@ var defaults = $.fn.steps.defaults = {
      **/
     cssClass: "wizard",
 
+    /**
+     * The css class which will be added to the step button text.
+     *
+     * @property headerCssClass
+     * @type String
+     * @default "title"
+     * @for defaults
+     **/
+    headerCssClass: "title",
+
+    /**
+     * The css class which will be added to the step content.
+     *
+     * @property bodyCssClass
+     * @type String
+     * @default "body"
+     * @for defaults
+     **/
+    bodyCssClass: "body",
+
+    /**
+     * The css class which will be added to the content component wrapper.
+     *
+     * @property contentCssClass
+     * @type String
+     * @default "content"
+     * @for defaults
+     **/
+    contentCssClass: "content",
+
+    /**
+     * The css class which will be added to the pagination navigation wrapper.
+     *
+     * @property actionsCssClass
+     * @type String
+     * @default "actions"
+     * @for defaults
+     **/
+    actionsCssClass: "actions",
+
+    /**
+     * The css class which will be added to the steps navigation wrapper.
+     *
+     * @property stepsCssClass
+     * @type String
+     * @default "steps"
+     * @for defaults
+     **/
+    stepsCssClass: "steps",
+
     /**
      * The css class which will be used for floating scenarios.
      *
@@ -1721,6 +1805,16 @@ var defaults = $.fn.steps.defaults = {
      **/
     loadingTemplate: "<span class=\"spinner\"></span> #text#",
 
+    /**
+     * The button template which will be used to create a action button.
+     *
+     * @property buttonTemplate
+     * @type String
+     * @default "<a href=\"#action#\" role=\"menuitem\">#label#</a>"
+     * @for defaults
+     **/
+    buttonTemplate:  "<li><a href=\"##action#\" role=\"menuitem\">#label#</a></li>",
+
     /*
      * Behaviour
      */
diff --git a/package.json b/package.json
index ffeaa53..a799358 100644
--- a/package.json
+++ b/package.json
@@ -31,17 +31,17 @@
     }
   ],
   "devDependencies": {
-    "grunt": "~0.4.1",
-    "grunt-cli": "~0.1.9",
-    "grunt-contrib-qunit": "~0.2.1",
-    "grunt-contrib-jshint": "~0.4.3",
-    "grunt-contrib-uglify": "~0.2.0",
-    "grunt-contrib-concat": "~0.3.0",
-    "grunt-contrib-yuidoc": "~0.4.0",
-    "grunt-contrib-clean": "~0.4.1",
-    "grunt-contrib-compress": "~0.5.2",
-    "grunt-regex-replace": "~0.2.5",
-    "grunt-exec": "~0.4.2"
+    "grunt": "~0.4.5",
+    "grunt-cli": "~0.1.13",
+    "grunt-contrib-clean": "~0.6.0",
+    "grunt-contrib-compress": "~0.13.0",
+    "grunt-contrib-concat": "~0.5.1",
+    "grunt-contrib-jshint": "~0.11.1",
+    "grunt-contrib-qunit": "~0.6.0",
+    "grunt-contrib-uglify": "~0.8.1",
+    "grunt-contrib-yuidoc": "~0.7.0",
+    "grunt-regex-replace": "~0.2.6",
+    "grunt-exec": "~0.4.6"
   },
   "readmeFilename": "README.md",
   "gitHead": "0d9f4f8b6a0c3d3b8a73eabf6a4b8cececd52f7a",
diff --git a/src/defaults.js b/src/defaults.js
index 01dd7c6..29d0078 100644
--- a/src/defaults.js
+++ b/src/defaults.js
@@ -78,6 +78,56 @@ var defaults = $.fn.steps.defaults = {
      **/
     cssClass: "wizard",
 
+    /**
+     * The css class which will be added to the step button text.
+     *
+     * @property headerCssClass
+     * @type String
+     * @default "title"
+     * @for defaults
+     **/
+    headerCssClass: "title",
+
+    /**
+     * The css class which will be added to the step content.
+     *
+     * @property bodyCssClass
+     * @type String
+     * @default "body"
+     * @for defaults
+     **/
+    bodyCssClass: "body",
+
+    /**
+     * The css class which will be added to the content component wrapper.
+     *
+     * @property contentCssClass
+     * @type String
+     * @default "content"
+     * @for defaults
+     **/
+    contentCssClass: "content",
+
+    /**
+     * The css class which will be added to the pagination navigation wrapper.
+     *
+     * @property actionsCssClass
+     * @type String
+     * @default "actions"
+     * @for defaults
+     **/
+    actionsCssClass: "actions",
+
+    /**
+     * The css class which will be added to the steps navigation wrapper.
+     *
+     * @property stepsCssClass
+     * @type String
+     * @default "steps"
+     * @for defaults
+     **/
+    stepsCssClass: "steps",
+
     /**
      * The css class which will be used for floating scenarios.
      *
@@ -123,6 +173,16 @@ var defaults = $.fn.steps.defaults = {
      **/
     loadingTemplate: "<span class=\"spinner\"></span> #text#",
 
+    /**
+     * The button template which will be used to create a action button.
+     *
+     * @property buttonTemplate
+     * @type String
+     * @default "<a href=\"#action#\" role=\"menuitem\">#label#</a>"
+     * @for defaults
+     **/
+    buttonTemplate:  "<li><a href=\"##action#\" role=\"menuitem\">#label#</a></li>",
+
     /*
      * Behaviour
      */
diff --git a/src/privates.js b/src/privates.js
index 95362ce..25191b6 100644
--- a/src/privates.js
+++ b/src/privates.js
@@ -213,11 +213,12 @@ function destroy(wizard, options)
  * @private
  * @method finishStep
  * @param wizard {Object} The jQuery wizard object
+  * @param options {Object} Settings of the current wizard
  * @param state {Object} The state container of the current wizard
  **/
-function finishStep(wizard, state)
+function finishStep(wizard, options, state)
 {
-    var currentStep = wizard.find(".steps li").eq(state.currentIndex);
+    var currentStep = getStepsCollection(wizard, options).children("li").eq(state.currentIndex);
 
     if (wizard.triggerHandler("finishing", [state.currentIndex]))
     {
@@ -288,6 +289,26 @@ function getSteps(wizard)
     return wizard.data("steps");
 }
 
+function getStepsCollection(wizard, options)
+{
+    return wizard.find('.' + options.stepsCssClass + ' > ul');
+}
+
+function getContentContainer(wizard, options)
+{
+    return wizard.find('.' + options.contentCssClass);
+}
+
+function getHeaderCollection(wizard, options)
+{
+    return wizard.find('.' + options.contentCssClass + ' > ' + '.' + options.headerCssClass);
+}
+
+function getBodyCollection(wizard, options)
+{
+    return wizard.find('.' + options.contentCssClass + ' > ' + '.' + options.bodyCssClass);
+}
+
 /**
  * Gets a specific step object by index.
  *
@@ -457,7 +478,7 @@ function goToStep(wizard, options, state, index)
     }
     else
     {
-        wizard.find(".steps li").eq(oldIndex).addClass("error");
+        getStepsCollection(wizard, options).children("li").eq(oldIndex).addClass("error");
     }
 
     return true;
@@ -549,7 +570,7 @@ function insertStep(wizard, options, state, index, step)
     }
     state.stepCount++;
 
-    var contentContainer = wizard.find(".content"),
+    var contentContainer = getContentContainer(wizard, options),
         header = $("<{0}>{1}</{0}>".format(options.headerTag, step.title)),
         body = $("<{0}></{0}>".format(options.bodyTag));
 
@@ -567,7 +588,7 @@ function insertStep(wizard, options, state, index, step)
         getStepPanel(wizard, (index - 1)).after(body).after(header);
     }
 
-    renderBody(wizard, state, body, index);
+    renderBody(wizard, options, state, body, index);
     renderTitle(wizard, options, state, header, index);
     refreshSteps(wizard, options, state, index);
     if (index === state.currentIndex)
@@ -649,7 +670,7 @@ function loadAsyncContent(wizard, options, state)
             switch (getValidEnumValue(contentMode, currentStep.contentMode))
             {
                 case contentMode.iframe:
-                    wizard.find(".content > .body").eq(state.currentIndex).empty()
+                    getBodyCollection(wizard, options).eq(state.currentIndex).empty()
                         .html("<iframe src=\"" + currentStep.contentUrl + "\" frameborder=\"0\" scrolling=\"no\" />")
                         .data("loaded", "1");
                     break;
@@ -734,7 +755,7 @@ function paginationClickHandler(event)
             break;
 
         case "finish":
-            finishStep(wizard, state);
+            finishStep(wizard, options, state);
             break;
 
         case "next":
@@ -799,19 +820,19 @@ function refreshStepNavigation(wizard, options, state, oldIndex)
 {
     var currentOrNewStepAnchor = getStepAnchor(wizard, state.currentIndex),
         currentInfo = $("<span class=\"current-info audible\">" + options.labels.current + " </span>"),
-        stepTitles = wizard.find(".content > .title");
+        stepTitles = getHeaderCollection(wizard, options);
 
     if (oldIndex != null)
     {
         var oldStepAnchor = getStepAnchor(wizard, oldIndex);
         oldStepAnchor.parent().addClass("done").removeClass("error")._selectAria(false);
-        stepTitles.eq(oldIndex).removeClass("current").next(".body").removeClass("current");
+        stepTitles.eq(oldIndex).removeClass("current").next("." + options.bodyCssClass).removeClass("current");
         currentInfo = oldStepAnchor.find(".current-info");
         currentOrNewStepAnchor.focus();
     }
 
     currentOrNewStepAnchor.prepend(currentInfo).parent()._selectAria().removeClass("done")._enableAria();
-    stepTitles.eq(state.currentIndex).addClass("current").next(".body").addClass("current");
+    stepTitles.eq(state.currentIndex).addClass("current").next("." + options.bodyCssClass).addClass("current");
 }
 
 /**
@@ -834,12 +855,12 @@ function refreshSteps(wizard, options, state, index)
         var uniqueStepId = uniqueId + _tabSuffix + i,
             uniqueBodyId = uniqueId + _tabpanelSuffix + i,
             uniqueHeaderId = uniqueId + _titleSuffix + i,
-            title = wizard.find(".title").eq(i)._id(uniqueHeaderId);
+            title = wizard.find("." + options.headerCssClass).eq(i)._id(uniqueHeaderId);
 
-        wizard.find(".steps a").eq(i)._id(uniqueStepId)
+        getStepsCollection(wizard, options).find("a").eq(i)._id(uniqueStepId)
             ._aria("controls", uniqueBodyId).attr("href", "#" + uniqueHeaderId)
             .html(renderTemplate(options.titleTemplate, { index: i + 1, title: title.html() }));
-        wizard.find(".body").eq(i)._id(uniqueBodyId)
+        wizard.find("." + options.bodyCssClass).eq(i)._id(uniqueBodyId)
             ._aria("labelledby", uniqueHeaderId);
     }
 }
@@ -900,13 +921,13 @@ function removeStep(wizard, options, state, index)
     // Set the "first" class to the new first step button 
     if (index === 0)
     {
-        wizard.find(".steps li").first().addClass("first");
+        getStepsCollection(wizard, options).children("li").first().addClass("first");
     }
 
     // Set the "last" class to the new last step button 
     if (index === state.stepCount)
     {
-        wizard.find(".steps li").eq(index).addClass("last");
+        getStepsCollection(wizard, options).children("li").eq(index).addClass("last");
     }
 
     refreshSteps(wizard, options, state, index);
@@ -936,8 +957,8 @@ function render(wizard, options, state)
     var wrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>",
         orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation),
         verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "",
-        contentWrapper = $(wrapperTemplate.format(options.contentContainerTag, "content " + options.clearFixCssClass, wizard.html())),
-        stepsWrapper = $(wrapperTemplate.format(options.stepsContainerTag, "steps " + options.clearFixCssClass, "<ul role=\"tablist\"></ul>")),
+        contentWrapper = $(wrapperTemplate.format(options.contentContainerTag, options.contentCssClass + " " + options.clearFixCssClass, wizard.html())),
+        stepsWrapper = $(wrapperTemplate.format(options.stepsContainerTag, options.stepsCssClass + " " + options.clearFixCssClass, "<ul role=\"tablist\"></ul>")),
         stepTitles = contentWrapper.children(options.headerTag),
         stepContents = contentWrapper.children(options.bodyTag);
 
@@ -948,7 +969,7 @@ function render(wizard, options, state)
     // Add WIA-ARIA support
     stepContents.each(function (index)
     {
-        renderBody(wizard, state, $(this), index);
+        renderBody(wizard, options, state, $(this), index);
     });
 
     stepTitles.each(function (index)
@@ -960,6 +981,35 @@ function render(wizard, options, state)
     renderPagination(wizard, options, state);
 }
 
+/**
+ * Renders a template and replaces all placeholder.
+ *
+ * @static
+ * @private
+ * @method renderTemplate
+ * @param template {String} A template
+ * @param substitutes {Object} A list of substitute
+ * @return {String} The rendered template
+ */
+function renderTemplate(template, substitutes)
+{
+    var matches = template.match(/#([a-z]+)#/gi);
+    for (var i = 0; i < matches.length; i++)
+    {
+        var match = matches[i], 
+            key = match.substring(1, match.length - 1);
+
+        if (substitutes[key] === undefined)
+        {
+            throwError("The key '{0}' does not exist in the substitute collection!", key);
+        }
+
+        template = template.replace(match, substitutes[key]);
+    }
+
+    return template;
+}
+
 /**
  * Transforms the body to a proper tabpanel.
  *
@@ -967,17 +1017,18 @@ function render(wizard, options, state)
  * @private
  * @method renderBody
  * @param wizard {Object} A jQuery wizard object
+  * @param options {Object} Settings of the current wizard
  * @param body {Object} A jQuery body object
  * @param index {Integer} The position of the body
  */
-function renderBody(wizard, state, body, index)
+function renderBody(wizard, options, state, body, index)
 {
     var uniqueId = getUniqueId(wizard),
         uniqueBodyId = uniqueId + _tabpanelSuffix + index,
         uniqueHeaderId = uniqueId + _titleSuffix + index;
 
     body._id(uniqueBodyId).attr("role", "tabpanel")._aria("labelledby", uniqueHeaderId)
-        .addClass("body")._showAria(state.currentIndex === index);
+        .addClass(options.bodyCssClass)._showAria(state.currentIndex === index);
 }
 
 /**
@@ -995,24 +1046,36 @@ function renderPagination(wizard, options, state)
     if (options.enablePagination)
     {
         var pagination = "<{0} class=\"actions {1}\"><ul role=\"menu\" aria-label=\"{2}\">{3}</ul></{0}>",
-            buttonTemplate = "<li><a href=\"#{0}\" role=\"menuitem\">{1}</a></li>",
+            buttonTemplate = options.buttonTemplate,
             buttons = "";
 
         if (!options.forceMoveForward)
         {
-            buttons += buttonTemplate.format("previous", options.labels.previous);
+            buttons += renderTemplate(buttonTemplate, {
+                action: "previous",
+                label: options.labels.previous
+            });
         }
 
-        buttons += buttonTemplate.format("next", options.labels.next);
+        buttons += renderTemplate(buttonTemplate, {
+            action: "next",
+            label: options.labels.next
+        });
 
         if (options.enableFinishButton)
         {
-            buttons += buttonTemplate.format("finish", options.labels.finish);
+            buttons += renderTemplate(buttonTemplate, {
+                action: "finish",
+                label: options.labels.finish
+            });
         }
 
         if (options.enableCancelButton)
         {
-            buttons += buttonTemplate.format("cancel", options.labels.cancel);
+            buttons += renderTemplate(buttonTemplate, {
+                action: "cancel",
+                label: options.labels.cancel
+            });
         }
 
         wizard.append(pagination.format(options.actionContainerTag, options.clearFixCssClass,
@@ -1023,36 +1086,6 @@ function renderPagination(wizard, options, state)
     }
 }
 
-/**
- * Renders a template and replaces all placeholder.
- *
- * @static
- * @private
- * @method renderTemplate
- * @param template {String} A template
- * @param substitutes {Object} A list of substitute
- * @return {String} The rendered template
- */
-function renderTemplate(template, substitutes)
-{
-    var matches = template.match(/#([a-z]*)#/gi);
-
-    for (var i = 0; i < matches.length; i++)
-    {
-        var match = matches[i], 
-            key = match.substring(1, match.length - 1);
-
-        if (substitutes[key] === undefined)
-        {
-            throwError("The key '{0}' does not exist in the substitute collection!", key);
-        }
-
-        template = template.replace(match, substitutes[key]);
-    }
-
-    return template;
-}
-
 /**
  * Transforms the title to a step item button.
  *
@@ -1071,7 +1104,7 @@ function renderTitle(wizard, options, state, header, index)
         uniqueStepId = uniqueId + _tabSuffix + index,
         uniqueBodyId = uniqueId + _tabpanelSuffix + index,
         uniqueHeaderId = uniqueId + _titleSuffix + index,
-        stepCollection = wizard.find(".steps > ul"),
+        stepCollection = getStepsCollection(wizard, options),
         title = renderTemplate(options.titleTemplate, {
             index: index + 1,
             title: header.html()
@@ -1086,7 +1119,7 @@ function renderTitle(wizard, options, state, header, index)
         stepItem.addClass("done");
     }
 
-    header._id(uniqueHeaderId).attr("tabindex", "-1").addClass("title");
+    header._id(uniqueHeaderId).attr("tabindex", "-1").addClass(options.headerCssClass);
 
     if (index === 0)
     {
@@ -1133,7 +1166,7 @@ function saveCurrentStateToCookie(wizard, options, state)
 
 function startTransitionEffect(wizard, options, state, index, oldIndex, doneCallback)
 {
-    var stepContents = wizard.find(".content > .body"),
+    var stepContents = getBodyCollection(wizard, options),
         effect = getValidEnumValue(transitionEffect, options.transitionEffect),
         effectSpeed = options.transitionEffectSpeed,
         newStep = stepContents.eq(index),
@@ -1240,4 +1273,4 @@ function validateArgument(argumentName, argumentValue)
     {
         throwError("The argument '{0}' is null or undefined.", argumentName);
     }
-}
\ No newline at end of file
+}
diff --git a/src/publics.js b/src/publics.js
index 9a80050..59796d4 100644
--- a/src/publics.js
+++ b/src/publics.js
@@ -54,7 +54,7 @@ $.fn.steps.destroy = function ()
  **/
 $.fn.steps.finish = function ()
 {
-    finishStep(this, getState(this));
+    finishStep(this, getOptions(this), getState(this));
 };
 
 /**

From c072ef51def06605b887d1337292a88c37f315cb Mon Sep 17 00:00:00 2001
From: amazingSurge <amazingSurge@yahoo.com>
Date: Thu, 9 Apr 2015 23:10:38 +0800
Subject: [PATCH 2/2] add actionsCssClass option

---
 build/jquery.steps.js | 14 +++++++-------
 src/privates.js       | 12 ++++++------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/build/jquery.steps.js b/build/jquery.steps.js
index 9dd40dc..6cd1b49 100644
--- a/build/jquery.steps.js
+++ b/build/jquery.steps.js
@@ -1,5 +1,5 @@
 /*! 
- * jQuery Steps v1.1.0 - 04/01/2015
+ * jQuery Steps v1.1.0 - 04/09/2015
  * Copyright (c) 2015 Rafael Staib (http://www.jquery-steps.com)
  * Licensed under MIT http://www.opensource.org/licenses/MIT
  */
@@ -233,7 +233,7 @@ function destroy(wizard, options)
     // Remove virtual data objects from the wizard
     wizard.unbind(eventNamespace).removeData("uid").removeData("options")
         .removeData("state").removeData("steps").removeData("eventNamespace")
-        .find(".actions a").unbind(eventNamespace);
+        .find("." + options.actionsCssClass + " a").unbind(eventNamespace);
 
     // Remove attributes and CSS classes from the wizard
     wizard.removeClass(options.clearFixCssClass + " vertical");
@@ -842,12 +842,12 @@ function refreshPagination(wizard, options, state)
 {
     if (options.enablePagination)
     {
-        var finish = wizard.find(".actions a[href$='#finish']").parent(),
-            next = wizard.find(".actions a[href$='#next']").parent();
+        var finish = wizard.find("." + options.actionsCssClass + " a[href$='#finish']").parent(),
+            next = wizard.find("." + options.actionsCssClass + " a[href$='#next']").parent();
 
         if (!options.forceMoveForward)
         {
-            var previous = wizard.find(".actions a[href$='#previous']").parent();
+            var previous = wizard.find("." + options.actionsCssClass + " a[href$='#previous']").parent();
             previous._enableAria(state.currentIndex > 0);
         }
 
@@ -942,7 +942,7 @@ function registerEvents(wizard, options)
         wizard.bind("keyup" + eventNamespace, keyUpHandler);
     }
 
-    wizard.find(".actions a").bind("click" + eventNamespace, paginationClickHandler);
+    wizard.find("." + options.actionsCssClass + " a").bind("click" + eventNamespace, paginationClickHandler);
 }
 
 /**
@@ -1105,7 +1105,7 @@ function renderPagination(wizard, options, state)
 {
     if (options.enablePagination)
     {
-        var pagination = "<{0} class=\"actions {1}\"><ul role=\"menu\" aria-label=\"{2}\">{3}</ul></{0}>",
+        var pagination = "<{0} class=\""+options.actionsCssClass+" {1}\"><ul role=\"menu\" aria-label=\"{2}\">{3}</ul></{0}>",
             buttonTemplate = options.buttonTemplate,
             buttons = "";
 
diff --git a/src/privates.js b/src/privates.js
index 25191b6..53a311a 100644
--- a/src/privates.js
+++ b/src/privates.js
@@ -173,7 +173,7 @@ function destroy(wizard, options)
     // Remove virtual data objects from the wizard
     wizard.unbind(eventNamespace).removeData("uid").removeData("options")
         .removeData("state").removeData("steps").removeData("eventNamespace")
-        .find(".actions a").unbind(eventNamespace);
+        .find("." + options.actionsCssClass + " a").unbind(eventNamespace);
 
     // Remove attributes and CSS classes from the wizard
     wizard.removeClass(options.clearFixCssClass + " vertical");
@@ -782,12 +782,12 @@ function refreshPagination(wizard, options, state)
 {
     if (options.enablePagination)
     {
-        var finish = wizard.find(".actions a[href$='#finish']").parent(),
-            next = wizard.find(".actions a[href$='#next']").parent();
+        var finish = wizard.find("." + options.actionsCssClass + " a[href$='#finish']").parent(),
+            next = wizard.find("." + options.actionsCssClass + " a[href$='#next']").parent();
 
         if (!options.forceMoveForward)
         {
-            var previous = wizard.find(".actions a[href$='#previous']").parent();
+            var previous = wizard.find("." + options.actionsCssClass + " a[href$='#previous']").parent();
             previous._enableAria(state.currentIndex > 0);
         }
 
@@ -882,7 +882,7 @@ function registerEvents(wizard, options)
         wizard.bind("keyup" + eventNamespace, keyUpHandler);
     }
 
-    wizard.find(".actions a").bind("click" + eventNamespace, paginationClickHandler);
+    wizard.find("." + options.actionsCssClass + " a").bind("click" + eventNamespace, paginationClickHandler);
 }
 
 /**
@@ -1045,7 +1045,7 @@ function renderPagination(wizard, options, state)
 {
     if (options.enablePagination)
     {
-        var pagination = "<{0} class=\"actions {1}\"><ul role=\"menu\" aria-label=\"{2}\">{3}</ul></{0}>",
+        var pagination = "<{0} class=\""+options.actionsCssClass+" {1}\"><ul role=\"menu\" aria-label=\"{2}\">{3}</ul></{0}>",
             buttonTemplate = options.buttonTemplate,
             buttons = "";