2010-01-27 21 views
6

के बाद एक ही टैब बनाए रखें मैं jquery टैब का उपयोग कर रहा हूं और जेएस विधि का पालन कर रहा हूं, मैं इसे पोस्टबैक के बीच टैब की स्थिति को बनाए रखने के लिए कैसे और कैसे संशोधित कर सकता हूं? (यह Page_Load के बाद पहला टैब के लिए टैब रीसेट करता है)Jquery पोस्टबैक, पोस्टबैक

$(document).ready(function() { 

     //When page loads... 
     $(".tab_content").hide(); //Hide all content 
     $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
     $(".tab_content:first").show(); //Show first tab content 

     //On Click Event 
     $("ul.tabs li").click(function() { 

      $("ul.tabs li").removeClass("active"); //Remove any "active" class 
      $(this).addClass("active"); //Add "active" class to selected tab 
      $(".tab_content").hide(); //Hide all tab content 

      var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
      $(activeTab).fadeIn(); //Fade in the active ID content 
      return false; 
     }); 

उत्तर

3

आपको Javascript का उपयोग कर एक छिपा क्षेत्र में सक्रिय टैब ट्रैक कर सकते हैं, तो छिपी हुई फ़ील्ड जाँच, जब पेज लोड। (जावास्क्रिप्ट में भी)

वैकल्पिक रूप से, आप पोस्टबैक को खत्म करने के लिए ASP.Net AJAX के साथ UpdatePanels का उपयोग कर सकते हैं। (ध्यान दें कि यदि टैब एक अद्यतन पैनल में हैं, वे सही ढंग से काम नहीं करेगा)

+0

मैंने पोस्टबैक का कारण नहीं होने के लिए अद्यतन पैनल का उपयोग किया। –

+0

मैंने चयनित टैब को ट्रैक करने के लिए एक छिपे हुए फ़ील्ड का भी उपयोग किया। यह काम करता हैं। –

+0

मैंने अद्यतन पैनल का उपयोग किया .. लेकिन जब मैं एक बटन करता हूं तो दूसरे टैब पर क्लिक करता है, पोस्टबैक ने पहला टैब दिखाया था ... वह क्यों है? – Muhammedh

3

एक छिपी हुई फ़ील्ड का उपयोग कर के लिए एक वैकल्पिक

$ टैब नियंत्रण पर कुकी संपत्ति का उपयोग करने के लिए है ("# टैब ") टैब ({ कुकी: { की समयसीमा समाप्त हो जाती है: 1 } });

आप इस काम करने के लिए

jQuery tabs cookie

+0

पूरी तरह से काम करता है। सबसे आसान और सबसे सुरुचिपूर्ण समाधान। – MGOwen

+0

इस पर कोई भी कामकाजी उदाहरण बहुत उपयोगी होगा! – Muhammedh

+0

jQuery UI ने कुकी व्यवसाय को 1.10 पर हटा दिया http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option – fortboise

1

प्रयास करें jquery.cookie.js फ़ाइल को संदर्भित करने की जरूरत है निम्नलिखित:

<p class="hiddenData"><asp:HiddenField ID="hdnData" runat="server" /></p> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.tabs li a').click(function() { }); 
     $('.tabs li').hover(function() { 
      var liData = $(this); 
      $('.hiddenData input:hidden').val(liData.find('span').text()); 
     }); 
     if ($('.hiddenData input:hidden').val() != '') { 
      var liList = $('.tabs li'); 
      var hiddenData = $('.hiddenData input:hidden').val(); 
      liList.each(function() { 
       if ($(this).find('span').text() == hiddenData) { 
        $(this).find('a').click(); 
       } 
      }); 
     } 
    }); 
</script> 
0

आप

//When page loads... 
$(".tab_content").hide(); //Hide all content 
कहा

मैं इसे सीएसएस के साथ लोड कर दूंगा क्योंकि यह तेज़ है। छुपा शायद एक प्रदर्शन कर रहा है: कोई नहीं;

एक समाधान कोडबेहिंड से जावास्क्रिप्ट लिख रहा है।
और ग # साथ उदाहरण

var selectedTab = IsAdvancedSearch ? "{'selected':1}" : String.Empty; 
ScriptManager.RegisterClientScriptBlock(this, GetType(), "search", String.Format(@"jQuery(document).ready(function() {{ jQuery('#search').tabs({0}); }});", selectedTab), true); 

या आप के साथ सी # #search टैग करने के लिए एक विशेषता जोड़ सकते हैं और जे एस के साथ इसे पढ़ सकता है

# सी

search.Attributes.Add("selectedtab", "1"); 

जे एस

jQuery("#search").attr("selectedtab"); 

और दूसरा समाधान क्वेरीस्ट्रिंग के साथ है।
आप क्वेरीस्ट्रिंग से मूल्य पढ़ सकते हैं।

मैं व्यक्तिगत रूप से पहले या दूसरे को चुनता हूं।

0

छुपा क्षेत्र दृष्टिकोण मेरे लिए अच्छा काम करता है। .aspx

<asp:HiddenField runat="server" ID="hfLastTab" Value="0" /> 

युक्त और js तैयार समारोह

$("#tabs").tabs({ active: <%= hfLastTab.Value %> }); 

सक्रिय टैब युक्त के साथ छिपा क्षेत्र के आधार पर तय की जाएगी। (यह jQuery UI v1.9 प्रॉपर्टी है, 'सक्रिय' f.k.a.'चयनित'।) पोस्टबैक के विभिन्न नियंत्रण उचित सूचकांक में hfLastTab.Value को सेट करने के लिए प्रदान कर सकते हैं।

मैं भी किसी अन्य पृष्ठ से किसी यूआरएल के साथ एक विशेष टैब को इंगित करने में सक्षम होना चाहता था, और एक क्वेरीस्ट्रिंग पैरामीटर पर जाने से पहले, हैश को फिर से बंद करने के लिए बहुत समय बिता रहा था? टी = एन। मैं उसमें विश्लेषण करता हूं! पेज.लोड पेज() की पोस्टबैक शाखा। ताजा पेज लोड के लिए, यदि टैब का कोई पैरामीटर नहीं है, तो टैब टैब पर जाएं, या टैब एन पर जाएं। उस पार्सिंग को संभालने के कई तरीके। यहां एक है:

 if (!Page.IsPostBack) { 
      string pat = @"t=(\d)"; 
      Regex r = new Regex(pat, RegexOptions.IgnoreCase); 
      Match m = r.Match(Request.Url.Query); 
      if (m.Success) hfLastTab.Value = m.Groups[0].ToString(); 
     } 
संबंधित मुद्दे