علامات تبويب jQuery UI - كيفية الحصول على فهرس علامات التبويب المحدد حاليًا

Question

أعلم أن هذا السؤال المحدد كان سأل من قبل, ، لكنني لا أحصل على أي نتائج باستخدام bind() الحدث على jQuery UI Tabs توصيل في.

أنا فقط بحاجة إلى index لعلامة التبويب المحددة حديثًا لتنفيذ إجراء عند النقر فوق علامة التبويب. bind() يسمح لي بالربط بالحدث المحدد، ولكن طريقتي المعتادة للحصول على علامة التبويب المحددة حاليًا لا تعمل.يقوم بإرجاع فهرس علامة التبويب المحدد مسبقًا، وليس الفهرس الجديد:

var selectedTab = $("#TabList").tabs().data("selected.tabs");

إليك الرمز الذي أحاول استخدامه للحصول على علامة التبويب المحددة حاليًا:

$("#TabList").bind("tabsselect", function(event, ui) {

});

عندما أستخدم هذا الرمز، يعود كائن واجهة المستخدم undefined.من الوثائق، يجب أن يكون هذا هو الكائن الذي أستخدمه لربط الفهرس المحدد حديثًا باستخدام ui.tab.لقد حاولت هذا في البداية tabs() الدعوة وأيضا من تلقاء نفسها.أفعل شيئا خطأ هنا؟

Answer 1

مسج UI الإصدارات قبل 1.9: ui.index من event هو ما تريد.

على واجهة المستخدم مسج 1.9 أو في وقت لاحق:ترى الجواب جورجيو Luparia أدناه.

Answer 2

إذا كنت بحاجة إلى الحصول على علامة التبويب فهرس من خارج سياق علامات التبويب الحدث ، استخدام هذا:

function getSelectedTabIndex() { 
    return $("#TabList").tabs('option', 'selected');
}

تحديث:من الإصدار 1.9 'اختيار' تغيير 'النشط'

$("#TabList").tabs('option', 'active')

Answer 3

التحديث [_{الشمس 08/26/2012}] هذا الجواب أصبحت شعبية جدا التي قررت أن تجعل في بلوق كاملة/البرنامج التعليمي
يرجى زيارة بلدي بلوق هنا لمعرفة أحدث في سهولة وصول المعلومات إلى العمل مع علامات التبويب في jQueryUI
وشملت أيضا (في المدونة أيضا) هو jsFiddle

---

¡¡¡ التحديث!يرجى ملاحظة ما يلي:في الإصدارات الأحدث من jQueryUI (1.9+), ui-tabs-selected تم استبدال مع ui-tabs-active. !!!

---

أعلم أن هذا الموضوع قديم ولكن شيء أنا لم أرى ذكر كيفية الحصول على "اختيار علامة التبويب" (حاليا انخفض إلى أسفل لوحة) من مكان آخر غير "علامة التبويب الأحداث".لدي ببساطة طريقة ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)');

بسهولة الحصول على مؤشر بالطبع هناك طريقة المدرجة على الموقع ...

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

ومع ذلك ، يمكن استخدام الطريقة الأولى للحصول على مؤشر وأي شيء تريده عن ذلك الفريق السهل جدا ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
    curTabIndex = curTab.index(),
    curTabID = curTab.prop("id"),
    curTabCls = curTab.attr("class");
        //  etc ....

PS.إذا كنت تستخدم iframe متغير ثم .find('.ui-علامات التبويب-الفريق:لا(.ui-علامات التبويب-إخفاء)'), سوف تجد أنه من السهل أن تفعل هذا من أجل اختيار علامات التبويب في الإطارات أيضا.تذكر, مسج بالفعل قمت بكل العمل الصعب, لا تحتاج إلى إعادة اختراع العجلة!

فقط لتوسيع (تحديث)

السؤال ترعرعت لي: "ماذا لو كان هناك أكثر من علامات التبويب المناطق في الرأي؟" مرة أخرى, مجرد التفكير بسيطة استخدام الإعداد نفسه ولكن استخدام معرف تحديد علامات التبويب التي ترغب في الحصول على عقد من.

