1. 技术文章
  2. Lungo 使用说明及心得 中文api —— 模型部分

Lungo 使用说明及心得 中文api —— 模型部分

由 时光怂恿深爱的人放手 提交于 2019-12-04 13:23:25
        最近在尝试着做webapp应用，考虑应用要实现的功能，通过比对现在流行的几套框架，最终确定尝试使用lungojs这个框架，经过几周的体验，感觉还不错 轻量小巧，迎合技术发展的脚步，完美的架构与html5+CSS3+JS,而且实现了扁平化，通过 quojs框架实现了各种设备的手势和动作。在oschina上有一段简单但贴切的 描述，您可以通过访问他的官方 网站，查看详细信息并且可以实际操作一下这个框架，还可以下载源码（也可以通过github获取最新 源码）。

       其他不多说，以下是我根据 官方文档 ，整理我自己对该框架的理解和心得，有兴趣的童鞋可以尝试一下

p.s  该框架只适用于支持html5的浏览器，Ie基本都不支持，你懂的~~~

框架结构

      类似于DIV+CSS布局，这个框架根据html5新特性采用清晰的区块加条目（section+article）的布局方式 

<link rel="stylesheet" href="components/lungo.brownie/lungo.css">
<link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
<link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css">
<section id="main">     
    <header></header>
    <article id="article_1"></article>
    <article id="article_2" class="active"></article>
    <footer></footer> </section> 
<script src="components/quojs/quo.js"></script>
<script src="components/lungo/lungo.js"></script>
<script type="text/javascript">
     Lungo.init({});
</script>

P.S.   此处个人建议把quoJS和LungoJS的引用放到页面的下方，即考虑到TTSR优化，在本人开始使用过程中遇到过提醒类Lungo.Notification无法正常显示的状况，将引用脚步放到下方解决；可能是在加载脚步的时候去判断了document导致的。

每个section和article必须要有唯一标识属性Id

必须通过初始化，才能正确渲染并显示页面

该框架同时支持动态加载网页的功能，更好的实现html代码的分离，使页面看起来更简洁清晰
，其实现方式有两种（将清晰的section结构放入特定名称的html文件中）

脚本 

Lungo.init({ 
   name: 'example', 
   resources: [
      'section_to_load.html'
   ]
});

通过元素a.button, , div li 等有点击事件元素的 data-async属性实现类似功能 

<section id="loader" data-transition="">
    <article id="art1" class="active">
        <a href="#main" data-router="section" data-async="section_to_load.html">
            转到
        </a>
    </article>
</section>

基础元素标签

一个页面中必须包含有带有Id属性的section和article标签，section是主要容器标签，aritcle控制显示的内容，页面中可以包含多个section片段,Lungo会自动显示最上面一个section;一个section可以包含一个或多个article，加载时需要显示哪个就设置class的属性值active 

<article id="article_1" class="active">
   显示部分
</article>
<article id="article_2">
   content
</article>
一个section中可以包含一个header和footer标签来显示头尾信息 

<section id="main" data-transition="slide">
 <header data-title="页头" data-icon="home">
 
 </header>
 <article id="article_1" class="scroll block">主体部分1
 <button data-view-section="second" data-label="article2"></button>
 </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="home"></a>
        </nav>
    </footer>
</section>
 

P.S 由于框架CSS样式文件的设置（Lungo.css的345和355行），需要设置section的data-transition属性，页脚才能正确的显示出来 

此处设计到几个标签属性

data-transition:页面跳转效果，仅有slide,cover和fade三种样式，跟JQM页面切换效果的多样性 没法比，而且仅支持section标签

data-title：设置标签的title名称，并添加.title样式

data-label: 设置标签的说明文字，多用在<a><button>等标签上，会自动生成<abbr>content</abbr>显示文字

data-icon: 设置元素的图标，同样图标样式也不是很丰富

data-view-*在后面的导航部分介绍

还有就是有一个scroll的样式是控制页面过长时自动显示滚动条

不得不提的还有Lungo中提到的aside标签，小巧清晰，充分利用也没左右侧面积的动态效果，点击滑动和隐藏。常用的效果有左侧划入和右侧划入，可以做app的设置页面、导航、页面配置等 

<section id="main111" data-transition="slide">
		<header data-title="页头" data-icon="home">
			
		</header>
		<article id="article_1" class="scroll block">主体部分1
			<button data-view-section="aside" data-label="article2"></button>
		</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="home"></a>
        </nav>
    </footer>
</section>
<section id="aside" data-transition="slide" data-aside="right">
    <header data-title="Asides" data-back="chevron-left">
        <nav class="on-right">
            <button data-view-aside="right" data-icon="menu"></button>
        </nav>
    </header>
    <article id="aside-example"></article>
</section>

<aside id="right" data-transition="right">
    <header data-title="Example of Aside"></header>
    <article class="list active">
        <ul>
            <li data-view-aside="right" data-icon="user">
                <strong>Tap to close</strong>
            </li>
        </ul>
    </article>
</aside>

此处的几个主要属性

data-trantision:控制aside的划入位置，有left和right

data-aside: 为section指定aside侧边栏，此处属性值必须是aside的id值

class=“on-right”: 是设置html标签显示位置的，经常要用，默认是on-left

