2010-07-28 12 views
6

कोडइग्निटर के लिए बिल्कुल नया, अभी भी एमवीसी दृष्टिकोण को समझना। मैं बस सोच रहा हूँ इस को हल करने के लिए सबसे अच्छा तरीका क्या:कोडइग्निटर: उस पृष्ठ के लिंक को 'हाइलाइट' कैसे करें, जिस पर उपयोगकर्ता वर्तमान में चालू है?

मैं बहुत की तरह वर्तमान में सक्रिय लिंक पर प्रकाश डाला मेरी नेविगेशन पट्टी मिल गया:

<a href="index.hml" id="active">Index</a> 
<a href="blog.hml">Blog</a> 

अब, जब मैं blog.html को मैं आईडी चाहते जाना = तदनुसार स्थानांतरित करने के लिए "सक्रिय"। आमतौर पर मैं प्रत्येक लिंक करने के लिए एक चर निर्दिष्ट होता है और फिर सेट इसे करने के लिए 'आईडी = "सक्रिय'। किसी तरह मैं कि सबसे अच्छा तरीका है नहीं लगता। किसी भी विचार क्या महत्व है?

अद्यतन (12 सितम्बर 2012) यह पूछने के बाद से मैं कोहाना चले गए और इस उद्देश्य के लिए पूरी तरह से बनाए गए मॉड्यूल का विस्तार किया। अब, मुझे बस इतना करना है कि मेरे मेनू आइटम कॉन्फ़िगरेशन सरणी में निर्दिष्ट करें और हाइलाइटिंग स्वचालित रूप से होती है। मॉड्यूल here है।

उत्तर

5

सब आप चीजों को उस तरह के लिए आईडी का उपयोग नहीं किया जाना चाहिए सबसे पहले, आईडी है देने के लिए क्या कर सकते हैं पृष्ठ पर प्रत्येक डीओएम तत्व के लिए एक अद्वितीय पहचान संख्या, जिसके लिए, हम सबसे अच्छी कक्षा का उपयोग करते हैं।

कोड इग्निटर कई सहायक और कक्षाएं प्रदान करता है जो हमारे उपकरण का हिस्सा बनते हैं, शायद आपने पहले "यूआरएल सेगमेंट" के बारे में सुना है।

$ this-> uri-> खंड (एन)

परमिट आप किसी खास सेगमेंट को पुनः प्राप्त करने। जहां एन सेगमेंट नंबर है जिसे आप पुनर्प्राप्त करना चाहते हैं। सेगमेंट को बाएं से दाएं गिने जाते हैं।

http://example.com/index.php/news/local/metro/crime_is_up

खंड संख्या इस होगा: उदाहरण के लिए, अपना पूरा URL इस है अगर

  1. खबर
  2. स्थानीय
  3. मेट्रो
  4. crime_is_up

http://codeigniter.com/user_guide/libraries/uri.html

आप उसका प्रयोग वर्तमान URL खंड सक्रिय पृष्ठ आप वास्तव में ब्राउज़र पर प्रदर्शित कर रहे हैं का प्रतिनिधित्व करता है को पुनः प्राप्त कर सकते हैं।

+1

-1 के बजाय' class = "active" का उपयोग करना एक आम प्रथा है। सर्वर साइड समाधान इतना आसान है जब जावास्क्रिप्ट का उपयोग क्यों करें (पॉल ड्रगूनिस उत्तर देखें)? –

+0

यह काम करता है, क्योंकि मैं स्थानीयहोस्ट में पॉल के छोटे प्रारूप का उपयोग नहीं कर सकता था, फिर भी अच्छा 'पुराना anroots

+1

मेरी विधि अभी भी लागू होती है, आपको सीआई से संभवतया 'यूरी' ऑब्जेक्ट का उपयोग करने के लिए $ appName ऑब्जेक्ट का उपयोग करने की आवश्यकता है, इस पर निर्भर करता है कि आपका ऐप कैसे बनाया गया है। –

7

सीआई को यह सिर्फ तार्किक चेकों है गैर विशिष्ट वर्तमान पृष्ठ नाम के खिलाफ।

जब आप इस तरह के रूप

$pageName = 'blog.html'; 

सीआई में पेज नाम तो आप निम्नलिखित

<a href="index.html" <?php echo $pageName == 'index.html' ? 'id="active"' : ''; ?>>Index</a> 
<a href="blog.html" <?php echo $pageName == 'blog.html' ? 'id="active"' : ''; ?>>Blog</a> 
+1

उपरोक्त। लेकिन, वर्तमान में, ऐसा लगता है कि 'id =" सक्रिय "' id = "सक्रिय" ' –

0

मैंने उपरोक्त टिप्पणी से देखा कि शायद आप कुछ और अधिक कॉम्पैक्ट की तलाश में थे। डिफ़ॉल्ट रूप से कोडिनेटर में ऐसा कोई फ़ंक्शन नहीं है, लेकिन इसे बनाने में काफी आसान है। यह सिर्फ कुछ है जो मैंने अभी तक रखा है, लेकिन यह हो सकता है कि आप जो चाहते हैं।

