lungo.js练习(一)

最近刚开始接触lungo.js(官网),对此框架还不是很熟悉,也是边学边写,慢慢了解。点击进入官方文档。

因为涉及到一些html5方面的知识,所有刚开始还是要了解一些html5的知识,比如在lungo中是使用的<section>与<article>进行布局。

section、article与div有什么区别呢?点击查看

在lungo的文档上说,一个section就相当于我们应用中的一个view(视图)

div,div是我们平时用的最多的标签,本身没有任何语义,平时只是作为布局来使用。

section,简单的说section就是带有语义的div,<div class="section"></div>就相当于<section id=""></section>

section表示一段专题性的内容,一般会带有标题。当一个标签只是为了样式化或者方便脚本使用时,应该使用div。一般来说,当元素内容明确地出现在文档大纲、文章章节、博客条目、用户评论部分或者论文中有编号的部分时,section就是适用的。


article, article是一个特殊的section标签,它比section具有更明确的语义,它代表一个独立的、完整的相关内容块。
article代表的内容可以被外部引用。例如:博客中的一篇文章,论坛中的一个帖子或者一段浏览者的评论等。如果元素的内容集中到一起显示可以表达相对独立完整的意思,那就可以定义成article。
nav和aside的使用也是如此,这两个标签也是特殊的section。
-------------------------------------------------------------------------------

当我们在官网下载完lungo,并嵌入网页使用的时候会出现网页整体式黑色的情况,这个的原因是没有引用quo.js

去quo.js网站下载。下载地址

并且,在引用的时候,最好把css放在之前引用,把js放在最后引用。例如:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="package-lungo-2.2.1/lungo.css">
<link rel="stylesheet" href="package-lungo-2.2.1/lungo.icon.css">
<link rel="stylesheet" href="package-lungo-2.2.1/lungo.theme.css">
<title>lungo测试</title>
</head>

<body>
<section id="main_section">
    <article id="main" class="active">
        {{CONTENT}}
    </article>
    <footer>
        <nav>
            <a href="#" data-icon="menu" class="active">个人</a>
            <a href="#" data-icon="share">分享</a>
            <a href="#" data-icon="user">用户</a>
            <a href="#" data-icon="users">群组</a>
        </nav>
    </footer>
</section>

<script src="package-lungo-2.2.1/quo.js"></script>
<script src="package-lungo-2.2.1/lungo.js"></script>
<script type="text/javascript">
Lungo.init({
	name:"example",
	resources:['section_to_load.html'],
	});
</script>
</body>
</html>




你可能感兴趣的:(lungo.js练习(一))