jQuery ইউআই ট্যাব - বর্তমানে নির্বাচিত ট্যাব সূচক কীভাবে পাবেন

Question

আমি জানি এই সুনির্দিষ্ট প্রশ্নটি আগে জিজ্ঞাসা করা হয়েছিল , তবে আমি প্লাগইনে bind()ইভেন্টটি ব্যবহার করে কোনও ফলাফল পাচ্ছি না jQuery UI Tabs।

indexট্যাবটি ক্লিক করা হলে একটি ক্রিয়া সম্পাদনের জন্য আমার কেবল নতুন নির্বাচিত ট্যাব দরকার need bind()আমাকে নির্বাচিত ইভেন্টটিতে প্রবেশ করতে দেয় তবে বর্তমানে নির্বাচিত ট্যাবটি পাওয়ার আমার স্বাভাবিক পদ্ধতিটি কার্যকর হয় না। এটি পূর্বে নির্বাচিত ট্যাব সূচকটি প্রদান করে, নতুনটি নয়:

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

বর্তমানে নির্বাচিত ট্যাবটি পেতে আমি যে কোডটি ব্যবহার করার চেষ্টা করছি তা এখানে রয়েছে:

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

});

আমি যখন এই কোডটি ব্যবহার করি, তখন ইউআই অবজেক্টটি ফিরে আসেundefined । ডকুমেন্টেশন থেকে, ui.tab ব্যবহার করে সদ্য নির্বাচিত সূচীতে ookুকতে আমি ব্যবহার করছি এটির বিষয়টি। আমি এটি প্রাথমিক tabs()কল এবং এটি নিজে থেকে চেষ্টা করেছি। আমি কি এখানে কিছু ভুল করছি?

Answer 1

JQuery UI সংস্করণগুলির জন্য 1.9 এর আগে : আপনি যা চান তা ui.indexথেকে event।

JQuery UI 1.9 বা তার পরে : নীচে জর্জিও লুপারিয়ার উত্তর দেখুন।

Comments

খুব সুন্দর উত্তর! উত্তরটি আরও সহজ করার জন্য আপনি ওয়েবসাইটে কী করেছেন তার একটি সংক্ষিপ্তসার আমি অন্তর্ভুক্ত করেছি।

— 21

চিয়ার্স, কিউ উল্লেখ করেছে যে ইউআই অবজেক্টটি নাল ছিল, সুতরাং ইউআইআইএনডিএক্স বর্তমানে ব্যর্থ হবে। আমি মনে করি উত্তরটি সম্ভবত এতটা সহজ নয় যেটি অন্তর্ভুক্ত রয়েছে।

— redsquare

এটি একটি সঠিক উত্তর ছিল, এবং দুর্দান্ত উদাহরণের জন্য ধন্যবাদ! আমি 1 শটে সব করার চেষ্টা করছিলাম, এবং এটি কাজ করছে না। আমি এটি বিভক্ত করার পরে, সবকিছু বিজ্ঞাপন হিসাবে কাজ করেছিল।

— মার্ক স্ট্রুজিনস্কি

উত্তরটি রয়েছে - ট্যাবলেক ইভেন্টে বর্তমান সূচকটি পেতে ui.index সম্পত্তি ব্যবহার করুন .....

— redsquare

উত্তরটি আপডেট করা উচিত কারণ এটি JQuery UI 1.9.0 এর সাথে কাজ করছে না। আপগ্রেড গাইড ( jqueryui.com / আপগ্রেড-গাইড / 1.9/… ) অনুসারে আপনার ui.index পরিবর্তন করতে হবে ui.newTab.index ( )

— জর্জিও লুপারিয়া

Answer 2

আপনি যদি কোনও ট্যাব ইভেন্টের প্রসঙ্গে বাইরে থেকে ট্যাব সূচক পেতে চান তবে এটি ব্যবহার করুন:

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

আপডেট: সংস্করণ ১.৯ থেকে 'নির্বাচিত' পরিবর্তন করে 'সক্রিয়' করা হয়েছে

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

Comments

এটি যেভাবেই হোক আমার যা প্রয়োজন তা উপস্থিত হয়েছিল।

— এল ইয়োবো

দেখে মনে হচ্ছে এটি বর্তমানে ডিফল্ট ট্যাব দেয়, বর্তমানে নির্বাচিত ট্যাবটি নয়। আমি কী মিস করছি? 42 ভোট ভুল হতে পারে না, তারা কি পারে? jqueryui.com/demos/tabs/#option- चयनিত

— প্যাট্রিক জাজালাপস্কি

হ্যাঁ, এই সমাধানটি সাহায্য করেছে। ধন্যবাদ @ কনট্রা

— আশ্বিন

'নির্বাচিত' বিকল্পটি jQuery এর UI 'তে সংস্করণ 1.9 এ' সক্রিয় 'থেকে নাম পরিবর্তন করা হয়েছে (দেখুন jqueryui.com/changelog/1.9.0 )

