LungoJS框架学习笔记——导航菜单

Lungo 菜单导航条完全使用 HTML5 直接元素定义，仍然通过 <a> 或 <button> 标签来构建，但必须加上 “view-*”  属性来告诉系统链接到哪个 <section>, <article> 或 <aside>。

1) Data-View 属性

在 <a> 或 <button> 标签中使用 data-view-* 属性来设置链接要跳转去的元件是<section>, <article> 或 <aside>类型。

同时，在 href 属性通过加上 id 号来锚定到对应的元件组即可。

<section id="main">
	<header data-title="主页" data-icon="home"></header>
    <article id="article_1" class="active">
        <button class="button" data-view-article="article_2" data-icon="forward">查看内容2</button>内容1
    </article>
    <article id="article_2">
        <button class="button" data-view-article="article_1" data-icon="home" data-label="查看内容1"></button>内容2
    </article>
</section>

效果图：

2) Data-back 属性

Lungo 的导航是基于面包屑模式，因此在各个 section 间返回切换可以使用 data-back 属性。

比如在头部添加一个带 data-back 属性的按钮，或者在 <a> 或按钮中带 href="#back" 锚到 data-router="section"。

<section id="main" data-transition="slide">
 <header data-title="主页" data-icon="home"></header>
 <article id="main_article" class="scroll block">
 <button data-view-section="second" data-label="进入次页"></button>
 主页内容
 </article>
</section>
<section id="second" data-transition="slide">
 <header data-title="次页" data-icon="home"></header>
 <article id="second_article" class="scroll block">
 <button data-view-section="back" data-label="返回上一页"></button>
 次页内容
 </article>
</section>

效果图：

3) Nav

要在头部或底部创建导航按钮，通常需要用到 nav 元素。nav 元素在头部的具体位置通过 class 设定，如：class="on-left" 或 class="on-right"。

<section id="main">
    <header data-title="导航示例">
        <nav class="on-left">
            <button data-view-article="article_2" data-label="内容2"></button>
        </nav>
        <nav class="on-right">
            <button data-view-section="second" data-label="次页"></button>
        </nav>
    </header>
    <article id="article_1" class="active">首页内容1</article>
    <article id="article_2">首页内容2</article>
    <footer>
        <nav>
            <a href="#" data-view-article="article_1" data-icon="home"></a>
            <a href="#" data-view-article="article_2" data-icon="user"></a>
            <a href="#" data-view-section="second" data-icon="arrow-right"></a>
        </nav>
    </footer>
</section>
<section id="second">
    <header data-back="home" data-title="次页"></header>
    <article id="second_1">次页内容</article>
</section>

效果图：

4) Groupbar

Lungo 还提供了一个顶部特殊的菜单导航 UI，只要在 header 元素加上扩展 class="extended" ，并在其下创建带 class="groupbar" 的 nav 元素就完成了。

<section id="main">
    <header data-title="groupbar示例" class="extended"></header>
    <nav data-control="groupbar">
        <a href="#" data-view-article="article_1" class="active">第一页</a>
        <a href="#" data-view-article="article_2">第二页</a>
    </nav>
    <article id="article_1" class="active">第一页内容</article>
    <article id="article_2">第二页内容</article>
</section>

效果图：

5) Menu

除了上述 Nav 和 Groubar 方式外，Lungo 从 2.2 版本起，还提供了属性为 data-view-menu 的新菜单控制方式。

<section id="menu" data-transition="slide">
    <header data-title="下拉菜单示例" data-back="home">
        <nav class="on-right">
            <a href="#" data-view-menu="options" data-icon="menu"></a>
        </nav>
    </header>  
    <nav id="options" data-control="menu">
        <a href="#" data-view-article="article_1" data-icon="menu">菜单一</a>
        <a href="#" data-view-article="article_2" data-icon="globe">菜单二</a>
        <a href="#" data-view-article="article_3" data-icon="comments">菜单三</a>
        <a href="#" data-view-article="article_4" data-icon="user">菜单四</a>
    </nav>
	<article id="main_article">主体内容</article>
	<article id="article_1">菜单一</article>
	<article id="article_2">菜单二</article>
	<article id="article_3">菜单三</article>
	<article id="article_4">菜单四</article>
</section>

效果图：

在nav中加入 class="icons" 可获得以下效果：