如何使用路由器和内置/自定义属性在aurelia中创建下拉菜单?

编程入门 行业动态 更新时间:2024-10-25 19:24:22
本文介绍了如何使用路由器和内置/自定义属性在aurelia中创建下拉菜单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

Twitter bootstrap有一个下拉菜单选项;菜单中有多个层次。请参阅: getbootstrap/javascript/#dropdowns

Twitter bootstrap has a dropdown menu option; where a menu has have multiple layers. See: getbootstrap/javascript/#dropdowns

如何使用Aurelia.js的路由器重新创建?路由器通常提供1级。我需要2个级别。

How can I use Aurelia.js's routers to recreate this? Routers normally provide 1 level. I need 2 levels.

推荐答案

此信息来源于: github/adarshpastakia 。

我借了这个人的大部分代码来回答这个问题。您可以在以下位置找到: gist.github/adarshpastakia/5d8462b5bc8d958d5cb3

I "borrowed" most of this person's code to answer this question. You can find it at: gist.github/adarshpastakia/5d8462b5bc8d958d5cb3

以下是回答上述问题的步骤: (1)在路由器中添加settings属性。它可以是你想要的任何东西。这是一个例子: 设置:{子菜单:[ {href:'#/ sub1',标题:'子菜单1 '}, {href:'zoldello.wordpress',title:'Submenu 2'}, {href:'#/ sub3',title:'Submenu 3'} ] }

Here are steps to answer the question above: (1) In the router, add a "settings" property. It can be whatever you want. Here is an example: settings:{ subMenu:[ {href:'#/sub1', title:'Submenu 1'}, {href:'zoldello.wordpress', title:'Submenu 2'}, {href:'#/sub3', title:'Submenu 3'} ] }

注意:(a)必须称为设置(b)Aurelia目前忽略在设置中写入的自定义代码(c)在设置中,您可以将其中的任何属性放在中 (2)(a)From( 1)如果您需要子菜单路由到页面的一部分,在href(或任何您称之为)中使用#sub1;其中sub1是指nav设置为false的不同路由。 (b)如果您想要一个独立于路由的超链接,请将href(或任何您称之为它)设置为您希望的URL(我的示例中使用了zoldello.wordpress)。不需要添加额外的路线

Note: (a)It must be called "settings" (b) Aurelia currently ignores custom code you write outside "settings" (c)In "settings", you can place any property in it you like (2) (a) From (1) above, if you need the submenu to route to a part of the page, in href (or whatever you call it) use "#sub1"; where "sub1" refers to a different route where nav is set to false. (b) If you want a hyperlink independent of routing, set href (or whatever you call it) to the url you desire (I used "zoldello.wordpress" in my example). No need to add a additional route

(3)遵循构建DOM(重复,模板等)的基本aurelia规则

(3) Follow the basic aurelia rules of building DOM (repeat, template etc)

这是一个例子:

Here is an example:

HTML文件

<li repeat.for="route of router.navigation"> <!-- if route has no submenu --> <a href.bind="route.href" if.bind="!route.settings.subMenu">${route.title}</a> <!-- if route has submenu --> <a href.bind="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" if.bind="route.settings.subMenu"> ${route.title} <span class="caret"></span></a> <ul if.bind="route.settings.subMenu"> <li repeat.for="menu of route.settings.subMenu"> <a href.bind="menu.href">${menu.title}</a> </li> </ul> </li>

Javascript文件

Javascript file

configureRouter(config) { config.map([{ route:'home', title:'Home', nav:true, module:'home' },{ route:'top-menu', title:'Top Menu', nav:true, settings:{ subMenu:[ {href:'#/sub1', title:'Submenu 1'}, {href:'zoldello.wordpress', title:'Submenu 2'}, {href:'#/sub3', title:'Submenu 3'} ] } }, { route:'sub1', title:'Submenu 1', nav:false, moduleId:'module' }, { route:'sub2', title:'Submenu 2', nav:false, moduleId:'module' }, { route:'sub3', title:'Submenu 3', nav:false, moduleId:'module' }]) }

更多推荐

如何使用路由器和内置/自定义属性在aurelia中创建下拉菜单?

本文发布于:2023-11-25 14:17:16,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1630092.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:自定义   如何使用   路由器   属性   菜单

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!