علامات التبويب مسج - الحصول حديثا مختارة مؤشر

Question

لقد استخدمت سابقا jquery-ui tabs تمديد تحميل الصفحة عبر شظايا ajax, و لإخفاء أو تكشف المخفية divs داخل الصفحة.كل من هذه الأساليب هي موثقة جيدا ، وكان لدي أي مشاكل هناك.

الآن, ومع ذلك, لا تريد أن تفعل شيئا مختلفا مع علامات التبويب.عندما يقوم المستخدم بتحديد علامة التبويب ، فإنه يجب إعادة تحميل الصفحة بالكامل - والسبب في ذلك هو أن محتويات كل كلفه القسم غالية الثمن إلى حد ما لجعل, لذلك أنا لا أريد فقط أن ترسل لهم في كل مرة و الاستخدام العادي طريقة تبديل 'display:none' لتكشف لهم.

خطتي هي أن اعتراض علامات التبويب' select الحدث, و أن وظيفة إعادة تحميل الصفحة مع طريق التلاعب الوثيقة.موقع.

كيف, في select معالج, هل يمكنني الحصول على حديثا اختيار علامة التبويب index html لى وجوه أنه يتوافق ؟

$('#edit_tabs').tabs(  {
        selected: 2,     // which tab to start on when page loads
        select: function(e, ui) {
            var t = $(e.target);
            // alert("data is " +  t.data('load.tabs'));  // undef
            // alert("data is " +  ui.data('load.tabs'));  // undef

            // This gives a numeric index...
            alert( "selected is " + t.data('selected.tabs') )
            // ... but it's the index of the PREVIOUSLY selected tab, not the
            // one the user is now choosing.  
            return true;

            // eventual goal is: 
            // ... document.location= extract-url-from(something); return false;
        }
});

هناك سمة من الحدث أو واجهة المستخدم كائن أستطيع أن أقرأ من شأنها أن تعطي مؤشر, id, أو كائن حديثا اختيار علامة التبويب أو مرساة الوسم في ذلك ؟

أو هل هناك طريقة أفضل تماما استخدام علامات التبويب تحديث كامل الصفحة ؟

Answer 1

وأود أن نلقي نظرة على للحصول على علامات التبويب. يؤخذ ما يلي من مستندات مسج:

و

 $('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
     ui.options // options used to intialize this widget
     ui.tab // anchor element of the selected (clicked) tab
     ui.panel // element, that contains the contents of the selected (clicked) tab
     ui.index // zero-based index of the selected (clicked) tab
 });

ويبدو ui.tab هو الطريق للذهاب.

Answer 2

وفي مسج UI - v1.9.2

ui.newTab.index()

للحصول على مؤشر قاعدة 0 من علامة التبويب النشطة

Answer 3

select: function(e, ui){var index=ui.index;}

ويعمل بشكل جيد بالنسبة لي. راجع: http://api.jqueryui.com/tabs/#events

Answer 4

شكرا، jobscry - و"ui.tab" أشرتم أعطاني علامة مرساة النقر عليها، من الذي يمكنني استخراج فئتها، الهوية، أ href، الخ ... اخترت لاستخدام معرف لترميز بلدي رابط. بلدي علامات التبويب النهائية () دعوة تبدو مثل هذا:

$(document).ready(function() {
    $('#edit_tabs').tabs(  {
        selected: [% page.selected_tab ? page.selected_tab : 0 %],
        select: function(e, ui) {
            // ui.tab is an 'a' object
            // it has an id of "link_foo_bar"
            // transform it into http://....something&cmd=foo-bar
            var url = idToTabURL(ui.tab.id);

            document.location = url;
            return false;
        }
    }).show();
});

Answer 5

وأو خيار آخر ولقد استخدمت لموقعي هو هذا. انها لUL / شعبة نظام ملاحة تبويب الأساسي. المفتاح لاطلاق النار من التبويب الصحيح على النقر على رابط لصفحة أخرى مع علامة التجزئة المرفقة، هو ببساطة عن طريق التصفية من خلال UL للحصول على #example مثال يطابق ماذا يكون يتم تمريرها من خلال المتصفح. في مثل ذلك.

وهنا هو مثال HTML:

    <div id="tabNav">

  <ul class="tabs">
    <li><a href="#message">Send a message</a></li>
    <li><a href="#shareFile">Share a file</a></li>
    <li><a href="#arrange">Arrange a meetup</a></li>
  </ul>
</div>

<div id="tabCont">

  <div id="message">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div id="shareFile">
    <p>Sed do eiusmod tempor incididunt.</p>
  </div>
  <div id="arrange">
    <p>Ut enim ad minim veniam</p>
  </div>

</div>

وعلى مسج لتحقيق ذلك:

$(document).ready(function() {
$(function () {
    var tabs = [];
    var tabContainers = [];

    $('ul.tabs a').each(function () {
      // note that this only compares the pathname, not the entire url
      // which actually may be required for a more terse solution.
        if (this.pathname == window.location.pathname) {
            tabs.push(this);
            tabContainers.push($(this.hash).get(0));
        }
    });

    $(tabs).click(function () {
        // hide all tabs
        $(tabContainers).hide().filter(this.hash).show();


        // set up the selected class
        $(tabs).removeClass('active');
        $(this).addClass('active');

        return false;

});




 $(tabs).filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();

  });

});

وهذا يجب العناية بها بالنسبة لك. I معرووووف ليست هذه هي أنظف الرمز، لكنه سوف تحصل يا هناك.

Answer 6

وفي تنفيذ بلدي يعمل مثل:

$(document).ready(function() {
    $('#edit_tabs').tabs(  {
        selected: [% page.selected_tab ? page.selected_tab : 0 %],
        select: function(e, ui) {
            // ui.tab is an 'a' object
            var url = ui.tab.href;

            document.location = url;
            return false;
        }
    }).show();
});

Answer 7

لم أجد من اثنين من الطرق لتحقيق هذا المطلب ، كما أنه من الصعب بالنسبة لي أن أضع الرمز هنا ، هل يمكن أن يكون نظرة على http://ektaraval.blogspot.com/2011/09/calling-javascript-when-jquery-ui-tab.html

على أمل أن يساعد شخص ما..

Answer 8

ونظرة سريعة إلى وثائق يعطينا الحل:

$('#edit_tabs').tabs({ selected: 2 }); 

والعبارة أعلاه سوف تنشيط علامة التبويب الثالث.