पेज रीफ्रेश/नेविगेशन

Question

पर ट्विटर बूटस्ट्रैप संकुचित स्थिति को बनाए रखें मैं लिंक की लंबी सूची के लिए एक accordion बनाने के लिए बूटस्ट्रैप "पतन" प्लगइन का उपयोग कर रहा हूं। Accordion-body टैग में "पतन" शामिल है, इसलिए पृष्ठ लोड होने पर सभी समूह ध्वस्त हो जाते हैं। जब आप कोई समूह खोलते हैं और किसी लिंक पर क्लिक करते हैं, तो यह आपको कुछ विवरण देखने के लिए एक नए पृष्ठ पर ले जाता है और फिर आप सूची में वापस जाने के लिए बैक लिंक या ब्राउज़र पर वापस क्लिक करते हैं। दुर्भाग्यवश, जब आप एग्रीजन वापस लौटते हैं तो उसकी ध्वस्त स्थिति में वापस आ जाता है और आपको समूह को फिर से खोलना होगा और आप कहां थे। मैं इस बहुत आगे और आगे नेविगेशन की उम्मीद करता हूं और यह व्यवहार निराशाजनक होने जा रहा है।

क्या उपयोगकर्ता की जगह को सुरक्षित रखने और उस पर वापस जाने का कोई तरीका है, या पृष्ठ को फिर से लोड करने से रोकें या जावास्क्रिप्ट को फिर से फायरिंग से रोकें।

मैंने सोचा कि समाधान इन पंक्तियों के साथ हो सकता है, लेकिन सुनिश्चित नहीं है। Twitter bootstrap: adding a class to the open accordion title

Answer 1

आप कुकी द्वारा इसे आसानी से हल कर सकते हैं। वहाँ सरलीकृत पुस्तकालयों का एक बहुत है, https://github.com/carhartl/jquery-cookie की तरह के रूप में मैं नीचे दिए गए उदाहरण में उपयोग करें:

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script> 

