jQuery: предыдущие / следующие ссылки на вкладки не работают! - PullRequest
Новая
       20

jQuery: предыдущие / следующие ссылки на вкладки не работают!

1 голос
/ 28 апреля 2011

Я добавил кнопки и установил ссылки для предыдущих и следующих ссылок на ссылки из элементов списка.Когда я нажимаю на предыдущую или следующую ссылку, ссылки выглядят прямо в браузере, но вместо указанной вкладки они переходят на ту же страницу.

У меня есть дюжина этих форм с вкладками, и у каждой формы есть разныеколичество вкладок.Вкладки статичны (не используются в AJAX), и мне бы очень хотелось динамически устанавливать их hrefs вместо того, чтобы выкладывать каждую из них так, как я это делал ниже.(У каждой вкладки есть идентификатор, который начинается с подчиненной формы.

Я посмотрел этот разговор по выбору с плагином вкладок , но не знал, как применить его к моей ситуации. Ядействительно новое в jQuery! Чем больше я знаю, тем больше я хочу делать, и, похоже, чем меньше я знаю! Буду признателен за любой совет !!

HTML: 

<ul class="tabNavigation">
    <li class="tabs-selected">
        <a href="#tab_1">Organization</a></li>
    <li><a href="#tab_2">Leaders</a> </li>
    <li><input type="submit" name="submit" value=" Save " /></li>
</ul>

<!-- tab containers -->
<div class="tabs-container" id="tab_1">
    <div class="subform" id="subform1">
        <? include_once ('org.php'); ?>                   
    </div>
</div>

<div class="tabs-container" id="tab_2">
    <div class="subform" id="subform2">
        <? include_once ('event.php'); ?>                   
    </div>
</div>

jQuery: 

$(document).ready(function() { 
    //add previous/next buttons to bottom of each subform
    $(".subform").append('<div id="nav_buttons"><p><a href="" class="previous floatleft">Previous</a> <a href="" class="next floatright">Next</a></p></div>');

    $("#subform1 .previous").hide(); //hide previous button on tab_1 
    $("#subform1 a.next").attr("href","#tab_2");
    $("#subform2 a.previous").attr("href","#tab_1");
    $("#subform2 .next").hide(); //hide next button on last tab

});

Ответы [ 2 ]

0 голосов
/ 30 апреля 2011

Я нашел ответ на сайте Cris Coyier, CSS-Tricks.Статья, Вкладки jQuery UI с Next / Previous

Вот код, который работал: 

$(function() {
    var $tabs = $('.form-tabs').tabs();
    $(".tabs-container").each(function(i){
        var totalSize = $(".tabs-container").size() - 1;
        if (i != totalSize) {
            next = i + 2;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Continue &#187;</a>");
        }
        if (i != 0) {
            prev = i;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Back</a>");
        }
    });
    $('.next-tab, .prev-tab').click(function() { 
        $tabs.tabs('select', $(this).attr("rel"));
        return false;
    });
});

Что здорово, так это то, что он находит количество делений(которые предоставляют содержимое для каждой вкладки), а затем программно добавляет следующие / предыдущие кнопки, пропуская первую предыдущую кнопку и последнюю следующую кнопку.

Отлично работает!

0 голосов
/ 28 апреля 2011

Я думаю, что вы можете использовать выбранный атрибут: 

$("a.next").click(function() {
    $("#tabNavigation").tabs("select",  
         $("#tabNavigation").tabs("option", "selected") + 1
    );
});


$("a.prev").click(function() {
    $("#tabNavigation").tabs("select", 
        $("#tabNavigation").tabs("option", "selected") - 1
     );
});
...