在Fancy滑动表单中添加更多选项卡 [英] Add more tabs in Fancy sliding form
本文介绍了在Fancy滑动表单中添加更多选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是asp.net开发者并制作页面。
我在一个页面中使用了一个花式滑动表单。我在Jquery和Css代码方面不是很好。
使用jQuery 花式滑动表单 [ ^ ]
在本教程的演示中只有5个标签，我想再添加10个tabs.Please任何正文给我解决方案。
我的Jquery代码如下。
$（ function （）{
var fieldsetCount = $（' ＃formElem'）。children（）。length;
var current = 1 ;
var stepsWidth = 0 ;
var widths = new Array （）;
$（' ＃steps .step'）。each（ function （i）{
var $ step = $（ this ）;
widths [i] = stepsWidth;
stepsWidth + = $ step.width（）;
$（' ＃step'）。CSS （' height'，' 自动'）;
}）;
$（' ＃step'）。width（stepsWidth）;
$（' ＃pd'）。click（ function （）{
$（' ＃step'）。css（' height'，' auto'）;
}）;
/ * 所有输入字段* /
$（' input，textarea'）。blur（ function （）{
var name = $（ this ）。attr（ ' ID'）+ _ li;
name = $（ ＃ + name.substring（ 26 ））;
if （$（< span class =code-keyword> this ）。val（）== ）{
name.css（' list-style'，' u rl（../ images / cross.png）在'）内;
} else {
name.css（' list-style'，' url（../ images / tick.png）里面）;
}
}）;
$（' 。selectBox ul li'）。click（ function （）{
alert（ abc）;
// var name = $（this） .attr（'ID'）+_ li;
// name = $（ ＃+ name.substring（26））;
// if（$（这个）.val（）==）{
// name.css（ 'list-style'，'url（../ images / cross.png）里面'）;
// } else {
// name.css（'list- style'，'url（../ images / tick.png）in'）;
// }
}）;
$（' ＃formElem' ）.children（' ：first'）。find（ ' 。city'）。focus（）;
$（' ＃navigation'）。show（）;
$（' ＃navigation a'）。bind（' 点击'，功能（e）{
var $ this = $（ this ）;
var prev = current;
$ this.closest（' ul'）。find（' li'）。removeClass（' selected'）;
$ this.parent（）。addClass（' selected'）;
current = $ this.parent（）。index（）+ 1 ;
$（' ＃steps'） .stop（）。animate（{
marginLeft：' - ' + widths [current-1] * 1 。 027 + ' px'
}， 500 ， function （）{
if （current == fieldsetCount）
validateSteps（）;
else
validateStep（prev）;
$（' ＃formElem'）。children（' ：nth-child（' + parseInt （当前）+ ' ）'）。find（' ：输入：第一'）聚焦（）;
}）;
e.preventDefault（）;
}）;
$（' 。next'）。bind（ 点击， function （e）{
var $ this = $（ this ）;
var prev = current;
$（' ＃navigation ul li .selected'）。next（）。addClass（' selected'）;
$（' ＃navigation ul li.selected'）。prev（）。removeClass（' selected'）;
/ / $ this.parent（）。addClass（'selected'）;
current = $（' ＃navigation ul li.selected'）。index（）+ 1 ;
$（' ＃steps'）。stop（ ）.animate（{marginLeft：' - ' + widths [current-1] * 1 。 027 + ' px'}， 500 ， function （）{
if （current == fieldsetCount）
validateSteps（）;
else
validateStep（prev）;
$（' ＃formElem'）。children（' ：nth-child（' + parseInt （当前）+ ' ）'）。find（' <跨度类= 代码串>：输入：第一'）聚焦（）;
}）;
e.preventDefault（）;
}）;
$（' 。prev'）。bind（ 点击， function （e）{
var $ this = $（ this ）;
var prev = current;
$（' ＃navigation ul li .selected'）。prev（）。addClass（' selected'）;
$（' ＃navigation ul li.selected'）。next（）。removeClass（' selected'）;
/ / $ this.parent（）。addClass（'selected'）;
current = $（' ＃navigation ul li.selected'）。index（） - 1 ;
$（' ＃steps'）。stop（ ）.animate（{marginLeft：' - ' + widths [current + 1] * 1 。 027 + ' px'}， 500 ， function （）{
if （current == fieldsetCount）
validateSteps（）;
else
validateStep（prev）;
$（' ＃formElem'）。children（' ：nth-child（' + parseInt （当前）+ ' ）'）。find（' <跨度类= 代码串>：输入：第一'）聚焦（）;
}）;
e.preventDefault（）;
}）;
/ *
点击标签（在每个字段集的最后一个输入上） ），使表格
滑动到下一步
* /
$（' ＃formElem& gt; fieldset'）。each（ function （）{
var $ fieldset = $（ this ）;
$ fieldset.children（' ：last'）。find（' ：input'）。keydown（ function （e）{
if （e.which == 9 ）{
$（' ＃navigation li：nth-child（' +（ parseInt （当前）+1）+ ' <跨度class =code-string>）a'）。click（）;
/ * 强制模糊验证* /
$（此）模糊（）;
e.preventDefault（）;
}
}）;
}）;
/ *
验证所有字段集的错误
记录是否表格在$（'＃formElem'）中有错误.data（）
* /
function validateSteps（）{
var FormErrors = false ;
for （ var i = 1 ; i& lt; fieldsetCount; ++ i）{
var error = validateStep（i）;
if （error == -1）
FormErrors = true ;
}
$（' ＃formElem'）。data（' errors'，FormErrors）;
}
/ *
验证一个字段集
如果发现错误则返回-1，如果不是
* /
则返回1 类别 validateStep（步骤）{
if （step == fieldsetCount） return ;
var error = 1 ;
var hasError = false ;
$（' ＃formElem'）。children（' ：nth-child（' + parseInt （步骤）+ ' ）'）。find（' ：input：not（button）'）。each（ function （）{
var $ this = $（ this ）;
var valueLength = jQuery.trim（$ this.val（））。length;
if （valueLength == ' '）{
hasError = true ;
$ this.css（' background-color'，' #FFEDEF'）;
}
else
$ this.css（' background-color'，' ＃FFFFFF'< /跨度>）;
// $ this.css（'list-style'，'url（images / tick.png）在'）;
}）;
var $ link = $（' ＃导航li：nth-child（' + parseInt （步骤）+ ' ）a'）;
$ link.parent（）。find（' 。error，.checked'）。去掉（）;
var valclass = ' 检查;
if （hasError）{
error = -1;
valclass = ' error';
}
$（' & lt; span class =' + valclass + ' & gt;& lt; / span& gt;'）。insertAfter（$链接）;
return 错误;
}
/ *
如果有错误则不允许用户提交
* /
$（' ＃registerButton').bind(' 点击'，功能（）{
if （$（' ＃formElem'）。data（' errors'））{
alert（' 请更正表单'中的错误）;
return false ;
}
}）;
}）;
解决方案
（ function （）{
var fieldsetCount =
（' ＃formElem'）。children（）。length;
var current = 1 ;
var stepsWidth = 0 ;
var widths = new 数组（）;
（' ＃steps .step '）。each（ function （i）{
var
I'm asp.net Developer and making a page .
I am use a Fancy sliding form in one page . I'm not very good in Jquery and Css code.
Fancy Sliding Form with jQuery[^]
in demo of this tutorials there are only 5 tabs,I want add 10 more tabs.Please any body give me solution.
My Jquery code is below .
$(function() {
var fieldsetCount = $('#formElem').children().length;
var current = 1;
var stepsWidth = 0;
var widths = new Array();
$('#steps .step').each(function(i){
var $step = $(this);
widths[i] = stepsWidth;
stepsWidth += $step.width();
$('#step').css('height','auto');
});
$('#step').width(stepsWidth);
$('#pd').click(function(){
$('#step').css('height','auto');
});
/* All Input field */
$('input, textarea').blur(function(){
var name = $(this).attr('ID') + "_li";
name = $("#" + name.substring(26));
if($(this).val() == ""){
name.css('list-style', 'url(../images/cross.png) inside');
}else{
name.css('list-style', 'url(../images/tick.png) inside');
}
});
$('.selectBox ul li').click(function(){
alert("abc");
// var name = $(this).attr('ID') + "_li";
// name = $("#" + name.substring(26));
// if($(this).val() == ""){
// name.css('list-style','url(../images/cross.png) inside');
// }else{
// name.css('list-style','url(../images/tick.png) inside');
// }
});
$('#formElem').children(':first').find('.city').focus();
$('#navigation').show();
$('#navigation a').bind('click',function(e){
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
current = $this.parent().index() + 1;
$('#steps').stop().animate({
marginLeft: '-' + widths[current-1]* 1.027 + 'px'
},500,function(){
if(current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();
});
e.preventDefault();
});
$('.next').bind('click',function(e){
var $this = $(this);
var prev = current;
$('#navigation ul li.selected').next().addClass('selected');
$('#navigation ul li.selected').prev().removeClass('selected');
//$this.parent().addClass('selected');
current = $('#navigation ul li.selected').index() + 1;
$('#steps').stop().animate({ marginLeft: '-' + widths[current-1]* 1.027 + 'px' }, 500, function(){
if(current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();
});
e.preventDefault();
});
$('.prev').bind('click',function(e){
var $this = $(this);
var prev = current;
$('#navigation ul li.selected').prev().addClass('selected');
$('#navigation ul li.selected').next().removeClass('selected');
//$this.parent().addClass('selected');
current = $('#navigation ul li.selected').index() - 1;
$('#steps').stop().animate({ marginLeft: '-' + widths[current+1]* 1.027 + 'px' }, 500, function(){
if(current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();
});
e.preventDefault();
});
/*
clicking on the tab (on the last input of each fieldset), makes the form
slide to the next step
*/
$('#formElem > fieldset').each(function(){
var $fieldset = $(this);
$fieldset.children(':last').find(':input').keydown(function(e){
if (e.which == 9){
$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
/* force the blur for validation */
$(this).blur();
e.preventDefault();
}
});
});
/*
validates errors on all the fieldsets
records if the Form has errors in $('#formElem').data()
*/
function validateSteps(){
var FormErrors = false;
for(var i = 1; i < fieldsetCount; ++i){
var error = validateStep(i);
if(error == -1)
FormErrors = true;
}
$('#formElem').data('errors',FormErrors);
}
/*
validates one fieldset
and returns -1 if errors found, or 1 if not
*/
function validateStep(step){
if(step == fieldsetCount) return;
var error = 1;
var hasError = false;
$('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){
var $this = $(this);
var valueLength = jQuery.trim($this.val()).length;
if(valueLength == ''){
hasError = true;
$this.css('background-color','#FFEDEF');
}
else
$this.css('background-color','#FFFFFF');
//$this.css('list-style','url(images/tick.png) inside');
});
var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
$link.parent().find('.error,.checked').remove();
var valclass = 'checked';
if(hasError){
error = -1;
valclass = 'error';
}
$('<span class="'+valclass+'"></span>').insertAfter($link);
return error;
}
/*
if there are errors don't allow the user to submit
*/
$('#registerButton').bind('click',function(){
if($('#formElem').data('errors')){
alert('Please correct the errors in the Form');
return false;
}
});
}); 解决方案
(function() { var fieldsetCount =
('#formElem').children().length; var current = 1; var stepsWidth = 0; var widths = new Array();
('#steps .step').each(function(i){ var
这篇关于在Fancy滑动表单中添加更多选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
