показывая след крошки в меню - PullRequest
Новая
       19

показывая след крошки в меню

1 голос
/ 16 марта 2010

У меня есть глобальное меню и локальное меню для продуктов . Я хотел бы выделить ссылку «наши продукты», когда я показываю продукты, а также выделить название продукта и его подстраниц в местном меню, чтобы выделенные ссылки работали в качестве хлебных крошек. Как я могу сделать это с помощью jquery и codeigniter или просто jquery. Вот код локального меню: 

<ul id="accordion">
<li class="pm"><h2><?php echo anchor('/products/thassos_wonder', 'Thassos Wonder+');?></h2>
<ul class="product_menu">
    <h2><?php echo anchor('/products/thassos_wonder', 'Thassos Wonder+');?></h2>
    <h2><?php echo anchor('/products/thassos_wonder_advantages', 'Thassos Wonder+ Advantages');?></h2>
    <h2><?php echo anchor('products/thassos_wonder_associated_products', 'Associated Products');?></h2>
    <h2><?php echo anchor('/products/thassos_wonder_brochure', 'Download TW+ Brochure');?></h2>
</ul>
</li>


<li class="pm"><h2><?php echo anchor('/products/marble_wonder', 'Marble Wonder+');?></h2>
<ul class="product_menu" id="mwmenu">
    <h2><?php echo anchor('/products/marble_wonder', 'Marble Wonder+');?></h2>
    <h2><?php echo anchor('/products/marble_wonder_advantages', 'Marble Wonder+ Advantages');?></h2>
    <h2><?php echo anchor('products/marble_wonder_associated_products', 'Associated Products');?></h2>
    <h2><?php echo anchor('/products/marble_wonder_brochure', 'Download MW+ Brochure');?></h2>
</ul>
</li>

<li class="pm"><h2><?php echo anchor('/products/polybond', 'Poly Bond+');?></h2>
<ul class="product_menu" id="pbmenu">
    <h2><?php echo anchor('/products/polybond', 'Poly Bond+');?></h2>
    <h2><?php echo anchor('/products/polybond_advantages', 'PolyBond+ Advantages');?></h2>
    <h2><?php echo anchor('products/polybond_areas_of_applications', 'Areas of Applications');?></h2>
    <h2><?php echo anchor('/products/polybond_brochure', 'Download Polybond+ Brochure');?></h2>
</ul>
</li>

Вот код jquery для локального меню: 

$(function() {
var pathname = location.pathname;
var highlight;
//highlight home
if(pathname == "/"){
    highlight = $('ul#accordion > li:first > a:first');
    $('a.active').parents('li').addClass('active');
}
else {
    var path = pathname.substring(1);
    if (path)
       highlight = $('ul#accordion a[href$="' + path + '"]');
}
highlight.attr('class', 'active');

// hide 2nd, 3rd, ... level menus
$('ul#accordion ul').hide();

// show child menu on click
$('ul#accordion > li > a.product_menu').click(function() {
    //minor improvement
    $(this).siblings('ul').toggle("slow");
    return false;
});

//open to current group (highlighted link) by show all parent ul's
$('a.active').parents('ul').show();

//if you only have a 2 level deep navigation you could
//use this instead
//$('a.selected').parents("ul").eq(0).show();

}); * +1011 *

Все еще изучаю jquery, поэтому хотелось бы получить помощь. Спасибо - G

Ответы [ 2 ]

1 голос
/ 17 марта 2010

Вы можете сделать это несколькими различными способами, один из них - всегда идентифицировать ваш тег body и якорные теги и использовать селекторы CSS для выполнения этой работы.

Мне нравится идентифицировать теги моего тела по имени контроллера, это очень удобно.

В этом случае для вашего тега body будет установлен идентификатор «products», объедините его с идентификаторами на своих якорях, и вы можете использовать CSS, как этот 

#products #productLink {
    color: #ff8833;
}

Другим способом сделать это была бы вспомогательная функция в CI, которая проверяла бы связь с текущим URI и добавляла «активный» класс к привязке, что-то вроде ниже. 

function menu_anchor($uri = '', $title = '', $attributes = array()) 
{
    if ( $uri == uri_string() )
    {
        $attributes['class'] = ( isset($attributes['class']) ) ? ' active' : 'active';
    }

    return anchor($uri, $title, $attributes);
}
0 голосов
/ 19 июня 2010

Я создал вспомогательную функцию, которая помогает автоматически создавать хлебные крошки из URL в рамках codeigniter.

для деталей, пожалуйста, проверьте следующий пост -

http://www.thephpx.com/2010/05/12/codeigniter-helper-create-breadcrumb-from-url/

спасибо,

Фейсал Ахмед http://www.thephpx.com/

...