URL

Question

में पैरामीटर का उपयोग करके एक jQuery टैब का चयन करना मैं वर्तमान में jQuery UI द्वारा प्रदान किए गए टैब के साथ Struts 1 टैग लाइब्रेरी द्वारा प्रदान किए गए टैब को प्रतिस्थापित करने की जांच कर रहा हूं। मैंने मौजूदा एप्लिकेशन के साथ एकीकृत टैब प्राप्त करने में सफलतापूर्वक कामयाब रहा है, लेकिन मैं आने वाले यूआरएल पर पैरामीटर का उपयोग करके चयनित टैब को सेट करने के तरीके पर संघर्ष कर रहा हूं, जो myurl.com/action.do?selectedTab=SecondTab है।

मैं जावास्क्रिप्ट और jQuery के लिए एक नवागत हूं; कहां से शुरू करना है पर कुछ पॉइंटर्स क्या हैं?

Answer 1

http://www.mathias-bank.de/2007/04/21/jquery-plugin-geturlparam-version-2 का उपयोग करना:

$(document).ready(function(){ 
    var param = $(document).getUrlParam('selectedTab'); 
    $('#menu').tabs('select', param); 
}); 

से documentation:

#select 

हस्ताक्षर:

.tabs('select' , [index]) 

एक टैब का चयन करें, जैसे कि इसे क्लिक किया गया था। दूसरा तर्क टैब का शून्य-आधारित इंडेक्स है या पैनल के आईडी चयनकर्ता टैब के साथ जुड़ा हुआ है (टैब का href खंड पहचानकर्ता, उदाहरण हैश, पैनल की आईडी को इंगित करता है)।

Answer 2

एक jQuery प्लगइन का निम्न लिंक समाधान के लिए एक संभावित उम्मीदवार प्रतीत होता है, क्योंकि यह आपको यूआरएल और घटक भागों के साथ प्रदान करता है। इसके बाद आप किसी भी टैब आपके द्वारा चुने गए या jQuery चयनकर्ता के माध्यम से आईडी या वर्ग द्वारा करना चाहते हैं के सूचकांक के साथ मान से मेल करने में सक्षम होगा:

http://www.oakcitygraphics.com/jquery/jqURL/jqURLdemo.html?var1=1&var2=2&var3=3

Answer 3

• http://stilbuero.de/jquery/history/index.html
• http://stilbuero.de/jquery/tabs/index.html#fragment-1

मुझे लगता है कि यह इतिहास लोड और यह काम करने के लिए प्राप्त करने के लिए पर्याप्त है।

Answer 4

मैं एक अलग दृष्टिकोण है कि जरूरी पर निर्भर नहीं करता है में निर्मित चयन() फ़ंक्शन, लेकिन livequery प्लगइन का उपयोग करता है:

http://plugins.jquery.com/project/livequery/

एक अधिक शक्तिशाली संस्करण है jQuery लाइव समारोह का। यह आसानी से भविष्य के तत्वों को बांध सकता है जो एक क्वेरी से मेल खाते हैं।

मान लीजिए आप एक टैब संरचना इस प्रकार है:

<div class="Tabs"> 
<ul class="nav"> 
<li><a id="tab1">Link 1</a></li> 
<li><a id="tab2">Link 2</a></li> 
<li><a id="tab3">Link 3</a></li> 
</ul> 
.. 
.. 
</div> 

आदर्श, आप इस तरह का URL संरचना हैं:

mydomain/mypage?tab=tab2 

यह काफी मुश्किल है क्योंकि चयन() विधि केवल पूर्णांक का समर्थन करता है हो जाता है सूचकांक, और जब आप अपने टैब को चारों ओर बदलते हैं तो क्या होता है?

मान लें कि आप एक चर के रूप में ऊपर संकेत निम्न कार्य करने में url पैरामीटर प्राप्त कर सकते हैं:

सबसे पहले आप अपने लक्ष्य तत्व का पता लगाने और इसे करने के लिए एक वर्ग जोड़ें:

jQuery('a#' + param).addClass('selectMe'); 

इसके बाद आप एक बाँध तत्व को livequery समारोह:

jQuery('.ui-tabs-nav a.selectMe').livequery(function(){ 
jQuery(this).removeClass('selectMe').triggerHandler('click'); 
}); 

यह बात की पूर्ति करेंगे केवल एक बार यह टैब-ified और लगभग यह 'क्लिक' हो गया है।

उसके बाद, आप कोई पैरामीटर के साथ अपने टैब फ़ंक्शन को कॉल कर सकते हैं:

jQuery(".Tabs").tabs(); 

और इसके पूरे होने पर, टैब अपने आप क्लिक किया और चयन किया जाएगा!

अभी तक बेहतर, आप खुद livequery के लिए टैब निर्माण के लिए बाध्य कर सकते हैं:

jQuery(".Tabs").livequery(function(){ 
    jQuery(this).tabs();  
}); 

इसलिए किसी भी तत्व को आप क्लास '.Tabs' के साथ स्वचालित रूप से लोड, पर टैब में परिवर्तित हो जाएगा कि अब या भविष्य में !

Answer 5

Jquery-यूआई आप दे कि (लगभग) मुक्त करने के लिए: आंतरिक लिंक का उपयोग करें। और यह बदसूरत प्राप्त पैरामीटर का उपयोग करने से बेहतर है।

अपने नाविक में पासिंग http://my.site.org/mypage/#foo-tab स्वत: कंटेनर आईडी = "foo-टैब" होने के साथ टैब का चयन करेंगे।

चाल यूआरएल जब एक टैब का चयन अद्यतन करने के लिए एक घटना को जोड़ने के लिए है ताकि जब आप फिर से लोड आप मौजूदा टैब खोना नहीं है:

$(document).ready(function() { 
     $("#tabs").bind('tabsselect', function(event, ui) { 
      window.location.href=ui.tab; 
     }); 
    });