开发者

Best way to highlight tabs according to the page you're on with CakePHP?

So prior to being introduced to CakePHP, I'd highlight the appropriate navigation tab according to the url with the following (rather sloppy) code I wrote (fyi absolute_url was a function I wrote to get the absolute path) :

$page = $_SERVER['PHP_SELF'];
// add all possible states for the navigation to an array
$checkNav = array(
    "index" => "index",
    "new" => "new",
    "random" => "random",
    "submit" => "submit"
);
$compareAgainst = strpos($page, $checkNav['index']);
if ($compareAgainst == 0) {
    echo "<li><a href=\"" . absolute_url("index") . "\"><span class=\"navBorder\">Popular</span></a></li>\n";
} else {
    echo "<li><a href=\"" . absolute_url("index") . "\" id=\"current\">Popular</a></li>\n";
}
$compareAgainst = strpos($page, $checkNav['new']);
if ($compareAgainst == 0) {
    echo "<li><a href=\"" . absolute_url("new") . "\"><span class=\"navBorder\">New</span></a></li>\n";
} else {
    echo "<li><a href=\"" . absolute_url("new") . "\" id=\"current\">New</a></li>\n";
}
$compareAgainst = strpos($page, $checkNav['random']);
if ($compareAgainst == 0) {
    echo "<li><a href=\"" . absolute_url("random") . "\"><span class=\"navBorder\">Random</span></a></li>\n";
} else {
    echo "<li><a href=\"" . absolute_url("random") . "\" id=\"current\">Random</a></li>\n";
}
$compareAgainst = strpos($page, $checkNav['submit']);
if ($compareAgainst == 0) {
    echo "<li><a href=\"" . absolute_url("submit") . "\"><span class=\"navBorder\">+ Submit a Link</span></a></li>\n";
} else {
    echo "<li><a href=\"" . absolute_url("submit") . "\" id=\"current\">+ Submit a Link</a></li>\n";
}

Now, I've noticed that in Cake, to determine the relative path, I can开发者_如何学运维 just go:

<?= $this->here; ?>

Is there a better way to do this, or should I just implement this (new) method with the old code?


You can do the following

Add this to app_helper.php if you need it in multiple pages. You feed this function with the controller and the action you want to check you want to compare against. The function compares it with the current page and return true if they match.

  function isActive($controller, $actions = array())
    {
      foreach ($actions as $action) 
      {
        if ($controller == $this->params['controller'] && $action == $this->params['action']) 
        {
          return true;
        }
      }
      return false;
    }   

And then generate your links like so:

<ul class="left">
    <li <?php if($html->isActive('controller_name', array('index'))) { echo 'class="active"'; }  ?>><?php echo $html->link('Index', '/index'); ?></li>
    <li <?php if($html->isActive('controller_name', array('new'))) { echo 'class="active"'; }  ?>><?php echo $html->link('New', '/new'); ?></li>
    <li <?php if($html->isActive('controller_name', array('random'))) { echo 'class="active"'; }  ?>><?php echo $html->link('Random', '/random'); ?></li>
    <li <?php if($html->isActive('controller_name', array('submit'))) { echo 'class="active"'; }  ?>><?php echo $html->link('Submit', '/submit'); ?></li>
</ul>

If the function returns true, the link will have class="active". Adapt it to your needs.


The way I've always done this is to give your body tag an id, and use css to target it. If your views are all separate then you can hard code the body id. If you are using some sort of template that adds in the header, content, footer etc., then just pass the id as a variable to the header view or wherever the body tag is (really any outer container/div that will be on every view and contain your navigation tabs). Also you will need to give your navigation tab id's to target each one.

Then just some css like this:

#homepage a#hometab, 
#aboutpage a#abouttab,
#productpage a#productstab,
#contactpage a#contacttab   
                       {    
                         special active styling here
                        }
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