jQuery Grid toolbar

jQuery Grid toolbar example

by Alpesh Kasodariya

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://yourjavascript.com/420201114311/jquery-steps.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
 <div id="content-container">
            <div class="import_wizard wizard" style="width: 1000px;margin:0 auto;">
                <h2 class="wizard-header">Import Wizard</h2>
                <div id="import_progressbar"><span class="caption">Loading...please wait</span></div>
                <input type="hidden" name="is_default" id="is_default"/>
                <input type="hidden" name="currentStep" id="currentStep" value="1"/>
                <form id="form" method="POST" action="#" role="application" class="import_wizard clearfix" novalidate="novalidate" enctype="multipart/form-data" accept-charset="application/octet-stream" >
                    <div id="wizard">
                        <h2>Step</h2>
                        <section>
                            <div class="wizard-text">Select the type of objects that you wish to import:</div>
                            <div style="width: 220px;margin:0 auto; ">
                              <div id="importObject"></div>
                            </div>
                            <br/>
                            <div class="wizard-text" id="example_csv">Download example CSV file</div>
                        </section>
                        <h2>Step</h2>
                        <section>
                            <div class="wizard-text">Upload Comma Separated Value (CSV) text file:</div>
                            <div style="float: left;padding-left: 350px; ">
                                <div...

CSS

/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

















/* ==========================================================================
   Helper classes
  ...

JavaScript

$("#import_progressbar").progressbar();
                        $("#import_progressbar").children('span.caption').html("Step 1 of 6");              $("#wizard").steps({
                            headerTag: "h2",
                            bodyTag: "section",
                            startIndex:0,
                            onFinishing: function (event, currentIndex) {
                               
                               return true;
                            },
                            onCanceled: function (event) {
                            
                            },
                            onStepChanging:function(event, currentIndex, newIndex){
                                if(currentIndex==1 && newIndex==2){

                                }
                                if(newIndex==4){
                                    
                                }
                                if(newIndex==5){
                                   
                                }

                                return true;
                            },
                            onStepChanged:function (event, currentIndex, priorIndex) {

                                //alert(currentIndex+1);
                                var percent = Math.floor((currentIndex+1) / 6 * 100);
                                if(currentIndex==0){
                                    $("#import_progressbar").progressbar("value",0);
                                }else{
                                    $("#import_progressbar").progressbar("value",percent);
                                }

                                $("#import_progressbar").children('span.caption').html("Step " + (currentIndex+1) + " of 6");
                                $("#currentStep").val(currentIndex+1);
                                if(currentIndex==1){


                                }
                                if(currentIndex==2){
                 ...