LungoJS框架学习笔记——基本元素
2014-09-15 11:19
405 查看
1) Section & Article
一组 <section> 元素就是应用中要展示的一个视图，一组 <section> 内还应该有 <header> 、<footer> 或 <article> 标签。
由 <article> 标签构造的 <section> 元素内容里，允许有多组的 <article> ，但只有加上 class="active" 属性的 <article> 优先显示，否则优先显示第1个<article> 。
<section id="main">
<header data-title="Lungo框架学习笔记"></header>
<article id="main-article" class="active">
LungoJS 是一个面向开发者提供设计、开发和共享跨设备应用程序的框架。
</article>
<footer>
<center>2014-09-11</center>
</footer>
</section>
2) Header
每组 <section> 可以包含一组 <header>，在里面可以设置要显示的 <section> 标题。
通常导航条、页面跳转按钮、侧滑菜单等也放在 <header> 里。
<section id="main">
<header data-title="Lungo框架学习笔记" data-back="home">
<nav class="on-right">
<button data-view-aside="right" data-icon="menu"></button>
</nav>
</header>
<article id="main-article" class="active">
LungoJS 是一个面向开发者提供设计、开发和共享跨设备应用程序的框架。
</article>
<footer>
<center>2014-09-11</center>
</footer>
</section>
3) Footer
同 <header> 一样，每组 <section> 可以包含一组 <footer>，在里面可以设置要显示的 <section> 标题。
通常导航条、页面跳转按钮、侧滑菜单等也可以放在 <footer> 里。
<section id="main">
<header data-title="Lungo框架学习笔记" data-back="home">
<nav class="on-right">
<button data-view-aside="right" data-icon="menu"></button>
</nav>
</header>
<article id="main-article" class="active">
LungoJS 是一个面向开发者提供设计、开发和共享跨设备应用程序的框架。
</article>
<footer>
<nav>
<a href="#" data-icon="home" class="active"></a>
<a href="#" data-icon="share"></a>
<a href="#" data-icon="user"></a>
</nav>
</footer>
</section>
4) aside
<aside> 元素可以用来创建一个可视平板电脑或手机屏幕以决定是否隐藏显示的区域，通常用来放置菜单内容。
在菜单设置中的链接需要用 Lungo 系统中的导航系统专用的ID号做链接，而不是直接的明链。这个暗链与明链的转换，要在专用的 data-router 来实现。
在 aside 中还可以设置菜单文字的显示位置、样式。
<aside> 区块默认显示位置在左上角。
<aside id="example">
<header data-title="Options"></header>
<article class="active">
内容
</article>
</aside>
如果要在平板电脑中自动显示出 aside ，需要在 aside 中加入 data-aside 属性，通过对 data-view-aside 设置为 display/hide 来切换。
<section id="main" data-aside="example">
<header data-title="Aside示例">
<nav>
<button data-view-aside="example" data-icon="menu"></button>
</nav>
</header>
<article id="main-article" class="active indented">
内容
</article>
</section>
综合示例代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=yes" />
<meta name="Author" content="" />
<meta name="keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" href="css/lungo.css">
<link rel="stylesheet" href="css/lungo.icon.css">
<link rel="stylesheet" href="css/lungo.theme.css">
</head>
<body>
<section id="main" data-transition="slide">
<header data-title="页头" data-icon="home">
<nav class="on-right">
<button data-view-aside="right" data-icon="menu"></button>
</nav>
</header>
<article id="article_1" class="scroll block">
主体内容
</article>
<article id="article_2" class="scroll block">
菜单一内容
</article>
<article id="article_3" class="scroll block">
菜单二内容
</article>
<article id="article_4" class="scroll block">
菜单三内容
</article>
<footer>
<nav>
<a href="#" data-icon="home" class="active"></a>
<a href="#" data-icon="share"></a>
<a href="#" data-icon="cog"></a>
</nav>
</footer>
</section>
<aside id="right" data-transition="right">
<header data-title="目录菜单"></header>
<article class="list active">
<ul>
<li data-view-article="article_2" data-icon="glass">
<strong>菜单一</strong>
</li>
<li data-view-article="article_3" data-icon="music">
<strong>菜单二</strong>
</li>
<li data-view-article="article_4" data-icon="heart">
<strong>菜单三</strong>
</li>
</ul>
</article>
</aside>
</body>
</html>
<script src="js/quo.js"></script>
<script src="js/lungo.js"></script>
<script type="text/javascript">
Lungo.init({});
</script>
效果图：
一组 <section> 元素就是应用中要展示的一个视图，一组 <section> 内还应该有 <header> 、<footer> 或 <article> 标签。
由 <article> 标签构造的 <section> 元素内容里，允许有多组的 <article> ，但只有加上 class="active" 属性的 <article> 优先显示，否则优先显示第1个<article> 。
<section id="main">
<header data-title="Lungo框架学习笔记"></header>
<article id="main-article" class="active">
LungoJS 是一个面向开发者提供设计、开发和共享跨设备应用程序的框架。
</article>
<footer>
<center>2014-09-11</center>
</footer>
</section>
2) Header
每组 <section> 可以包含一组 <header>，在里面可以设置要显示的 <section> 标题。
通常导航条、页面跳转按钮、侧滑菜单等也放在 <header> 里。
<section id="main">
<header data-title="Lungo框架学习笔记" data-back="home">
<nav class="on-right">
<button data-view-aside="right" data-icon="menu"></button>
</nav>
</header>
<article id="main-article" class="active">
LungoJS 是一个面向开发者提供设计、开发和共享跨设备应用程序的框架。
</article>
<footer>
<center>2014-09-11</center>
</footer>
</section>
3) Footer
同 <header> 一样，每组 <section> 可以包含一组 <footer>，在里面可以设置要显示的 <section> 标题。
通常导航条、页面跳转按钮、侧滑菜单等也可以放在 <footer> 里。
<section id="main">
<header data-title="Lungo框架学习笔记" data-back="home">
<nav class="on-right">
<button data-view-aside="right" data-icon="menu"></button>
</nav>
</header>
<article id="main-article" class="active">
LungoJS 是一个面向开发者提供设计、开发和共享跨设备应用程序的框架。
</article>
<footer>
<nav>
<a href="#" data-icon="home" class="active"></a>
<a href="#" data-icon="share"></a>
<a href="#" data-icon="user"></a>
</nav>
</footer>
</section>
4) aside
<aside> 元素可以用来创建一个可视平板电脑或手机屏幕以决定是否隐藏显示的区域，通常用来放置菜单内容。
在菜单设置中的链接需要用 Lungo 系统中的导航系统专用的ID号做链接，而不是直接的明链。这个暗链与明链的转换，要在专用的 data-router 来实现。
在 aside 中还可以设置菜单文字的显示位置、样式。
<aside> 区块默认显示位置在左上角。
<aside id="example">
<header data-title="Options"></header>
<article class="active">
内容
</article>
</aside>
如果要在平板电脑中自动显示出 aside ，需要在 aside 中加入 data-aside 属性，通过对 data-view-aside 设置为 display/hide 来切换。
<section id="main" data-aside="example">
<header data-title="Aside示例">
<nav>
<button data-view-aside="example" data-icon="menu"></button>
</nav>
</header>
<article id="main-article" class="active indented">
内容
</article>
</section>
综合示例代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=yes" />
<meta name="Author" content="" />
<meta name="keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" href="css/lungo.css">
<link rel="stylesheet" href="css/lungo.icon.css">
<link rel="stylesheet" href="css/lungo.theme.css">
</head>
<body>
<section id="main" data-transition="slide">
<header data-title="页头" data-icon="home">
<nav class="on-right">
<button data-view-aside="right" data-icon="menu"></button>
</nav>
</header>
<article id="article_1" class="scroll block">
主体内容
</article>
<article id="article_2" class="scroll block">
菜单一内容
</article>
<article id="article_3" class="scroll block">
菜单二内容
</article>
<article id="article_4" class="scroll block">
菜单三内容
</article>
<footer>
<nav>
<a href="#" data-icon="home" class="active"></a>
<a href="#" data-icon="share"></a>
<a href="#" data-icon="cog"></a>
</nav>
</footer>
</section>
<aside id="right" data-transition="right">
<header data-title="目录菜单"></header>
<article class="list active">
<ul>
<li data-view-article="article_2" data-icon="glass">
<strong>菜单一</strong>
</li>
<li data-view-article="article_3" data-icon="music">
<strong>菜单二</strong>
</li>
<li data-view-article="article_4" data-icon="heart">
<strong>菜单三</strong>
</li>
</ul>
</article>
</aside>
</body>
</html>
<script src="js/quo.js"></script>
<script src="js/lungo.js"></script>
<script type="text/javascript">
Lungo.init({});
</script>
效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ubuntu之shell编程学习笔记3——编程的基本元素
- duilib学习笔记01：一个简单的Duilib程序的基本框架
- LungoJS框架学习笔记——DOM
- SVG实战开发学习（一）——基本数据类型和常见框架元素
- Hibernate3.2 学习笔记 映射的基本元素和属性
- Cocos2d-x学习笔记（2）- 场景的基本元素
- 逐梦旅程学习笔记 DirectX开发入门01:应用程序基本框架
- LungoJS框架学习笔记——导航菜单
- 学习笔记(OC)--Foundation框架的基本应用一
- Windows 8 Directx开发学习笔记（一）应用基本框架
- 【数据结构】学习笔记（一）——基本概念和框架
- jquery1.9学习笔记 之选择器(基本元素二)
- LungoJS框架学习笔记——缓存
- 学习Windows Mobile开发系列笔记（win32基本程序框架）
- 《Web编程入门经典》学习笔记 - Lesson01：创建结构化文档：XHTML简介、核心元素、属性组与基本文本格式
- jquery1.9学习笔记 之选择器(基本元素五)
- opengl学习笔记2-1-基本的运行框架
- LungoJS框架学习笔记——绑定
- CI框架学习笔记（一） - 环境安装、基本术语和框架流程
- CI框架学习笔记（一） - 环境安装、基本术语和框架流程