jQuery Tabs

Set the rtl property of the jqxTabs. Author: http://jqwidgets.com

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxWidget'>
  <div id='jqxTabs'>
    <ul>
      <li style="margin-left: 30px;">Personal info</li>
      <li>Shopping basket</li>
      <li>Review order</li>
    </ul>
    <div class="section">
      <div id="form">
        <div class="inputContainer">
          Username:
          <input class="formInput" type="text" id="usernameInput" />
        </div>
        <div class="inputContainer">
          Password:
          <input class="formInput" type="password" id="passwordInput" />
        </div>
      </div>
      <div id="hintWrapper">
        <div id="hintSection" class="hint">
        </div>
      </div>
      <div id="checkBoxWrapper">
        <div id="acceptCheckBox">
          I accept the terms and conditions
        </div>
      </div>
      <div id="sectionButtonsWrapper">
        <input type="button" value="Next" class="nextButton" id="nextButtonInfo" />
      </div>
    </div>
    <div class="section">
      <div id="products">
      </div>
      <div class="hint" id="hintBasket">
      </div>
      <div class="filterContainer">
        Filter:
        <input class="formInput" type="text" id="filterInput" />
      </div>
      <div id="basketButtonsWrapper">
        <input type="button" value="Back" class="backButton" id="backButtonBasket" />
        <input type="button" value="Next" class="nextButton" id="nextButtonBasket" />
      </div>
    </div>
    <div class="section">
      <div id="selectedProductsHeader">
        <h4>Selected products</h4>
        <div id="orderContainer">
        </div>
      </div>
      <div id="selectedProductsButtonsWrapper">
        <input type="button" value="Back" id="backButtonReview" class="backButton" />
      </div>
    </div>
  </div>
</div>

CSS

#form {
  height: 100px;
  float: left;
  margin-top: 30px;
  margin-left: 20px;
}

.inputContainer {
  width: 150px;
}

.formInput {
  width: 150px;
  outline: none;
}

#hintWrapper {
  height: 130px;
  float: right;
}

#hintSection {
  float: left;
  margin-top: 30px;
  margin-right: 20px;
  padding: 5px;
  width: 225px;
}

#checkBoxWrapper {
  float: left;
  margin-left: 20px;
  margin-top: 30px;
}

#section {
  margin: 5px;
}

#sectionButtonsWrapper {
  float: right;
  margin-top: 30px;
  margin-right: 10px;
  width: 115px;
}

#hintBasket {
  margin-left: 20px;
  margin-top: 7px;
  float: left;
  padding: 5px;
}

.basket div {
  position: relative;
}

.nextButton {
  float: right;
  margin-left: 0px;
}

.backButton {
  float: left;
  margin-left: 10px;
}

#basketButtonsWrapper {
  float: right;
  margin-top: 30px;
  margin-right: 10px;
  width: 115px;
}

#selectedProductsHeader {
  margin-left: 20px;
  float: left;
  width: 200px;
}

#selectedProductsButtonsWrapper {
  float: right;
  margin-right: 10px;
  width: 115px;
  margin-top: 160px;
}

#products {
  border: none;
}

JavaScript

$(document).ready(function() {
  //Creating wizard module
  var wizard = (function() {
    //Adding event listeners
    var _addHandlers = function() {
      $('#usernameInput').keyup(function() {
        wizard.validate(true);
      });
      $('#usernameInput').change(function() {
        wizard.validate(true);
      });
      $('#usernameInput').change(function() {
        wizard.validate(true);
      });
      $('#passwordInput').keyup(function() {
        wizard.validate(true);
      });
      $('.nextButton').click(function() {
        wizard.validate(true);
        $('#jqxTabs').jqxTabs('next');
      });
      $('.backButton').click(function() {
        wizard.validate(true);
        $('#jqxTabs').jqxTabs('previous');
      });
      $('#acceptCheckBox').on('change', function(event) {
        wizard.validate(true);
      });
      $('#products').on('change', function(event) {
        wizard.validate(true);
        var selectedItems = $('#products').jqxListBox('selectedIndexes'),
          count = selectedItems.length;
        $('#orderContainer').children().remove();
        while (count) {
          count--;
          if (typeof selectedItems[count] !== 'undefined' &&
            selectedItems[count] !== -1) {
            $('#orderContainer').prepend('<div style="width: 190px; height: 20px;">' + wizard.config.source[selectedItems[count]].html + '</div>');
          }
        }
      });
      $('#products').on('unselect', function(event) {
        wizard.validate(true);
      });
    };
    //Checking if any product have been selected
    var _isItemSelected = function(array) {
      var count = array.length;
      if (count === 0) {
        return false;
      }
      while (count) {
        count -= 1;
        if (array[count] !== -1 &&
          typeof array[count] !== 'undefined') {
          return true;
        }
      }
      return false;
    };
    return {
      //Listbox's source
      config: {
        source: [{
          html: "<div...