在 JSF 中使用带有 JQuery 的向导
Using a wizard with JQuery in JSF
我使用的表单向导有问题。
似乎一切都很好，直到我使用 JSF 标签或更具体地说，bootsfaces。
这是我的向导 HTML 代码和 JQuery 代码：
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist" id="tabs">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="" data-original-title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-user"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="" data-original-title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="" data-original-title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="" data-original-title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form">
<p:growl id="growl" class="growlBack" autoUpdate="true" sticky="true"></p:growl>
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3>Basic Information</h3>
<hr/>
<div class="row">
<div class="col-md-6">
<label>Username</label>
<b:inputText type="text" class="form-control" id="userNameInput" placeholder="Username" required="true"/>
</div>
<div class="col-md-6">
<label>Title</label>
<b:selectOneMenu id="wizTitleList" required="true">
<f:selectItem itemLabel="- Select Title -" itemValue="0" />
<f:selectItems value="#{PopulateFields.titleCodes}" />
</b:selectOneMenu>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>First Name</label>
<b:inputText type="text" class="form-control" id="firstNameInput" placeholder="First Name" required="true"/>
</div>
<div class="col-md-6">
<label>Last Name</label>
<b:inputText type="text" class="form-control" id="lastNameInput" placeholder="Last Name" required="true"/>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Previous Last Name</label>
<b:inputText type="text" class="form-control" id="previousLastNameInput" placeholder="Previous Last Name" required="true"/>
</div>
<div class="col-md-6">
<label>Birth Date</label>
<b:inputText type="date" class="form-control" id="birthDateInput" placeholder="Birth Date" required="true"/>
</div>
<div class="col-md-6">
<label>Gender</label>
<b:selectOneMenu id="wizGenderList" required="true">
<f:selectItem itemLabel="- Select Gender -" itemValue="0" />
<f:selectItems value="#{PopulateFields.genders}" />
</b:selectOneMenu>
</div>
<div class="col-md-6">
<label>ID Type</label>
<b:selectOneMenu id="wizIDTypesList" required="true">
<f:selectItem itemLabel="- Select ID Type -" itemValue="0" />
<f:selectItems value="#{PopulateFields.idTypes}" />
</b:selectOneMenu>
</div>
<div class="col-md-6">
<label>ID Number</label>
<b:inputText type="text" class="form-control" id="idNumberInput" placeholder="ID " required="true"/>
</div>
</div>
<hr/>
<ul class="list-inline pull-right">
<li><b:button class="btn btn-primary next-step" value="Save and continue"></b:button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Step 2</h3>
<p>This is step 2</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h3>Step 3</h3>
<p>This is step 3</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step">Skip</button></li>
<li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Complete</h3>
<p>You have successfully completed all steps.</p>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
这是我的 JQuery:
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
仅当我删除任何 bootsfaces 标签时，下一个和上一个按钮才有效。
我读到 JSF 组件添加了引用时需要使用的 ID，但我不确定这是否是问题所在，如果是的话，我们将不胜感激。
我无法在您发布的代码片段中发现任何错误，所以错误可能出在代码片段之外。通常。当 JavaScript 库出现问题时会出现这些错误。请检查
- 如果您的浏览器开发人员工具的错误控制台中出现错误消息（Windows 上为 F12，OSX 上为 CMD+ALT+I）。
- 如果 jQuery 被多次加载（来自不同的文件夹，可能具有不同的名称或版本）
- 如果时间有问题（您的向导已初始化，但太早，或者 - 如果 jQuery 加载两次 - 在 jQuery 第二次初始化之前）。
希望对您有所帮助！
顺便说一句，BootsFaces showcase 展示了如何使用 BootsFaces <b:carousel> 作为向导。也许这是一个有趣的选择。
我使用的表单向导有问题。
似乎一切都很好，直到我使用 JSF 标签或更具体地说，bootsfaces。
这是我的向导 HTML 代码和 JQuery 代码：
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist" id="tabs">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="" data-original-title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-user"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="" data-original-title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="" data-original-title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="" data-original-title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form">
<p:growl id="growl" class="growlBack" autoUpdate="true" sticky="true"></p:growl>
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3>Basic Information</h3>
<hr/>
<div class="row">
<div class="col-md-6">
<label>Username</label>
<b:inputText type="text" class="form-control" id="userNameInput" placeholder="Username" required="true"/>
</div>
<div class="col-md-6">
<label>Title</label>
<b:selectOneMenu id="wizTitleList" required="true">
<f:selectItem itemLabel="- Select Title -" itemValue="0" />
<f:selectItems value="#{PopulateFields.titleCodes}" />
</b:selectOneMenu>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>First Name</label>
<b:inputText type="text" class="form-control" id="firstNameInput" placeholder="First Name" required="true"/>
</div>
<div class="col-md-6">
<label>Last Name</label>
<b:inputText type="text" class="form-control" id="lastNameInput" placeholder="Last Name" required="true"/>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Previous Last Name</label>
<b:inputText type="text" class="form-control" id="previousLastNameInput" placeholder="Previous Last Name" required="true"/>
</div>
<div class="col-md-6">
<label>Birth Date</label>
<b:inputText type="date" class="form-control" id="birthDateInput" placeholder="Birth Date" required="true"/>
</div>
<div class="col-md-6">
<label>Gender</label>
<b:selectOneMenu id="wizGenderList" required="true">
<f:selectItem itemLabel="- Select Gender -" itemValue="0" />
<f:selectItems value="#{PopulateFields.genders}" />
</b:selectOneMenu>
</div>
<div class="col-md-6">
<label>ID Type</label>
<b:selectOneMenu id="wizIDTypesList" required="true">
<f:selectItem itemLabel="- Select ID Type -" itemValue="0" />
<f:selectItems value="#{PopulateFields.idTypes}" />
</b:selectOneMenu>
</div>
<div class="col-md-6">
<label>ID Number</label>
<b:inputText type="text" class="form-control" id="idNumberInput" placeholder="ID " required="true"/>
</div>
</div>
<hr/>
<ul class="list-inline pull-right">
<li><b:button class="btn btn-primary next-step" value="Save and continue"></b:button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Step 2</h3>
<p>This is step 2</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h3>Step 3</h3>
<p>This is step 3</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step">Skip</button></li>
<li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Complete</h3>
<p>You have successfully completed all steps.</p>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
这是我的 JQuery:
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
仅当我删除任何 bootsfaces 标签时，下一个和上一个按钮才有效。
我读到 JSF 组件添加了引用时需要使用的 ID，但我不确定这是否是问题所在，如果是的话，我们将不胜感激。
我无法在您发布的代码片段中发现任何错误，所以错误可能出在代码片段之外。通常。当 JavaScript 库出现问题时会出现这些错误。请检查
- 如果您的浏览器开发人员工具的错误控制台中出现错误消息（Windows 上为 F12，OSX 上为 CMD+ALT+I）。
- 如果 jQuery 被多次加载（来自不同的文件夹，可能具有不同的名称或版本）
- 如果时间有问题（您的向导已初始化，但太早，或者 - 如果 jQuery 加载两次 - 在 jQuery 第二次初始化之前）。
希望对您有所帮助！
顺便说一句，BootsFaces showcase 展示了如何使用 BootsFaces <b:carousel> 作为向导。也许这是一个有趣的选择。