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

時間  2019-11-06
標籤 lungo 使用說明 心得 中文 api 模型 部分 简体版
原文   原文鏈接
        最近在嘗試着作webapp應用，考慮應用要實現的功能，經過比對如今流行的幾套框架，最終肯定嘗試使用lungojs這個框架，通過幾周的體驗，感受還不錯 輕量小巧，迎合技術發展的腳步，完美的架構與html5+CSS3+JS,並且實現了扁平化，經過 quojs框架實現了各類設備的手勢和動做。在oschina上有一段簡單但貼切的 描述，您能夠經過訪問他的官方 網站，查看詳細信息而且能夠實際操做一下這個框架，還能夠下載源碼（也能夠經過github獲取最新 源碼）。

       其餘很少說，如下是我根據 官方文檔 ，整理我本身對該框架的理解和心得，有興趣的童鞋能夠嘗試一下 javascript

p.s  該框架只適用於支持html5的瀏覽器，Ie基本都不支持，你懂的~~~ css

框架結構

      相似於DIV+CSS佈局，這個框架根據html5新特性採用清晰的區塊加條目（section+article）的佈局方式 html

<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致使的。 html5

每一個section和article必須要有惟一標識屬性Id java

必須經過初始化，才能正確渲染並顯示頁面 git

該框架同時支持動態加載網頁的功能，更好的實現html代碼的分離，使頁面看起來更簡潔清晰
，其實現方式有兩種（將清晰的section結構放入特定名稱的html文件中） github

腳本 web

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

經過元素a.button, , div li 等有點擊事件元素的 data-async屬性實現相似功能 windows

<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的基本標籤模型就介紹的差很少了，本人也是使用不長時間，技術仍是初級級別，說的不對或比清楚的地方，還望前輩和高手多多指點。 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程