साइडबार में वर्तमान मेनू आइटम को हाइलाइट करें

Question

मैं ट्विटर बूटस्ट्रैप के साथ django का उपयोग कर रहा हूं। मेरा वर्तमान दृश्य examples provided में से एक जैसा दिखता है। उदाहरण को देखते हुए, कोई व्यक्ति अलग-अलग विचार देखने के लिए साइडबार में दिए गए लिंक में से किसी एक पर क्लिक करने की कल्पना कर सकता है, प्रत्येक एक ही साइडबार के साथ तैयार किया गया है। एक कल्पना कर सकते हैं कि लिंक चयनित फिर बस कोड का उपयोग कर उदाहरण की तरह हाइलाइट होंगे:

<li class="active"><a href="/sample/link/here/">Link</a></li> 

सक्रिय वर्ग सही मेनू आइटम के साथ संलग्न किया जाना चाहिए। मैं इस "सक्रिय" कक्षा को सही मेनू आइटम में कैसे असाइन कर सकता हूं? मूल रूप से, मैंने अपने दृश्य से एक चर का उपयोग करने के लिए jquery:

$(document).ready(function() { 
    $("#{{ current_view }}_nav").addClass('active'); 
}); 

<li id="linkone_nav"><a href="/sample/link/here/">Link</a></li> 

हालांकि यह बोझिल लगता है। यह आवश्यक है कि मैं आईडी को टेम्पलेट को दृश्य से पास कर दूं। प्रबंधन के लिए बहुत सारे आईडी भी। क्या इस सक्रिय वर्ग को असाइन करने के लिए कोई बेहतर/अधिक पसंदीदा तरीका है?

Answer 1

मुझे लगता है कि अपने नमूना कोड में href के लिए # के आपके उपयोग मुद्दा झाई युक्त है। मुझे लगता है कि आपका असली दुनिया परिदृश्य वास्तविक वास्तविक लिंक है और सक्रिय यूआरएल के आधार पर स्वचालित रूप से उन्हें हाइलाइट कर रहा है। यदि यह सही है, तो बस कार्य करें:

{% url something as url %} 
<li{% if request.path == url %} class="active"{% endif %}><a href="{{ url }}">Link1</a></li> 

कहाँ, "कुछ" एक URLPATTERN या किसी दृश्य पर डॉटेड-पथ आदि के नाम पर इसका मतलब यह है कि आप यूआरएल पीछे कर रहे हैं, जाहिर है, इसलिए यदि आप है 'एक स्थिर URL का उपयोग कर रहे हैं, तो आप सिर्फ यह हार्डकोड चाहते हैं:

<li{% if request.path == "/my/full/url/path/" %} class="active"{% endif %}><a href="/my/full/url/path/">Link1</a></li> 

Answer 2

अपने मेनू के लिए एक को शामिल किए जाने का टुकड़ा करें:

<li class="{% if opt=='link1' %} active{% endif %}"><a href="#/?opt=link1">Link1</a></li> 
<li class="{% if opt=='link2' %} active{% endif %}"><a href="#/?opt=link2">Link2</a></li> 
<li class="{% if opt=='link3' %} active{% endif %}"><a href="#/?opt=link3">Link3</a></li> 
... 

जैसी अपनी मूल टेम्पलेट में यह शामिल हैं:

{% include "menu.html" with opt=request.GET.opt %} 

आप $ (document) .ready (उपयोग करने की आवश्यकता नहीं है .. ।) जैसा कि आप देख रहे हैं।

अपने TEMPLATE_CONTEXT_PROCESSORS के लिए एक अनुरोध जोड़ने के लिए मत भूलना:

TEMPLATE_CONTEXT_PROCESSORS = (
    # ... 
    'django.core.context_processors.request', 
    # ... 
) 

Answer 3

Fwiw, ट्विटर बूटस्ट्रैप पेज ही Scrollspy plugin का उपयोग करके प्रदान की यह कार्यक्षमता है।

अन्यथा, आप बस अपने मेनू में एक क्लिक ईवेंट सुन सकते हैं।