导航

无论是用lungo构建html代码，还是用LungoJS操作html页面，导航都比不可少,下面我就跟html和js对应实现同一效果进行说明

data-views-*

P.s data-view-*属性只支持小屏幕，在windows上把浏览器最大化就失常了

data-view-section: 通过点击事件跳转到指定section，通过section的data-transition设置转换样式; 

<button data-view-section="aside" data-icon="menu"></button>

对应的LungoJS代码是 

Lungo.Router.section("features");//此处是section的id属性值，不加#
data-view-article: 通过点击转换不同的article 
<button data-view-article="article_1" data-label="article1"></button>
<!--这个属性只能是同一个section中使用-->
<a data-view-article="list" data-async="articles/list.html" data-icon="list" data-label="列表"></a> <!--可以跳转到特定页面的特定article-->
对应的LungoJS代码是 
Lungo.Router.article("section_id", "article_id");
data-view-aside:   通过点击调出aside，代码见以上aside

data-back

页面的返回事件属性 

<section id="main111" data-transition="slide">
		<header data-title="页头" data-icon="home"></header>
		<article id="article_1" class="scroll block">
			主体部分1
			<button data-view-section="second" data-label="article2"></button>
		</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="home"></a>
			</nav>
		</footer>
	</section>
	<section id="second" data-transition="slide" >
		<header data-back="reply"></header>
		<article id="second_article">
			<button data-view-section="back" data-icon="left" data-label="返回"></button>
		</article>
	</section>
以上有两处实现了返回的功能，一个是data-back属性，属性值是icon图标；一个是通过data-view-section="back"实现。转换效果就是通过section上的data-transition 指定值实现

ps，data-back效果只适用于section标签 ，所以此处通过data-view-section也可以实现

对应LungoJS代码是 

Lungo.Router.back();

Nav

之前说过Lungo贴合html5的另一个特性就是<nav> 标签定义导航链接的部分，通过样式on-right/on-left控制显示位置，此标签可以放在任何地方

页头部分 

<section id="detail" data-transition="slide">
    <header data-back="reply">
	<nav class="on-right">
		<a href="#" data-view-menu="options-icons" data-icon="cogs"></a>
	</nav>
</header>
<nav id="options-icons" data-control="menu" class="icons">
	<a href="#" data-icon="adjust" id="off">夜间模式</a>
	<a href="#" data-icon="lightbulb" id="lightbulb">日间模式</a>
</nav>
<article id="content" class="scroll block"></article>
</section>

此处设置的class="icons"属性是让menu以图标的形式显示，默认是列表样式

正文部分 

<section id="main" data-transition="slide" data-pull="arrow-down">
		<header></header>
		<nav data-control="groupbar">
		<a href="#" data-view-article="latest" data-label="最新"></a>
		<a href="#" data-view-article="hottest" data-label="最热"></a>
		<a href="#" data-view-article="gallery" data-label="图片新闻"></a>
		<a href="#" data-view-article="video" data-icon="video" data-label="视频新闻"></a>
		<a href="#" data-view-article="star" data-label="收藏"></a>
	</nav>
	<article id="latest" class="list indenteds scroll"></article>
</section>

页尾部分 

<section id="detail" data-transition="slide">
	<header data-back="reply"></header>
<article id="content" class="scroll block"></article>

<footer>
	<nav>
	<a href="#" data-view-article="" data-icon="star" class="active"></a>
	<a href="#" data-view-article="" data-icon="comment"></a>
	<a href="#" data-view-article="" data-icon="share-alt"></a>
	<a href="#" data-view-article="" data-icon="download" id="offline"></a>
</nav>
</footer>
</section>

此处又多一个data-view-menu属性，用来调用data-control="menu"导航标签,但是当点击下来选择菜单时，一个也不想选，Lungo不会自动以藏，这个在后面的Lungo.Element.Menu.hide()可以解决这个bug（个人感觉这是个bug）

Ps 在我做的时候一般是把menu放在页头页尾，groupbar放在正文，显示在正文顶部，此处可以通过左右手势切换标签。官方文档中说使用groupbar时，在页头中设置class="extended"，nav设置class="groupbar"，在我使用时，这个两个值不起作用；

Bindings

此部分的data-title前面已经提到，还有一个就是data-title 

<section id="main">
    <header data-title="Title of section">
        <nav class="on-right">
            <button data-article="second" data-view-article="first" data-icon="arrow-left"></button>
            <button data-article="first" data-view-article="second" data-icon="arrow-right"></button>
        </nav>
    </header>
    <article id="first" class="active">first</article>
    <article id="second">second</article>
</section>
此时可以控制按钮在哪个article被激活时显示

      

表单元素

几乎所有html5中的表单元素，Lungo框架中的都支持，当然前提是浏览器和移动设备支持。

列表

列表几乎是最常用的，其实是很简单的就是一个属性class="list" ,支持缩减 indenteds，支持滚动条 scroll，其余样式自己设置就好了

总结：

到此，Lungo的基本标签模型就介绍的差不多了，本人也是使用不长时间，技术还是初级级别，说的不对或比清楚的地方，还望前辈和高手多多指点。 

标签
Lungo
移动开发
webapp
框架
api
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!