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中创建下拉菜单?
发布评论