Jquery Accordion، المعالج التالي والسابق، كيفية الحصول على الأقسام السابقة والتالية؟

Question

لدي أكورديون 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>

Answer 1

لقد تمكنت من الحصول عليه للعمل.جرب هذه الصورة، فهي تعمل مع jQuery 1.6 وjQuery UI 1.8:

لغة البرمجة:

<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>

مسج:

<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>

Answer 2

أضف هذا إلى ملفات jQuery الخاصة بك.فهو يضيف وظيفة $("#accordion").accordion("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);
    }
});

Answer 3

واجهت مشكلة مماثلة واستخدمت:

<button onclick="$('#accordion').accordion('activate', 0);">Prev</button>
<button onclick="$('#accordion').accordion('activate', 2);">Next</button>

على كل جزء من الأكورديون.يوجد هذا في الجزء الثاني ويعيدك إلى الأول (الفهرس 0) أو إلى الأمام إلى الجزء الثالث (الفهرس 2).

Answer 4

هل حاولت أن تفعل تماما كما في المثال؟

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)) 
    }); 
});

Answer 5

كنت أبحث عن حل لنفس المشكلة وتوصلت إلى هذا (أنا أعمل مع 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 &raquo;</button>
    </div>
    <h3><a href="#step2">Step 2 / 3</a></h3>
    <div id="step2">
        <button type="button">Next &raquo;</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>

Answer 6

جرب هذا:

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 هو الأكورديون مسج الخاص بك.اترك كل التعليمات البرمجية الأخرى.معرفة ما إذا كان هذا يعمل.يرجى ترك ردود الفعل، وذلك بفضل.