$('.nav').on('click', 'li:has(a[href^="#"])', function (e) { 
    $('.nav li').removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 4

आपको लगता है कि अन्य टेम्पलेट्स, जैसे के लिए बढ़ा दी है एक base.html टेम्पलेट में अपनी परियोजना का आयोजन किया गया है appname/pagename.html, आप सक्रिय नेविगेशन तत्व को हाइलाइट करने के लिए टेम्पलेट-केंद्रित दृष्टिकोण का उपयोग कर सकते हैं।

यह दृष्टिकोण आपको कुछ decoupling फायदे देता है, जो मैंने इस उत्तर के अंत में विस्तार से देखा है।

मुझे इस दृष्टिकोण को व्यापक नेविगेशन आइटम्स को संभालने के लिए बहुत उपयोगी पाया गया है जो कि अधिकांश या सभी साइट पर समान रहता है। यह शायद अधिक विस्तृत नेविगेशन तत्वों के लिए उपयुक्त समाधान नहीं है, जैसे कि आपके डेटा स्टोर से प्राप्त वस्तुओं की गतिशील सूची प्रस्तुत करना।

अपने base.html टेम्पलेट में, प्रत्येक नेविगेशन तत्व को एक खंड जोड़ें ब्लॉक करने के लिए अद्वितीय नाम देने: अपने appname/pagename.html टेम्पलेट में

<ul class="nav"> 
    <li class="{% block navbar_class-home %}{% endblock %}"> 
    <a href="#">Home</a> 
    </li> 
    <li class="{% block navbar_class-about %}{% endblock %}"> 
    <a href="#">About</a> 
    </li> 
    <li class="{% block navbar_class-pricing %}{% endblock %}"> 
    <a href="#">Pricing</a> 
    </li> 
</ul> 

, यदि आप सक्रिय प्रकट करने के लिए नव तत्वों में से एक चाहते हैं, ओवरराइड सामग्री के रूप में active का उपयोग कर उचित ब्लॉक।

{% block navbar_class-about %} active {% endblock %} 

जब आप एक राय यह है कि उस टेम्पलेट renders उपयोग करें, यह इस तरह से प्रस्तुत करना होगा::

<ul class="nav"> 
    <li class=""> 
    <a href="#">Home</a> 
    </li> 
    <li class=" active "> 
    <a href="#">About</a> 
    </li> 
    <li class=""> 
    <a href="#">Pricing</a> 
    </li> 
</ul> 

यह एक प्रारंभिक प्रतिपादन है कि 'नहीं करता है प्रदान करता है उदाहरण के लिए, "संक्षिप्त विवरण" आइटम को हाइलाइट करने जावास्क्रिप्ट पर भरोसा नहीं है। (आप जावास्क्रिप्ट का उपयोग आप एक एकल पृष्ठ एप्लिकेशन कर रहे हैं जगह में नेविगेशन बार कक्षाएं संशोधित कर सकते हैं।)

कई लोगों के लिए (लेकिन सभी नहीं) के मामलों, इस दृश्य तर्क से एक बेहतर जुदाई प्रस्तुति हो सकता है:

• आप साइट-नेविगेशन डेटा को टेम्पलेट संदर्भ में संलग्न करने के लिए विचारों को संशोधित कर सकते हैं, लेकिन दृढ़ता से दृश्य परत को प्रस्तुत करने वाले जोड़ों को जोड़ते हैं, और पुन: प्रयोज्य ऐप्स बनाने या तृतीय-पक्ष ऐप्स को एकीकृत करने में अधिक कठिन बनाते हैं।

  दृश्य पहले से ही एक नामित टेम्पलेट का चयन कर रहा है, जिसका अर्थ है कि आप पहले ही टेम्पलेट परत पर कुछ नेविगेशन से संबंधित जानकारी पास कर रहे हैं। आपको बस इतना ही चाहिए।

• आप दृश्य के बारे में कुछ जानकारी प्राप्त करने के लिए टेम्पलेट संदर्भ प्रोसेसर का उपयोग कर सकते हैं, लेकिन यह टेम्पलेट परत के भीतर रहने के बजाए, सिस्टम की दूसरी परत पर मजबूत युग्मन को स्थानांतरित करता है।

Answer 5

कम कोड के साथ बेहतर समाधान। बूटस्ट्रैप के साथ अच्छी तरह से Woks। अपने मेनू आइटम का चयन करने के लिए बस "addClass" क्वेरी बदलें। ,

var highlight_menu = function(path) { 
    /* Highlight current link */  
    $('.nav li').removeClass('active'); 
    $('.nav li:has(a[href="' + path + '"])').addClass('active') 
}; 

base.html पर वर्तमान पथ के साथ जे एस फ़ंक्शन को कॉल करें:

जावास्क्रिप्ट पर, इस समारोह बनाने

<script> 
    highlight_menu('{{request.path}}'); 
</script>