على سبيل المثال, إذا كان لديك:

$('#example-1').tabs();
$('#example-2').tabs();

وتريد الفريق الحالي من علامة التبويب الثانية مجموعة:

var curTabPanel = $('#example-2 .ui-tabs-panel:not(.ui-tabs-hide)');

وإذا كنت تريد الفعلية التبويب وليس الفريق (من السهل حقا, وهذا هو السبب أنا ddn لا أذكر ذلك من قبل ولكن أعتقد أنني الآن فقط أن تكون شاملة)

// for page with only one set of tabs
var curTab = $('.ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

// for page with multiple sets of tabs
var curTab2 = $('#example-2 .ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

مرة أخرى, تذكر, مسج قمت بكل العمل الصعب, لا تفكر كثيرا.

Answer 4

إذا كنت تستخدم واجهة المستخدم مسج النسخة 1.9.0 أو أعلاه, يمكنك الوصول إلى واجهة المستخدم.newTab.مؤشر() داخل وظيفة الخاص بك و الحصول على ما تحتاج إليه.

عن الإصدارات السابقة استخدام واجهة المستخدم.مؤشر.

Answer 5

عندما تحاول الوصول إلى واجهة المستخدم الكائن ؟ واجهة المستخدم سوف يكون غير معروف عند محاولة الوصول إلى الخارج من ربط الحدث.أيضا ، إذا كان هذا الخط

var selectedTab = $("#TabList").tabs().data("selected.tabs");

ركض في حالة من هذا القبيل:

$("#TabList").bind("tabsselect", function(event, ui) {
  var selectedTab = $("#TabList").tabs().data("selected.tabs");
});

selectedTab سوف تساوي علامة التبويب الحالية في ذلك الوقت ("السابق" واحد.) وذلك لأن "tabsselect" الحدث يسمى قبل النقر فوق علامة التبويب يصبح علامة التبويب الحالية.إذا كنت لا تزال تريد أن تفعل ذلك بهذه الطريقة ، باستخدام "tabsshow" بدلا من ذلك سوف يؤدي selectedTab يعادل النقر فوق علامة التبويب.

ومع ذلك ، يبدو أكثر تعقيدا إذا كان كل ما تريده هو مؤشر.واجهة المستخدم.مؤشر من داخل الحدث أو $("#TabList").علامات التبويب().البيانات("المختارة.علامات التبويب") خارج الحدث ينبغي أن يكون كل ما تحتاجه.

Answer 6

var $tabs = $('#tabs-menu').tabs();
// jquery ui 1.8
var selected = $tabs.tabs('option', 'selected');
// jquery ui 1.9+
var active = $tabs.tabs('option', 'active');

Answer 7

هذا تغير مع الإصدار 1.9

شيء مثل

 $(document).ready(function () {
            $('#tabs').tabs({
                activate: function (event, ui) {
                    var act = $("#tabs").tabs("option", "active");
                    $("#<%= hidLastTab.ClientID %>").val(act);
                    //console.log($(ui.newTab));
                    //console.log($(ui.oldTab));
                }
            });

            if ($("#<%= hidLastTab.ClientID %>").val() != "") 
            {
                $("#tabs").tabs("option", "active", $("#<%= hidLastTab.ClientID %>").val());
            }


        });

ينبغي أن تستخدم.هذا يعمل بشكل جيد بالنسبة لي ;-)

Answer 8

في حالة أي شخص قد حاول الوصول إلى علامات التبويب من داخل iframe, قد تلاحظ أنه غير ممكن.على div من علامة التبويب لم يحصل وضع علامة اختيار ، كما خفية أو غير خفية.الرابط نفسه هو قطعة فقط وضع علامة اختيار.

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-focus"><a href="#tabs-4">Tab 5</a></li>

التالية سوف تحصل على href قيمة الرابط الذي يجب أن يكون نفس معرف حسابك الحاوية:

jQuery('.ui-tabs-selected a',window.parent.document).attr('href')

هذا يجب أن تعمل أيضا في مكان: $tabs.tabs('option', 'selected');

فمن الأفضل بمعنى أنه بدلا من مجرد الحصول على المؤشر من علامة التبويب يعطيك الفعلية معرف من علامة التبويب.

Answer 9

أسهل طريقة للقيام بذلك هو

$("#tabs div[aria-hidden='false']");

و مؤشر

$("#tabs div[aria-hidden='false']").index();

Answer 10

في حالة إذا كنت تجد نشاطا علامة التبويب فهرس ثم أشر إلى علامة التبويب النشطة

أولا الحصول على المؤشر النشط

var activeIndex = $("#panel").tabs('option', 'active');

ثم باستخدام فئة css الحصول على علامة التبويب لوحة المحتوى

// this will return the html element
var element=   $("#panel").find( ".ui-tabs-panel" )[activeIndex]; 

الآن ملفوفة في وجوه مسج لمواصلة استخدامه

 var tabContent$ = $(element);

هنا أريد أن إضافة اثنين من معلومات الفئة .ui-tabs-nav هو الملاحة المرتبطة ، .ui-tabs-panel ويرتبط مع علامة التبويب لوحة المحتوى.في هذا الرابط التجريبي في واجهة المستخدم مسج الموقع سوف ترى هذه الفئة يتم استخدام - http://jqueryui.com/tabs/#manipulation

Answer 11

$( "#tabs" ).tabs( "option", "active" )

ثم سيكون لديك مؤشر التبويب من 0

بسيطة

Answer 12

جرب ما يلي:

var $tabs = $('#tabs-menu').tabs();

var selected = $tabs.tabs('option', 'selected');

var divAssocAtual = $('#tabs-menu ul li').tabs()[selected].hash;

Answer 13

وجدت رمز أدناه لا حيلة.مجموعات متغير حديثا اختيار علامة التبويب فهرس

$("#tabs").tabs({
    activate: function (e, ui) {
        currentTabIndex =ui.newTab.index().toString();
    }
});

Answer 14

يمكنك نشر أدناه الإجابة في مرحلة ما بعد القادم

var selectedTabIndex= $("#tabs").tabs('option', 'active');

Answer 15

طريقة أخرى للحصول على اختيار علامة التبويب الفهرس:

var index = jQuery('#tabs').data('tabs').options.selected;

Answer 16

$("#tabs").tabs({  
    load:  function(event, ui){  
        var anchor = ui.tab.find(".ui-tabs-anchor");  
        var url = anchor.attr('href');  
    }  
});  

في ال عنوان URL المتغير سوف تحصل على HREF/URL لعلامة التبويب الحالية

Answer 17

تأخذ المتغير الخفي مثل '<input type="hidden" id="sel_tab" name="sel_tab" value="" />' و على كل علامة التبويب حدث onclick كتابة التعليمات البرمجية مثل ...

<li><a href="#tabs-0" onclick="document.getElementById('sel_tab').value=0;" >TAB -1</a></li>
<li><a href="#tabs-1" onclick="document.getElementById('sel_tab').value=1;" >TAB -2</a></li>

يمكنك الحصول على قيمة 'sel_tab على نشر الصفحة.:) , بسيطة !!!

Answer 18

إذا كنت ترغب في التأكد ui.newTab.index() يتوفر في جميع الحالات (المحلية والنائية علامات التبويب) ، ثم نسميها في تفعيل وظيفة كما الوثائق يقول:

$("#tabs").tabs({
        activate: function(event, ui){
             alert(ui.newTab.index());
             // You can also use this to set another tab, see fiddle...
             // $("#other-tabs").tabs("option", "active", ui.newTab.index());                   
        },
});

http://jsfiddle.net/7v7n0v3j/

Answer 19

$("#tabs").tabs({
    activate: function(event, ui) {
        new_index = ui.newTab.index()+1;
        //do anything
    }
});