jQuery.noConflict()
function formtowizard(options){
this.setting=jQuery.extend({persistsection:true, revealfx:['slide', 700], oninit:function(){}, onpagechangestart:function(){}}, options)
this.currentsection=-1
this.init(this.setting)
}
formtowizard.prototype={
createfieldsets:function($theform, arr){ //reserved function for future version (dynamically wraps form elements with a fieldset element)
$theform.find('fieldset.sectionwrap').removeClass('sectionwrap') //make sure no fieldsets carry 'sectionwrap' before proceeding
var $startelement=$theform.find(':first-child') //reference first element inside form
for (var i=0; i') //wrap these elements with fieldset element
$startelement=$theform.find('fieldset.sectionwrap').eq(i).prepend('').next() //increment startelement to begin at the end of the just inserted fieldset element
}
},
loadsection:function(rawi, isinit){
var thiswizard=this
//doload Boolean checks to see whether to load next section (true if isinit param is true or onpagechangestart() event handler doesn't return false)
var doload=isinit || this.setting.onpagechangestart(jQuery, this.currentsection, this.sections.$sections.eq(this.currentsection))
doload=(doload===false)? false : true //unless doload is explicitly false, set to true
var i=(rawi=="prev")? this.currentsection-1 : (rawi=="next")? this.currentsection+1 : parseInt(rawi) //get index of next section to show
i=(i<0)? this.sections.count-1 : (i>this.sections.count-1)? 0 : i //make sure i doesn't exceed min/max limit
if (this.currentsection!=i && i0)
thiswizard.createfieldsets($theform, setting.manualfieldsets)
var $stepsguide=$('') //create Steps Container to house the "steps" text
var $sections=$theform.find('fieldset.sectionwrap').hide() //find all fieldset elements within form and hide them initially
if (setting.revealfx[0]=="slide"){ //create outer DIV that will house all the fieldset.sectionwrap elements
$sectionswrapper=$('').insertBefore($sections.eq(0)) //add DIV above the first fieldset.sectionwrap element
$sectionswrapper_inner=$('') //create inner DIV of $sectionswrapper that will scroll to reveal a fieldset element
}
var maxfieldsetwidth=$sections.eq(0).outerWidth() //variable to get width of widest fieldset.sectionwrap
$sections.slice(1).each(function(i){ //loop through $sections (starting from 2nd one)
maxfieldsetwidth=Math.max($(this).outerWidth(), maxfieldsetwidth)
})
maxfieldsetwidth+=2 //add 2px to final width to reveal fieldset border (if not removed via CSS)
thiswizard.maxfieldsetwidth=maxfieldsetwidth
$sections.each(function(i){ //loop through $sections again
if (setting.revealfx[0]=="slide"){
$(this).data('page', i).css({position:'absolute', top:0, left:maxfieldsetwidth*i}).appendTo($sectionswrapper_inner) //set fieldset position to "absolute" and move it to inside sectionswrapper_inner DIV
}
//create each "step" DIV and add it to main Steps Container:
var $thestep=$('').data('section', i).html('Bước '+(i+1)+''+$(this).find('legend:eq(0)').text()+'
').appendTo($stepsguide)
$thestep.click(function(){ //assign behavior to each step div
thiswizard.loadsection($(this).data('section'))
})
})
if (setting.revealfx[0]=="slide"){
$sectionswrapper.width(maxfieldsetwidth) //set fieldset wrapper to width of widest fieldset
$sectionswrapper.append($sectionswrapper_inner) //add $sectionswrapper_inner as a child of $sectionswrapper
}
$theform.prepend($stepsguide) //add Steps Container to beginning of form
var $thesteps=$stepsguide.find('div.step')
//create pagination DIV and add it to end of form:
var $paginatediv=$('Quay lại Step 1 of Tiếp theo
')
$theform.append($paginatediv)
thiswizard.$theform=$theform
if (setting.revealfx[0]=="slide"){
thiswizard.sections={$outerwrapper:$sectionswrapper, $innerwrapper:$sectionswrapper_inner, $sections:$sections, count:$sections.length} //remember various parts of section container
thiswizard.sections.$sections.show()
}
else{
thiswizard.sections={$sections:$sections, count:$sections.length} //remember various parts of section container
}
thiswizard.$thesteps=$thesteps //remember this ref
thiswizard.paginatediv={$main:$paginatediv, $navlinks:$paginatediv.find('span.prev, span.next'), $status:$paginatediv.find('span.status')} //remember various parts of pagination DIV
thiswizard.paginatediv.$main.click(function(e){ //assign behavior to pagination buttons
if (/(prev)|(next)/.test(e.target.className))
thiswizard.loadsection(e.target.className)
})
var i=(setting.persistsection)? formtowizard.routines.getCookie(setting.formid+"_persist") : 0
thiswizard.loadsection(i||0, true) //show the first section
thiswizard.setting.oninit($, i, $sections.eq(i)) //call oninit event handler
})
}
}
formtowizard.routines={
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value){
document.cookie = name+"=" + value + ";path=/"
}
}