— জেক

Answer 3

আপডেট [ _{সূর্যের 08/26/2012} ] এই উত্তর এত জনপ্রিয় যে আমি এটা একটি পূর্ণাঙ্গ ব্লগের মধ্যে না করার সিদ্ধান্ত নিয়েছে পরিণত হয়েছে / টিউটোরিয়াল
দয়া করে এখানে আমার ব্লগ সাথে কাজ করার জন্য সহজেই অ্যাক্সেস তথ্য সর্বশেষ দেখতে ট্যাব jQueryUI মধ্যে
এছাড়াও অন্তর্ভুক্ত (ব্লগেও) একটি জেএসফিডাল

---

হালনাগাদ! দয়া করে নোট করুন: 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 ....

পুনশ্চ. আপনি যদি একটি iframe ভেরিয়েবল ব্যবহার করেন তবে .find ('। Ui-tabs-پینাল: না (.ui-tabs-hide)'), ফ্রেমে নির্বাচিত ট্যাবগুলির জন্য এটি করা সহজতরও পাবেন easy মনে রাখবেন, jQuery ইতিমধ্যে সমস্ত কঠোর পরিশ্রম করেছে, চাকাটি পুনরায় উদ্ভাবনের দরকার নেই!

কেবল প্রসারিত করতে (আপডেট করা)

আমার কাছে প্রশ্ন উত্থাপিত হয়েছিল, "যদি ভিউতে একাধিক ট্যাব অঞ্চল থাকে তবে কী হবে?" আবার, কেবল সহজ ভাবেন, আমার একই সেটআপটি ব্যবহার করুন তবে আপনি কোন ট্যাবগুলি ধরে রাখতে চান তা সনাক্ত করতে একটি আইডি ব্যবহার করুন।

উদাহরণস্বরূপ, যদি আপনার:

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

এবং আপনি দ্বিতীয় ট্যাব সেটটির বর্তমান প্যানেলটি চান:

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

এবং যদি আপনি প্রকৃত ট্যাবটি চান এবং প্যানেলটি না (সত্যই সহজ, যার কারণে আমি এর আগে এটি উল্লেখ করিনি তবে আমি মনে করি আমি এখনই করব, কেবল পুরোপুরি হবে)

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

আবার, মনে রাখবেন, jQuery সমস্ত কঠোর পরিশ্রম করেছিল, এত কঠিন ভাবেন না।

Comments

দুর্দান্ত, ধন্যবাদ! আপনি চাইলে স্ট্যাকওভারফ্লো . com/q/1864219/11992 এর উত্তর হিসাবে এটি সরবরাহ করতে পারেন ।

— নিকো

আমার ঠিক এটির দরকার ছিল - ধন্যবাদ!

— জাস্টিন এথিয়ের

'নির্বাচিত' বিকল্পটির নাম পরিবর্তন করে 'সক্রিয়' করা হয়েছে jQuery UI সংস্করণ 1.9 (দেখুন jqueryui.com/changelog/1.9.0)।

— জেক

Answer 4

আপনি যদি JQuery UI সংস্করণ 1.9.0 বা তার বেশি ব্যবহার করেন তবে আপনি ui.newTab.index () অ্যাক্সেস করতে পারবেন নিজের ফাংশনের অভ্যন্তরে এবং আপনার যা প্রয়োজন তা পেতে পারেন।

পূর্ববর্তী সংস্করণগুলির জন্য ui.index ব্যবহার করুন ।

Comments

আপনার উত্তরটি কিছু অতিরিক্ত বিশদ দিয়ে বের করে দিতে পারলে দুর্দান্ত হবে।

— স্লেজ

Answer 5

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 6

আপনি কখন ইউআই অবজেক্টটি অ্যাক্সেস করার চেষ্টা করছেন? আপনি যদি বাইন্ড ইভেন্টের বাইরে অ্যাক্সেস করার চেষ্টা করেন তবে ui অপরিজ্ঞাত হবে। এছাড়াও, যদি এই লাইন

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

ইভেন্টে এইভাবে চালানো হয়:

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

নির্বাচিত ট্যাব সেই সময়ে বর্তমান ট্যাবটির সমান হবে ("পূর্ববর্তী" এক।) এটি কারণ "ট্যাবসलेक्ट" ইভেন্টটি ক্লিক করা ট্যাব বর্তমান ট্যাব হওয়ার আগে ডাকা হয়। আপনি যদি এখনও এভাবে করতে চান তবে "ট্যাবশো" ব্যবহারের পরিবর্তে নির্বাচিত ট্যাব ক্লিক করা ট্যাবটির সমান হবে।

