如何實現導航「選擇」項

我需要在網頁上實現導航菜單，可能有幾個級別的選項卡。每當CSS處於我的控制之下時，我都會使用CSS方式，但現在我在使用擴展的CSS庫（本例中爲Twitter的Bootstrap）時遇到了問題。如何實現導航「選擇」項

首先，這是我用過的CSS方式。例如HTML：

<html> 
<head> 
    <title>Example page</title> 
</head> 
<body class="articles"> 

<div class="navigation"> 
    <ul> 
     <li class="frontpage"><a href="#">Frontpage</a></li> 
     <li class="articles"><a href="#">Articles</a></li> 
    </ul> 
</div> 

<p>Blah blah.</p> 

</body> 
</html>

...和CSS：

body.frontpage div.navigation li.frontpage, 
body.articles div.navigation li.articles { 
    background-color:red; 
    color:white; 
}

夠簡單。在適當的時候只需要改變身體的課程。

現在，Bootstrap似乎使用基於類的樣式來選擇導航項目（頂欄，標籤，藥丸）。例如：

... 
<div class="navigation"> 
    <ul class="tabs"> 
     <li class="active"><a href="#">Frontpage</a></li> 
     <li><a href="#">Articles</a></li> 
    </ul> 
</div> 
...

我最初以爲做一些像

navigation = ('frontpage',) 
# or 
navigation = ('articles', 'categories', 'foo',)

控制器

，然後通過這個元組的模板，但不知何故，有「做錯了」這個氛圍。

所以問題是：由於我實際上必須在模板中打印類選擇，因此如何跟蹤當前位置（如導航樹中此頁所在的位置），因爲頁面可能有多個級別的標籤或其他導航項目？有沒有一種首選的方法來做到這一點？

我在使用金字塔的路線風格與Mako模板，但一般的答案也讚賞。

來源

2011-12-08 tuomur

我做了類似的事情（金字塔& bootstrap以及），但僅限於一個級別的導航。

我做的第一件事就是創建一個「視圖」對象，將參數傳遞給每個渲染器，如標題，標題，get_data等。

class View_Controller(object): 
    def __init__(self, request, **kwargs): 
     self.request = request 
     self.nav = kwargs.get('nav', None) 

    @property 
    def page(self): 
     return request.GET.get('page', 1) 

@view_config(route_name='home', renderer='templates/homepage.mako') 
def Homepage_View(request): 
    view = View_Controller(request, nav='homepage') 
    stuff = DBSession.query(Stuff).all() 
    return {'view': view, 'stuff': stuff}

我在每個頁面渲染中都設置了屬性nav，但是當沒有導航元素被激活時，nav = None。然後，我創建了導航元素模板在馬可：

<%def name="navelements(things)"> 
% for a in things: 
<li${' class="active"' if nav == a[1] else '' | n }><a href="#">a[0]</a></li> 
% endfor 
</%def>

其中「東西」是在導航的所有元素的元組。 [0]是顯示名稱，[1]是內部名稱。「| n」是用來轉義html字符的。例如：

<%! things = [['Frontpage', 'homepage'], ['Articles', 'arts'], ['Categories', 'cats'], ['Foo', 'foo']] %> 

% if things: 
<div class="navigation"> 
    <ul class="tabs"> 
    ${navelements(things)} 
    </ul> 
</div> 
% else: 
<hr /> 
% endif

現在，您可以通過視圖在模板或控制器中設置事物。如果您需要在每個頁面上調用的通用選項卡模板，我有「if things」子句;您可以通過在控制器中設置things = None來禁用選項卡。

這只是一個標籤級別，但您可以通過製作更復雜的列表來做同樣的事情。我會使事情更復雜，這樣比它的外觀目前，它會看起來像：

things = [['displayname1', 'elementname1', things1], ['displayname2', 'elementname2', things2], ...]

我會然後作出navelements遞歸（其真子不支持，所以我只想讓兩個副本該navelements功能，並讓他們相互調用），並實施資產淨值的多層次支持：

<%def name="navelements1(things, level=0)"> 
% for a in things: 
<li${' class="active"' if nav[level] == a[1] else '' | n }><a href="#">a[0]</a></li> 
    % if a[2]: 
    <ul class="tabs"> 
     ${navelements2(a[2], level+=1)} 
    </ul> 
    % endif 
% endfor 
</%def>

凡導航看起來像：

nav = ['frontpage', 'best', None, ...]

希望，一個回答你的問題。只要確保您的列表長度正確，以免出現界限錯誤。

來源

2011-12-18 00:38:30

改變通過活動鏈接（例如在Jinja2的，但它應該是相似的）

<li {% if view.__name__ == "fixtures" %} class="active" {% endif %}> <a href="#">Link</a> </li>

更多信息只注意到你想每個項目都有自己的班級。這只是將其他元素傳遞給每件事物。 '

' –

這很接近我最終做的。有點笨重，但它的工作，所以我會接受這個答案。 – tuomur

很酷我實際上改變了我的設置，甚至更好...每個導航項目是一個類標題，href和活動屬性的對象，我只是循環他們顯示導航，我發現它更好。 –

您可以使用渲染在模板獲取視圖名稱通過訪問變量view.__name__期間使用系統值。

然後在 http://docs.pylonsproject.org/projects/pyramid/en/latest/narr/templates.html#system-values-used-during-rendering

來源

2015-09-30 00:28:19

如何實現導航「選擇」項

回答

相關問題