एक स्क्रिप्ट खंड के लिए निम्न कोड जोड़ें (#accordion2 modfied चहचहाना बूटस्ट्रैप उदाहरण के लिए संदर्भित करता है, मैं बाद में सूची)

$(document).ready(function() { 
    var last=$.cookie('activeAccordionGroup'); 
    if (last!=null) { 
     //remove default collapse settings 
     $("#accordion2 .collapse").removeClass('in'); 
     //show the last visible group 
     $("#"+last).collapse("show"); 
    } 
}); 

//when a group is shown, save it as the active accordion group 
$("#accordion2").bind('shown', function() { 
    var active=$("#accordion2 .in").attr('id'); 
    $.cookie('activeAccordionGroup', active) 
}); 

और आप कर चुके हैं! यहाँ क्लिक करने योग्य लिंक, साथ http://twitter.github.com/bootstrap/javascript.html#collapse में उदाहरण का एक संशोधित संस्करण है जब आप वापस जाने के लिए - पिछले दिखाया अकॉर्डियन समूह को खोलता है स्वचालित रूप से

<div class="accordion" id="accordion2"> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
     Collapsible Group Item #1 
     </a> 
    </div> 
    <div id="collapseOne" class="accordion-body collapse in"> 
     <div class="accordion-inner"> 
     Link : <a href="http://google.com">google.com</a> 
     </div> 
    </div> 
    </div> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
     Collapsible Group Item #2 
     </a> 
    </div> 
    <div id="collapseTwo" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
     Link : <a href="http://stackoverflow.com">stackoverflow.com</a> 
     </div> 
    </div> 
    </div> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> 
     Collapsible Group Item #3 
     </a> 
    </div> 
    <div id="collapseThree" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
     Link : <a href="http://cryptozoologynews.blogspot.com/">cryptozoology news</a> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 2

मैं तकनीक ऊपर सुझाव की कोशिश की और यह मेरे लिए काम किया (एक तरह से), लेकिन बुला .collapse ("शो") कुछ मामलों में accordion टॉगल व्यवहार तोड़ने लग रहा था। पहले पैनल खोलने से पहले खुले राज्य में खुले राज्य में छोड़ दिया जाएगा। मैं कक्षा "में" के बजाय जोड़कर jQuery के साथ इस दौर मिला:

$(document).ready(function() { 
    var last=$.cookie('activeAccordionGroup'); 
    if (last!=null) { 
     //remove default collapse settings 
     $("#accordion .panel-collapse").removeClass('in'); 
     //show the account_last visible group 
     $("#" + last).addClass("in"); 
    } 
}); 

अन्यथा, धन्यवाद मुझे सही रास्ते पर डाल davidkonrad।

Answer 3

इस के लिए धन्यवाद, यह बहुत उपयोगी पाया, लेकिन अगर आप बूटस्ट्रैप 3 & नवीनतम jQuery का उपयोग कर रहे हैं, इस काम करता है:

$("#accordion").on('shown.bs.collapse', function() 
{ 
    ... 
}); 

आशा इस दूसरों के लिए कुछ समय की बचत होती है ....

Answer 4

में बूटस्ट्रैप 3.xx कुकीज़ में अंतिम खुली स्थिति को सहेजने के लिए आपको निम्न स्क्रिप्ट का उपयोग करना होगा।

एचटीएमएल मार्कअप

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group 
        Item #1 </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in"> 
      <div class="panel-body"> 
       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson 
       ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food 
       truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put 
       a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim 
       keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
       Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, 
       raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus 
       labore sustainable VHS. 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group 
        Item #2 </a> 
      </h4> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson 
       ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food 
       truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put 
       a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim 
       keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
       Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, 
       raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus 
       labore sustainable VHS. 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible 
        Group Item #3 </a> 
      </h4> 
     </div> 
     <div id="collapseThree" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson 
       ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food 
       truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put 
       a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim 
       keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
       Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, 
       raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus 
       labore sustainable VHS. 
      </div> 
     </div> 
    </div> 
</div> 

Jquery

$(document).ready(function() { 
     //when a group is shown, save it as the active accordion group 
     $("#accordion").on('shown.bs.collapse', function() { 
      var active = $("#accordion .in").attr('id'); 
      $.cookie('activeAccordionGroup', active); 
      // alert(active); 
     }); 
     $("#accordion").on('hidden.bs.collapse', function() { 
      $.removeCookie('activeAccordionGroup'); 
     }); 
     var last = $.cookie('activeAccordionGroup'); 
     if (last != null) { 
      //remove default collapse settings 
      $("#accordion .panel-collapse").removeClass('in'); 
      //show the account_last visible group 
      $("#" + last).addClass("in"); 
     } 
    }); 

Answer 5

इस के लिए धन्यवाद, यह काम करता है। मैंने इसे एक विशिष्ट डीआईवी के शो/छुपा स्थिति को बनाए रखने के लिए थोड़ा सा संशोधित किया है (और डीआईवी की सूची में केवल एक डीआईवी दिखाने के लिए विशिष्ट नहीं है)।

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script> 

<script language="javascript" type="text/javascript"> 
    function retainDivCollapsedState(nameOfDiv, nameOfHeader) { 
     // when the div is shown, save a cookie with a value of 'true' 
     $("#" + nameOfDiv).on('shown.bs.collapse', function() { 
      $.cookie(nameOfDiv, "true"); // this is a cookie. named the same as the control (poor practice) for brevity 
     }); 
     // when the div is collapsed, remove the same cookie 
     $("#" + nameOfDiv).on('hidden.bs.collapse', function() { 
      $.removeCookie(nameOfDiv); 
     }); 

     // on page load, show or hide the div (and stylized the header) according to the cookie (if it exists) 
     var showDiv = $.cookie(nameOfDiv); 
     if (showDiv != null) { 
      $("#" + nameOfDiv).addClass("in");      // The div to show 
      $("#" + nameOfHeader).removeClass("collapsed");   // The header to stylize as expanded 
     } 
    }; 
</script> 

<script language="javascript" type="text/javascript"> 
    $(document).ready(
     retainDivCollapsedState("divName", "divHeaderName") 
    ); 
</script> 

Answer 6

यूआरएल हैश का उपयोग करने के लिए एक और विकल्प उपलब्ध है।

$(document).ready(function() { 
    var hash = window.location.hash; 
    if (hash) { 
     $("#accordion .panel-collapse").removeClass('in'); 
     $(hash).addClass('in'); 
    } 

    $('#accordion').on('shown.bs.collapse', function() { 
     var activeId = $("#accordion .in").attr('id'); 
     window.location.hash = activeId; 
    }); 

    $('#accordion').on('hidden.bs.collapse', function() { 
     window.location.hash = ''; 
    }); 
});