যাইহোক, এটি অতিরিক্ত-জটিল বলে মনে হচ্ছে যদি আপনার সমস্ত সূচক হয়। ui.index ইভেন্টের মধ্যে থেকে বা $ ("# ট্যাবলিস্ট") tab ইভেন্টের বাইরের ট্যাব ()। ডেটা ("নির্বাচিত.ট্যাবস") আপনার যা প্রয়োজন তা হওয়া উচিত।

Comments

@ বেন: আপনার সমাধানটি পূর্ববর্তী নির্বাচিত ট্যাবটিকে সেই সূচক হিসাবে দেয় যখন ট্যাবস্লেক ইভেন্টটি ট্রিগার করা হয়েছিল।

— মাইকেল মাও

@ মিশেল: আপনি আমার উত্তরটি পড়েছেন বা কোডটি ধরেছেন? আমার উত্তরে আমি বলেছি যে কোডটি সেইভাবে কাজ করবে না এবং কয়েকটি বিকল্প সরবরাহ করবে ('ট্যাবশো' ইভেন্ট; ui.index; $ ('ট্যাবলিস্ট')। ট্যাব ()। ডেটা ('নির্বাচিত.ট্যাবস'))

— বেন কোহলার

Late আমার দেরিতে প্রতিক্রিয়া সম্পর্কে দুঃখিত। হ্যাঁ, ui.index ঠিক কাজ করে। আমি কেবল এই সত্যটিই তুলে ধরতে চেয়েছিলাম যে নির্বাচিত.ট্যাবস "পূর্ববর্তী" নির্বাচিত ট্যাব দেয়, নিরাময়কারীটিকে নয়। আমি আপনার উত্তর কোন অপরাধ মানে।

— মাইকেল মাও

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

যদি কেউ আইফ্রেমের মধ্যে থেকে ট্যাবগুলি অ্যাক্সেস করার চেষ্টা করে থাকে তবে আপনি খেয়াল করতে পারেন এটি সম্ভব নয়। 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 ক্লাস ব্যবহার করে ট্যাব সামগ্রী প্যানেল পান get

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

এটি আরও ব্যবহার করতে এখন jQuery অবজেক্টে এটি মোড়ানো

 var tabContent$ = $(element);

এখানে আমি দুটি তথ্য যোগ করতে চাই ক্লাসটি .ui-tabs-navনেভিগেশনের সাথে .ui-tabs-panelসম্পর্কিত এবং ট্যাব সামগ্রী প্যানেলের সাথে যুক্ত। jquery ui ওয়েবসাইটের এই লিঙ্ক ডেমোতে আপনি দেখতে পাবেন এই ক্লাসটি ব্যবহৃত হয়েছে - 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');

Comments

এই উত্তরটি বর্তমান সক্রিয় ট্যাবটি সন্ধান করার জন্য দরকারী, বিশেষত যখন কোনও ট্যাব নির্বাচন ইভেন্টের প্রসঙ্গে নয়।

— hrabinowitz

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

আপনি এটির মাধ্যমে এটি খুঁজে পেতে পারেন:

$(yourEl).tabs({
    activate: function(event, ui) {
        console.log(ui.newPanel.index());
    }
});

Answer 18

'<input type="hidden" id="sel_tab" name="sel_tab" value="" />'প্রতিটি ট্যাবের অনক্লিক ইভেন্ট লিখন কোডের মতো এবং একটি গোপন ভেরিয়েবল নিন ...

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

আপনি পোস্ট পৃষ্ঠায় 'সেল_ত্যাব' এর মান পেতে পারেন। :), সরল !!!

Comments

আমি আপনাকে ভোট দিয়েছি না, তবে অতিরিক্ত মার্কআপ এবং ইনলাইন জাভাস্ক্রিপ্টের কোনও কারণ নেই। বিশেষত যেহেতু তিনি ইতিমধ্যে jQuery ব্যবহার করছেন ...

— জাস্টিন ইথিয়ার

Answer 19

আপনি যদি নিশ্চিত করতে চান যে 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 20

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

Comments

স্ট্যাক ওভারফ্লোতে স্বাগতম! লিঙ্কগুলি জ্ঞান ভাগ করে নেওয়ার দুর্দান্ত উপায়, ভবিষ্যতে যদি তারা ভাঙা যায় তবে তারা সত্যই প্রশ্নের উত্তর দেবে না। আপনার উত্তরে লিঙ্কটির প্রয়োজনীয় সামগ্রীটি যুক্ত করুন যা প্রশ্নের উত্তর দেয়। যদি বিষয়বস্তু এখানে জটিল বা খুব বেশি ফিট হয় তবে প্রস্তাবিত সমাধানটির সাধারণ ধারণাটি বর্ণনা করুন। মূল সমাধানের ওয়েবসাইটে সর্বদা একটি লিঙ্কের রেফারেন্স রাখতে ভুলবেন না। দেখুন: আমি কীভাবে ভাল উত্তর লিখব?

— সুনুন ןɐ কিউপি