initial commit
This commit is contained in:
333
static/js/examples/examples.wizard.js
Normal file
333
static/js/examples/examples.wizard.js
Normal file
@@ -0,0 +1,333 @@
|
||||
/*
|
||||
Name: Forms / Wizard - Examples
|
||||
Written by: Okler Themes - (http://www.okler.net)
|
||||
Theme Version: 2.1.1
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
Wizard #1
|
||||
*/
|
||||
var $w1finish = $('#w1').find('ul.pager li.finish'),
|
||||
$w1validator = $("#w1 form").validate({
|
||||
highlight: function(element) {
|
||||
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
|
||||
},
|
||||
success: function(element) {
|
||||
$(element).closest('.form-group').removeClass('has-error');
|
||||
$(element).remove();
|
||||
},
|
||||
errorPlacement: function( error, element ) {
|
||||
element.parent().append( error );
|
||||
}
|
||||
});
|
||||
|
||||
$w1finish.on('click', function( ev ) {
|
||||
ev.preventDefault();
|
||||
var validated = $('#w1 form').valid();
|
||||
if ( validated ) {
|
||||
new PNotify({
|
||||
title: 'Congratulations',
|
||||
text: 'You completed the wizard form.',
|
||||
type: 'custom',
|
||||
addclass: 'notification-success',
|
||||
icon: 'fas fa-check'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#w1').bootstrapWizard({
|
||||
tabClass: 'wizard-steps',
|
||||
nextSelector: 'ul.pager li.next',
|
||||
previousSelector: 'ul.pager li.previous',
|
||||
firstSelector: null,
|
||||
lastSelector: null,
|
||||
onNext: function( tab, navigation, index, newindex ) {
|
||||
var validated = $('#w1 form').valid();
|
||||
if( !validated ) {
|
||||
$w1validator.focusInvalid();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
onTabClick: function( tab, navigation, index, newindex ) {
|
||||
if ( newindex == index + 1 ) {
|
||||
return this.onNext( tab, navigation, index, newindex);
|
||||
} else if ( newindex > index + 1 ) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
onTabChange: function( tab, navigation, index, newindex ) {
|
||||
var totalTabs = navigation.find('li').length - 1;
|
||||
$w1finish[ newindex != totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' );
|
||||
$('#w1').find(this.nextSelector)[ newindex == totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' );
|
||||
tab.removeClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
Wizard #2
|
||||
*/
|
||||
var $w2finish = $('#w2').find('ul.pager li.finish'),
|
||||
$w2validator = $("#w2 form").validate({
|
||||
highlight: function(element) {
|
||||
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
|
||||
},
|
||||
success: function(element) {
|
||||
$(element).closest('.form-group').removeClass('has-error');
|
||||
$(element).remove();
|
||||
},
|
||||
errorPlacement: function( error, element ) {
|
||||
element.parent().append( error );
|
||||
}
|
||||
});
|
||||
|
||||
$w2finish.on('click', function( ev ) {
|
||||
ev.preventDefault();
|
||||
var validated = $('#w2 form').valid();
|
||||
if ( validated ) {
|
||||
new PNotify({
|
||||
title: 'Congratulations',
|
||||
text: 'You completed the wizard form.',
|
||||
type: 'custom',
|
||||
addclass: 'notification-success',
|
||||
icon: 'fas fa-check'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#w2').bootstrapWizard({
|
||||
tabClass: 'wizard-steps',
|
||||
nextSelector: 'ul.pager li.next',
|
||||
previousSelector: 'ul.pager li.previous',
|
||||
firstSelector: null,
|
||||
lastSelector: null,
|
||||
onNext: function( tab, navigation, index, newindex ) {
|
||||
var validated = $('#w2 form').valid();
|
||||
if( !validated ) {
|
||||
$w2validator.focusInvalid();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
onTabClick: function( tab, navigation, index, newindex ) {
|
||||
if ( newindex == index + 1 ) {
|
||||
return this.onNext( tab, navigation, index, newindex);
|
||||
} else if ( newindex > index + 1 ) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
onTabChange: function( tab, navigation, index, newindex ) {
|
||||
var totalTabs = navigation.find('li').length - 1;
|
||||
$w2finish[ newindex != totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' );
|
||||
$('#w2').find(this.nextSelector)[ newindex == totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' );
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
Wizard #3
|
||||
*/
|
||||
var $w3finish = $('#w3').find('ul.pager li.finish'),
|
||||
$w3validator = $("#w3 form").validate({
|
||||
highlight: function(element) {
|
||||
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
|
||||
},
|
||||
success: function(element) {
|
||||
$(element).closest('.form-group').removeClass('has-error');
|
||||
$(element).remove();
|
||||
},
|
||||
errorPlacement: function( error, element ) {
|
||||
element.parent().append( error );
|
||||
}
|
||||
});
|
||||
|
||||
$w3finish.on('click', function( ev ) {
|
||||
ev.preventDefault();
|
||||
var validated = $('#w3 form').valid();
|
||||
if ( validated ) {
|
||||
new PNotify({
|
||||
title: 'Congratulations',
|
||||
text: 'You completed the wizard form.',
|
||||
type: 'custom',
|
||||
addclass: 'notification-success',
|
||||
icon: 'fas fa-check'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#w3').bootstrapWizard({
|
||||
tabClass: 'wizard-steps',
|
||||
nextSelector: 'ul.pager li.next',
|
||||
previousSelector: 'ul.pager li.previous',
|
||||
firstSelector: null,
|
||||
lastSelector: null,
|
||||
onNext: function( tab, navigation, index, newindex ) {
|
||||
var validated = $('#w3 form').valid();
|
||||
if( !validated ) {
|
||||
$w3validator.focusInvalid();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
onTabClick: function( tab, navigation, index, newindex ) {
|
||||
if ( newindex == index + 1 ) {
|
||||
return this.onNext( tab, navigation, index, newindex);
|
||||
} else if ( newindex > index + 1 ) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
onTabChange: function( tab, navigation, index, newindex ) {
|
||||
var $total = navigation.find('li').length - 1;
|
||||
$w3finish[ newindex != $total ? 'addClass' : 'removeClass' ]( 'hidden' );
|
||||
$('#w3').find(this.nextSelector)[ newindex == $total ? 'addClass' : 'removeClass' ]( 'hidden' );
|
||||
},
|
||||
onTabShow: function( tab, navigation, index ) {
|
||||
var $total = navigation.find('li').length - 1;
|
||||
var $current = index;
|
||||
var $percent = Math.floor(( $current / $total ) * 100);
|
||||
|
||||
navigation.find('li').removeClass('active');
|
||||
navigation.find('li').eq( $current ).addClass('active');
|
||||
|
||||
$('#w3').find('.progress-indicator').css({ 'width': $percent + '%' });
|
||||
tab.prevAll().addClass('completed');
|
||||
tab.nextAll().removeClass('completed');
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
Wizard #4
|
||||
*/
|
||||
var $w4finish = $('#w4').find('ul.pager li.finish'),
|
||||
$w4validator = $("#w4 form").validate({
|
||||
highlight: function(element) {
|
||||
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
|
||||
},
|
||||
success: function(element) {
|
||||
$(element).closest('.form-group').removeClass('has-error');
|
||||
$(element).remove();
|
||||
},
|
||||
errorPlacement: function( error, element ) {
|
||||
element.parent().append( error );
|
||||
}
|
||||
});
|
||||
|
||||
$w4finish.on('click', function( ev ) {
|
||||
ev.preventDefault();
|
||||
var validated = $('#w4 form').valid();
|
||||
if ( validated ) {
|
||||
new PNotify({
|
||||
title: 'Congratulations',
|
||||
text: 'You completed the wizard form.',
|
||||
type: 'custom',
|
||||
addclass: 'notification-success',
|
||||
icon: 'fas fa-check'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#w4').bootstrapWizard({
|
||||
tabClass: 'wizard-steps',
|
||||
nextSelector: 'ul.pager li.next',
|
||||
previousSelector: 'ul.pager li.previous',
|
||||
firstSelector: null,
|
||||
lastSelector: null,
|
||||
onNext: function( tab, navigation, index, newindex ) {
|
||||
var validated = $('#w4 form').valid();
|
||||
if( !validated ) {
|
||||
$w4validator.focusInvalid();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
onTabClick: function( tab, navigation, index, newindex ) {
|
||||
if ( newindex == index + 1 ) {
|
||||
return this.onNext( tab, navigation, index, newindex);
|
||||
} else if ( newindex > index + 1 ) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
onTabChange: function( tab, navigation, index, newindex ) {
|
||||
var $total = navigation.find('li').length - 1;
|
||||
$w4finish[ newindex != $total ? 'addClass' : 'removeClass' ]( 'hidden' );
|
||||
$('#w4').find(this.nextSelector)[ newindex == $total ? 'addClass' : 'removeClass' ]( 'hidden' );
|
||||
},
|
||||
onTabShow: function( tab, navigation, index ) {
|
||||
var $total = navigation.find('li').length - 1;
|
||||
var $current = index;
|
||||
var $percent = Math.floor(( $current / $total ) * 100);
|
||||
|
||||
navigation.find('li').removeClass('active');
|
||||
navigation.find('li').eq( $current ).addClass('active');
|
||||
|
||||
$('#w4').find('.progress-indicator').css({ 'width': $percent + '%' });
|
||||
tab.prevAll().addClass('completed');
|
||||
tab.nextAll().removeClass('completed');
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
Wizard #5
|
||||
*/
|
||||
var $w5finish = $('#w5').find('ul.pager li.finish'),
|
||||
$w5validator = $("#w5 form").validate({
|
||||
highlight: function(element) {
|
||||
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
|
||||
},
|
||||
success: function(element) {
|
||||
$(element).closest('.form-group').removeClass('has-error');
|
||||
$(element).remove();
|
||||
},
|
||||
errorPlacement: function( error, element ) {
|
||||
element.parent().append( error );
|
||||
}
|
||||
});
|
||||
|
||||
$w5finish.on('click', function( ev ) {
|
||||
ev.preventDefault();
|
||||
var validated = $('#w5 form').valid();
|
||||
if ( validated ) {
|
||||
new PNotify({
|
||||
title: 'Congratulations',
|
||||
text: 'You completed the wizard form.',
|
||||
type: 'custom',
|
||||
addclass: 'notification-success',
|
||||
icon: 'fas fa-check'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#w5').bootstrapWizard({
|
||||
tabClass: 'wizard-steps',
|
||||
nextSelector: 'ul.pager li.next',
|
||||
previousSelector: 'ul.pager li.previous',
|
||||
firstSelector: null,
|
||||
lastSelector: null,
|
||||
onNext: function( tab, navigation, index, newindex ) {
|
||||
var validated = $('#w5 form').valid();
|
||||
if( !validated ) {
|
||||
$w5validator.focusInvalid();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
onTabChange: function( tab, navigation, index, newindex ) {
|
||||
var $total = navigation.find('li').length - 1;
|
||||
$w5finish[ newindex != $total ? 'addClass' : 'removeClass' ]( 'hidden' );
|
||||
$('#w5').find(this.nextSelector)[ newindex == $total ? 'addClass' : 'removeClass' ]( 'hidden' );
|
||||
},
|
||||
onTabShow: function( tab, navigation, index ) {
|
||||
var $total = navigation.find('li').length;
|
||||
var $current = index + 1;
|
||||
var $percent = ( $current / $total ) * 100;
|
||||
$('#w5').find('.progress-bar').css({ 'width': $percent + '%' });
|
||||
}
|
||||
});
|
||||
|
||||
}).apply(this, [jQuery]);
|
||||
Reference in New Issue
Block a user