jQuery Accordion, 다음 및 이전 마법사, 이전 및 다음 섹션을 얻는 방법은 무엇입니까?
-
07-07-2019 - |
문제
나는 잘 작동하는 jQuery 아코디언이 있습니다. 각 헤더를 클릭하면 섹션이 확장/붕괴됩니다. 그러나 "다음"버튼을 클릭하면 다음 섹션이 열리고 "이전"버튼을 클릭하면 이전 섹션으로 돌아갑니다.
이것은이 페이지에서 수행되었습니다 http://jquery.bassistance.de/accordion/demo/?p=1.1.2 (마지막 예) 그러나 내 경우에는 어떻게 동일하게 구현합니까?
모든 제안은 제발.
감사
업데이트 : 아코디언의 이전 또는 다음 섹션을 어떻게 얻습니까?
<script type="text/javascript">
$("#accordion").accordion({
header: "h3.header"
, autoHeight: false
, collapsible: true
});
</script>
<div id="accordion">
<h3 class="header">Section 1</h3>
<div> content 1 .. content 1 .. content 1 .. content 1 ..
<input class="next" type="button" value="next"/>
</div>
<h3 class="header">Section 2</h3>
<div> content 2 .. content 2 .. content 2 .. content 2 ..
<input class="previous" type="button" value="previous"/>
<input class="next" type="button" value="next"/>
</div>
<h3 class="header">Section 3</h3>
<div> content 3 .. content 3 .. content 3 .. content 3 ..
<input class="previous" type="button" value="previous"/>
</div>
</div>
해결책
나는 그것을 작동시킬 수 있었다. 이 장면을 주면 jQuery 1.6 및 jQuery UI 1.8에서 작동합니다.
HTML :
<div id="checkout">
<h2><a href="#">Section 1</a></h2>
<div>
<form action="#">
<h3>Content</h3>
<input type="submit" class="next" value="Continue" />
</form>
</div>
<h2><a href="#">Section 2</a></h2>
<div>
<form action="#">
<h3>Content</h3>
<input type="submit" class="prev" value="Back" />
</form>
</div>
</div>
jQuery :
<script type="text/javascript">
$(document).ready(function () {
// create new accordion
var checkout = $('#checkout').accordion({ event: false });
// assign accordion navigation events to button clicks
$('form', checkout).each(function (index) {
$(this)
.children(':submit')
.filter('.next, .prev')
.click(function () {
checkout.accordion('option', 'active', index + ($(this).is('.next') ? 1 : -1));
return false;
});
});
});
</script>
다른 팁
jQuery 파일에 이것을 추가하십시오. 함수 $ ( "#Accorion"). Actionion ( "Next") 및 "LooponNext"(기본값) 옵션을 추가하여 끝에있을 때 상단 상자로 돌아가도록 강요합니다.
$.extend($.ui.accordion.prototype, {
next: function(){
var index = this.option('active') || 0,
next = index + 1,
nodes = $(this.element).children('h3').length;
if(next >= nodes && this.option('loopOnNext') === true) {
next = 0;
}
return this.activate(next);
}
});
비슷한 문제가 있었고 사용했습니다.
<button onclick="$('#accordion').accordion('activate', 0);">Prev</button>
<button onclick="$('#accordion').accordion('activate', 2);">Next</button>
각 아코디언 창에. 이것은 두 번째 창에 있으며, 첫 번째 (색인 0) 또는 세 번째 (인덱스 2)로 돌아갑니다.
당신은 예에서 좋아하는 것을 시도 했습니까?
var wizard = $("#accordion").accordion({
header: 'h3.header',
event: false
});
$("h3.header", wizard).each(function(index) {
$(this)
.next()
.children(":button")
.filter(".next, .previous")
.click(function() {
wizard.changeAccordion("activate", index + ($(this).is(".next") ? 1 : -1))
});
});
나는 같은 문제에 대한 해결책을 찾고 있었고 이것을 생각해 냈습니다 (jQuery 1.4.2 및 jQuery UI 1.8.1과 함께 일하고 있습니다).
<div id="wizard">
<h3><a href="#step1">Step 1 / 3</a></h3>
<div id="step1">
<button type="button">Next »</button>
</div>
<h3><a href="#step2">Step 2 / 3</a></h3>
<div id="step2">
<button type="button">Next »</button>
</div>
<h3><a href="#step3">Step 3 / 3</a></h3>
<div id="step3">
<button type="submit">Finish</button>
</div>
</div>
그리고 이것은 대본입니다.
<script type="text/javascript">
$(function() {
$('#wizard').accordion();
$('#wizard :button').each(function (index, elm) {
$(elm).click(function() {
$('#wizard').accordion('activate', index + 1);
});
});
});
</script>
이 시도:
var wizard = $("#register_form").accordion({
header: '.title',
event: 'none',
collapsible: false
});
$(':button.previous').click(function() { wizard.accordion("activate", 0); });
$(':button.next').click(function() { wizard.accordion("activate", 1); });
어디에 :button
이전 버튼과 다음 버튼입니다 wizard
당신의 jquery 아코디언입니다. 다른 모든 코드를 남기십시오. 이것이 작동하는지 확인하십시오. 피드백을 남겨주세요. 감사합니다.