- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 jquery、bootstrapWizard 插件将标准表单转换为向导。我已经完成了这个工作,但在重写表单并更新 jquery 和相关脚本时,我损坏了表单,并且看不出出了什么问题。
我使用的是引导版本 3.1.1。 jQuery 2.01我的表单有 4 个选项卡,外观设置正确。我可以使用表单顶部的导航按钮导航到每个选项卡,但是我无法使用下一个按钮导航到第二页之外。
我最初认为是验证导致了问题,因此暂时删除了验证脚本,但问题仍然出现。
使用按钮导航时,最终提交按钮不会出现。我不确定我的 html 是否有问题 - 尽管我使用了标准设置,或者是插件脚本还是我的设置脚本。
我会设置一个 fiddle ,但之前有人遇到过这个问题
这是基本向导 html:
<form action="dummy">
<div class="wizard-form">
<div class="wizard-content">
<ul class="nav nav-pills nav-justified steps">
<li>
<a href="#step1" data-toggle="tab" class="wiz-step active">
<span class="step-number">1</span>
<span class="step-name">
<i class="fa fa-check"></i>
Article Details
</span>
</a>
</li>
<li>
<a href="#step2" data-toggle="tab" class="wiz-step">
<span class="step-number">2</span>
<span class="step-name">
<i class="fa fa-check"></i>
Article Content
</span>
</a>
</li>
<li>
<a href="#step3" data-toggle="tab" class="wiz-step">
<span class="step-number">3</span>
<span class="step-name">
<i class="fa fa-check"></i>
Images and Files
</span>
</a>
</li>
<li>
<a href="#step4" data-toggle="tab" class="wiz-step">
<span class="step-number">4</span>
<span class="step-name">
<i class="fa fa-check"></i>
Attributes and Submit
</span>
</a>
</li>
</ul>
<div id="bar" class="progress progress-striped progress-sm active" role="progressbar">
<div class="progress-bar progress-bar-warning"></div>
</div>
<div class="tab-content">
<div class="alert alert-danger display-none">
<a class="close" aria-hidden="true" href="#" data-dismiss="alert">×</a>
Your article has errors. Please correct them to proceed.
</div>
<div class="alert alert-success display-none">
<a class="close" aria-hidden="true" href="#" data-dismiss="alert">×</a>
Your form validation is successful!
</div>
<!-- TAB PANE 1 -->
<div class="tab-pane active" id="step1">
<p>Tab 1</p>
</div>
<!-- TAB PANE 2 -->
<div class="tab-pane" id="step2">
<p>Tab 2</p>
</div>
<!-- TAB PANE 3 -->
<div class="tab-pane" id="step3">
<p>Tab 3</p>
</div>
<!-- TAB PANE 4 -->
<div class="tab-pane" id="step4">
<p>Tab 4</p>
</div>
</div>
</div>
</div>
<div class="wizard-buttons">
<div class="row">
<div class="col-md-12">
<div class="col-md-offset-3 col-md-9">
<a href="javascript:;" class="btn btn-default prevBtn">
<i class="fa fa-arrow-circle-left"></i>
Back
</a>
<a href="javascript:;" class="btn btn-primary nextBtn">
Continue
<i class="fa fa-arrow-circle-right"></i>
</a>
<a href="javascript:;" class="btn btn-success submitBtn">
Submit
<i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</form>
这是向导脚本:
var FormWizard = function() {
console.log("setting up form");
return {
init: function() {
if (!jQuery().bootstrapWizard) {
return;
}
var wizform = $('#myForm');
var alert_success = $('.alert-success', wizform);
var alert_error = $('.alert-danger', wizform);
/*-----------------------------------------------------------------------------------*/
/* Initialize Bootstrap Wizard
/*-----------------------------------------------------------------------------------*/
$('#formWizard').bootstrapWizard({
'nextSelector': '.nextBtn',
'previousSelector': '.prevBtn',
onNext: function(tab, navigation, index) {
alert_success.hide();
alert_error.hide();
var total = navigation.find('li').length;
console.log("Total:", total);
var current = index + 1;
console.log("current:", current)
$('.stepHeader', $('#formWizard')).text('Step ' + (index + 1) + ' of ' + total);
jQuery('li', $('#formWizard')).removeClass("done");
var li_list = navigation.find('li');
for (var i = 0; i < index; i++) {
jQuery(li_list[i]).addClass("done");
}
if (current == 1) {
$('#formWizard').find('.prevBtn').hide();
} else {
$('#formWizard').find('.prevBtn').show();
}
if (current >= total) {
$('#formWizard').find('.nextBtn').hide();
$('#formWizard').find('.submitBtn').show();
} else {
$('#formWizard').find('.nextBtn').show();
$('#formWizard').find('.submitBtn').hide();
}
},
onPrevious: function(tab, navigation, index) {
alert_success.hide();
alert_error.hide();
var total = navigation.find('li').length;
var current = index + 1;
$('.stepHeader', $('#formWizard')).text('Step ' + (index + 1) + ' of ' + total);
jQuery('li', $('#formWizard')).removeClass("done");
var li_list = navigation.find('li');
for (var i = 0; i < index; i++) {
jQuery(li_list[i]).addClass("done");
}
if (current == 1) {
$('#formWizard').find('.prevBtn').hide();
} else {
$('#formWizard').find('.prevBtn').show();
}
if (current >= total) {
$('#formWizard').find('.nextBtn').hide();
$('#formWizard').find('.submitBtn').show();
} else {
$('#formWizard').find('.nextBtn').show();
$('#formWizard').find('.submitBtn').hide();
}
},
onTabClick: function(tab, navigation, index) {
bootbox.alert('On Tab click is disabled');
return false;
},
onTabShow: function(tab, navigation, index) {
var total = navigation.find('li').length;
var current = index + 1;
var $percent = (current / total) * 100;
$('#formWizard').find('.progress-bar').css({
width: $percent + '%'
});
}
});
$('#formWizard').find('.prevBtn').hide();
}
};
更新:我添加了几个 console.logs 来获取索引等,按照下面放置在 onNext 事件中的问题。第一次单击后,索引显示为 1,这是正确的,但不会进一步增加。
我刚刚意识到后退按钮也不起作用。所以它到达选项卡 2(索引 1)并卡住
最佳答案
设法让它为您工作:Fiddle
您需要将 id formWizard
添加到您的表单中,如下所示:
<form action="dummy" id="formWizard">
然后改变你的 JS 使其有意义,如下所示:
var FormWizard = function () {
console.log("setting up form");
var wizform = $('#myForm');
var alert_success = $('.alert-success', wizform);
var alert_error = $('.alert-danger', wizform);
/*-----------------------------------------------------------------------------------*/
/* Initialize Bootstrap Wizard
/*-----------------------------------------------------------------------------------*/
$('#formWizard').bootstrapWizard({
'nextSelector': '.nextBtn',
'previousSelector': '.prevBtn',
onNext: function (tab, navigation, index) {
alert_success.hide();
alert_error.hide();
var total = navigation.find('li').length;
console.log("Total:", total);
var current = index + 1;
console.log("current:", current)
$('.stepHeader', $('#formWizard')).text('Step ' + (index + 1) + ' of ' + total);
jQuery('li', $('#formWizard')).removeClass("done");
var li_list = navigation.find('li');
for (var i = 0; i < index; i++) {
jQuery(li_list[i]).addClass("done");
}
if (current == 1) {
$('#formWizard').find('.prevBtn').hide();
} else {
$('#formWizard').find('.prevBtn').show();
}
if (current >= total) {
$('#formWizard').find('.nextBtn').hide();
$('#formWizard').find('.submitBtn').show();
} else {
$('#formWizard').find('.nextBtn').show();
$('#formWizard').find('.submitBtn').hide();
}
},
onPrevious: function (tab, navigation, index) {
alert_success.hide();
alert_error.hide();
var total = navigation.find('li').length;
var current = index + 1;
$('.stepHeader', $('#formWizard')).text('Step ' + (index + 1) + ' of ' + total);
jQuery('li', $('#formWizard')).removeClass("done");
var li_list = navigation.find('li');
for (var i = 0; i < index; i++) {
jQuery(li_list[i]).addClass("done");
}
if (current == 1) {
$('#formWizard').find('.prevBtn').hide();
} else {
$('#formWizard').find('.prevBtn').show();
}
if (current >= total) {
$('#formWizard').find('.nextBtn').hide();
$('#formWizard').find('.submitBtn').show();
} else {
$('#formWizard').find('.nextBtn').show();
$('#formWizard').find('.submitBtn').hide();
}
},
onTabClick: function (tab, navigation, index) {
bootbox.alert('On Tab click is disabled');
return false;
},
onTabShow: function (tab, navigation, index) {
var total = navigation.find('li').length;
var current = index + 1;
var $percent = (current / total) * 100;
$('#formWizard').find('.progress-bar').css({
width: $percent + '%'
});
}
});
$('#formWizard').find('.prevBtn').hide();
};
$(document).ready(function() {
FormWizard();
});
关于jquery - 引导向导无法加载剩余选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22082550/
我正在实现 WPF MVVM 向导,我想知道执行 DoOperation 的正确方法当加载新的向导页面 (UserControl) 时。 DoOperation在 MyWizard.ViewModal
我有一个场景,我正在尝试计划开始编码,并且我正在考虑使用django向导。 我的计划是通过两个步骤构建一个 django 向导,第一个简单,但第二个有点复杂。第二步将包含一个表单,该表单将根据第一步选
我想看看这些是否“建立了……” Flash网站(以支持用户定制的订购过程)是使用常规Flash还是Flex完成的? Site 1 Site 2 Site 3 Site 4 所有这些都可以通过定制的订购
我在人们提交一些数据的表单上使用了 FuelUX 向导,我们希望将其分解为逻辑步骤。效果非常好。 现在我正在处理相同表单的编辑版本,它工作正常,但由于步骤已经加载了数据,我希望用户能够直接跳到步骤 X
我有一个足够大的模型,可以切割成 3 种形式。我想使用 FormWizzard 来做到这一点,但我想知道,如何将表单中的信息保存到数据库? 所有东西都来自同一个模型。 你知道如何做到这一点吗? 最佳答
我使用 Primefaces 3.5。并尝试在的onnext处理程序中调用js函数。我希望在当前选项卡验证结果后,onnext 返回特定选项卡上的选项卡。我的验证函数 function val
我在我的应用程序中实现了向导 Bootstrap 。 我想检索当前选项卡的索引来测试显示或隐藏按钮“下一个”“上一个” $('#rootwizard').bootstrapWizard({ '
我想创建一个基于终端的安装程序/向导。 理想情况下,它就像 Ubuntu 服务器安装程序或 Arch Linux 安装程序——一个 ncurses (?) 重的 GUI,具有很多形式和箭头键优点。 其
问题 我的 WizardPage 中有一个 Composite,如果该 Composite 比向导窗口大,我想向其中添加滚动条,但到目前为止我尝试过的方法都不起作用。有人知道如何添加滚动条吗? 我想将
我正在尝试制作一个引导步骤表单,但它不想工作。我正在使用这段代码: https://codepen.io/digitalavinash/pen/VjyAXx?fbclid=IwAR2j8hRIG0gn
我目前正在开发一个网站(与健身相关),客户想要做一个功能,允许用户根据您从类似于 this example 上的 slider 中选择的选项来选择锻炼计划。 . 我想知道这是否可以用 CSS 完成,或
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 6 年前。 Improve
这应该很简单,但我错过了。我试图通过在我的 stylesheet.css 中使用此 css 将文本居中放置在我的向导 h1 标签中 .h1textalign { text-align:center;
我已经在这里问过这个问题 Creating next and back button on tabs bootstrap 3 wizard? 但我现在已经扩展它以在最后一个选项卡上添加完成,但现在我在
摩尔庄园手游已经上线好几天了,身边不少小伙伴也都开始玩了,不过其中的还是有不少的玩法等待大家去解锁,比如大家知道怎么去传送好友,蘑菇吗?向导怎么传送呢?有哪些方法和技巧?下面就和小编一起来看看。
每次我在我的 Android Studio 中为该项目创建一个新 fragment 时,它都会创建 android.support.v4.app.Fragment ,这不是我想要的。此外,它总是会触发
我正在为我的公司项目使用 SAPUI5 向导,但由于某种原因它对我不起作用。 这是我的代码: var allSteps = oWizardElement.getSteps(); var stepOne
在扩展中,我希望能够修改现有链接。数据库中的相应字段可能包含多个链接(例如 tt_content.bodytext)。 我想尽可能多地重用现有的功能。所以我想使用已经存在的链接向导。 我找到的是现有路
长话短说,我有一个开发人员让我成为一名向导,即使我付了钱给他,他也没有在没有回复的情况下离开,并坚持使用一个半工作的Python向导。 该向导在 Kodi 内部运行,下载并解压 zip 文件。但有时我
我对 Fuel UX 向导有疑问。当我按下 fuel ux 向导上的下一步按钮时,我发送使用 validate_step(step) 选择的 category_id 并使用来自 php 的 json
我是一名优秀的程序员,十分优秀!