सबसे पहले, मैन्युअल में यूआरएल सहायक पर एक नज़र डालें। http://codeigniter.com/user_guide/helpers/url_helper.html

विशेष रूप से एंकर फ़ंक्शन पर देखें और इसका उपयोग कैसे करें। आपको इस सहायक, एचटीएमएल सहायक और फॉर्म सहायक का उपयोग करने की आदत में होना चाहिए। यह आपके विचारों में सुधार करेगा। सभी मददगार सिस्टम फ़ोल्डर में हमारे लिए उपलब्ध हैं। मैंने जो किया वह मैंने यूआरएल सहायक खोला और एंकर कोड की प्रतिलिपि बनाई, मैंने फिर आवेदन के तहत सहायक फ़ोल्डर में अपनी स्वयं की सहायक फ़ाइल बनाई। आप अपने स्वयं के हेल्पर्स बनाने और मैन्युअल में उन्हें स्वत: लोड करने के बारे में और अधिक पढ़ सकते हैं।

मैंने इसके बाद कुछ बदलाव किए। अंतिम परिणाम इस प्रकार है:

if (! function_exists('menu_anchor')) 
{ 
    function menu_anchor($uri = '', $title = '', $attributes = '') 
    { 
     $title = (string) $title; 

     if (! is_array($uri)) 
     { 
      $site_url = (! preg_match('!^\w+://! i', $uri)) ? site_url($uri) : $uri; 
     } 
     else 
     { 
      $site_url = site_url($uri); 
     } 

     if ($title == '') 
     { 
      $title = $site_url; 
     } 

     if ($attributes != '') 
     { 
      $attributes = _parse_attributes($attributes); 
     } 

    $attributes .= ($site_url == current_url()) ? ' selected' : ''; 

     return '<a href="'.$site_url.'"'.$attributes.'>'.$title.'</a>'; 
    } 
} 

आप देख सकते हैं, यह केवल एक एक पंक्ति संशोधन है:। $ विशेषताओं = ($ SITE_URL == current_url())? ' चयनित' : '';

असल में, यदि पुनर्प्राप्त पृष्ठ का यूआरएल उस लापरवाही से मेल खाता है जो एंकर लिंक करता है, तो यह चयनित वर्ग को जोड़ता है। यदि आप नहीं चाहते हैं कि चयनित लिंक कहीं भी लिंक से लिंक हो, तो आप $ site_url को # या किसी और चीज़ पर सेट करके आसानी से इसे ठीक कर सकते हैं।

3

मैंने @Calle उदाहरण का उपयोग किया, वास्तव में अच्छी तरह से काम किया ... मुझे सीआई current_url() के बजाय एक कस्टम यूआरएल हथियार का उपयोग करना पड़ा क्योंकि मैं index.php फ़ाइल को .htaccess से बाईपास कर रहा हूं। मैंने सही विशेषता टैग भी जोड़ा है।

नोट्स शुरुआती के लिए मैं 'सहायकों' 'menu_helper.php' कहा जाता है में इस फ़ाइल crated और नियंत्रक $ के माध्यम से इसे लोड इस-> load-> सहायक ('मेनू');

सहायकों/menu_helper.php

if (! function_exists('menu_anchor')) 
{ 
    function menu_anchor($uri = '', $title = '', $attributes = '') 
    { 
     $title = (string) $title; 

     if (! is_array($uri)) 
     { 
      $site_url = (! preg_match('!^\w+://! i', $uri)) ? site_url($uri) : $uri; 
     } 
     else 
     { 
      $site_url = site_url($uri); 
     } 

     if ($title == '') 
     { 
      $title = $site_url; 
     } 

     if ($attributes != '') 
     { 
      $attributes = _parse_attributes($attributes); 
     } 

     $current_url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; 
     $attributes .= ($site_url == $current_url) ? 'class="active"' : 'class="normal"'; 


     return '<a href="'.$site_url.'"'.$attributes.'>'.$title.'</a>'; 
    } 
} 

दृश्य फ़ाइल:

<ul class="topnav love"> 
    <li class="topnav-1"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li> 
    <li class="topnav-2"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li> 
    <li class="topnav-3"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li> 
    <li class="topnav-4"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li> 
    <li class="topnav-5"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li> 
</ul> 

सीएसएस:

ul.topnav li.topnav -1 एक। सक्रिय { कुछ चालाक }

+0

यह मेरे लिए पूरी तरह से काम किया। बस यह जोड़ना चाहता था कि आपको ['helpers'] में अपनी ऑटोलोड फ़ाइल में मेनू सेट करना होगा। धन्यवाद दोस्त (ईटीई)! –

3

मैं नीचे दिए गए कोड का उपयोग करता हूं - चीयर्स!

<?php echo ($this->uri->segment(1)=='dashboard' && $this->uri->segment(2)=='')? 'active' : ''; ?> 
संबंधित मुद्दे