如何实现导航“选中”物品

发布于 2024-12-20 01:50:15 字数 1443 浏览 1 评论 0原文

我需要在网页上实现一个导航菜单，可能带有多个级别的选项卡。每当 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',)

在控制器中执行类似的操作，然后将此元组传递给模板，但不知怎的，它有一种“做错了”的感觉。

所以问题是：由于我实际上必须在模板中打印类选择，因此考虑到该页面可能具有多个级别，我如何跟踪当前位置（例如，该页面在导航树中的位置）选项卡或其他导航项目？有没有更好的方法来做到这一点？

我在路线风格中使用 Pyramid 和 Mako 模板，但通用答案也很受欢迎。

原文

I need to implement a navigation menu on a web page, possibly with several levels of tabs. I've used the CSS way whenever the CSS is under my control, but now I'm facing problems when using an exising CSS library (Twitter's Bootstrap in this case).

First, this is the CSS way I've used. Example 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>

... and the CSS:

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

Simple enough. Only the body's class needed to be changed when appriopriate.

Now, Bootstrap seems to use the class based style to select navigation items (topbar, tabs, pills). Example:

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

I initially thought of doing something like

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

in the controller and then passing this tuple to the templates, but somehow it has this vibe of "doing it wrong".

So the question is: Since I actually have to print the class selection in the templates, how do I keep track of the current location (as in, where in the navigation tree is this page), given that the page may have multiple levels of tabs or other navigation items? Is there a preferred way to do this?

I'm using Pyramid in route style with Mako templates, but generic answers appreciated too.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅笑依然 2024-12-27 01:50:15

我做了类似的事情（金字塔和引导程序），但仅用于一级导航。

我做的第一件事是创建一个“视图”对象，它将参数传递给每个渲染，例如标题、标题、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。然后，我在 Mako 中创建了一个导航元素模板：

<%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>

其中“things”是导航中所有元素的元组。 [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 递归（Mako 不支持，所以我只需制作 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, ...]

希望能回答您的问题。只需确保您的列表长度正确，这样就不会出现超出范围的错误。

I do something similar (Pyramid & Bootstrap as well), but only for one level of navigation.

First thing I did was create a "view" object that passes parameters to every render such as title, header, get_data, etc. Ex.

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}

I set the attribute nav in every page rendering, but have nav = None when no navigation element is activated. I then created a template for navigation elements in Mako:

<%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>

Where "things" is a tuple of all the elements in the navigation. [0] is the display name, and [1] is the internal name. The "| n " is needed to escape the html characters. Ex:

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

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

Now, you can set things either in the template or in the controller via view. I have the "if things" clause in case you want a generic tab template that is called on every page; you can disable tabs just by setting things = None in the controller.

This is only one level of tabs, but you can do the same by making things a more complicated list. I would make things a more complicated so that compared to how it looks currently, it'll look like:

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

I would then make navelements recursive (which Mako doesn't support, so I would just make two copies of the navelements function and have them call each other) and implement support for multiple levels of nav:

<%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>

Where nav looks something like:

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

Hope that answers your question. Just make sure your lists are of correct length so you don't get out of bound errors.

回复收藏 0 原文

白色秋天 2024-12-27 01:50:15

您可以使用渲染期间使用的系统值通过访问变量view.__name__来获取模板中的视图名称。

然后更改活动链接（示例位于 jinja2 中，但应该类似）

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

You can use system values used during rendering to obtain view name in template by accessing variable view.__name__.

Then change active link by (example is in jinja2 but it should be similar)

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

More information at
http://docs.pylonsproject.org/projects/pyramid/en/latest/narr/templates.html#system-values-used-during-rendering

回复收藏 0 原文

~没有更多了~

关于作者

梦晓ヶ微光ヅ倾城

暂无简介

文章

27 人气

关注发私信

友情链接

文江博客

如何实现导航“选中”物品

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

佚名

羁客

天天爱笑的徐老师

星

夏日落

隐诗

友情链接

如何实现导航“选中”物品

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

佚名

羁客

天天爱笑的徐老师

星

夏日落

隐诗

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。