LUNGO 框架：渲染前后对比

渲染前后对比

DATA-SET

HTML

data-icon

<a href="#"data-icon="menu"></a>

=》

<a data-icon="menu"href="#">

<span class="icon menu"></span>

</a>

data-title

<header data-title="Layout"></header>

=》

<header data-title="Layout">

<h1 class="title centered">Layout</h1>

</header>

data-label

<a data-label="Settings"></a>

=》

<a data-label="Settings">

<abbr>Settings</abbr>

</a>

data-count

<a data-count="25"></a>

=》

<a data-count="25">

<span class="tag count">25</span>

</a>

data-back

<header data-back="chevron-left"></header>

=》

<header data-back="chevron-left">

<nav class="left">

<a data-view-section="back"href="#">

<span class="icon chevron-left"></span>

</a>

</nav>
</header>

<header data-back="chevron-right"></header>

=》

<header data-back="chevron-left">

<nav class="left">

<a data-view-section="back"href="#">

<span class="icon chevron-right"></span>

</a>

</nav>
</header>

data-progress

<div data-progress="25%"></div>

=》

<div class="progress">

<span class="bar">

<span class="value"style="width:25%;"></span>

</span>

</div>

Data-pull

HTML代码 由data-pull驱动生成，行为处理要调用js接口

<section data-transition="slide"data-pull="arrow-down">

</section>

=》

<section data-transition="slide"data-pull="arrow-down">

<div data-control="pull"data-icon="arrow-down">

<div class="loading ">

<span class="top"></span>

<span class="right"></span>

<span class="bottom"></span>

<span class="left"></span>

</div>

<span class="icon arrow-down"></span>

<strong>Refreshing...</strong>

</div>

</section>

下拉的时候显示：Pull down to refresh

反弹上去的时候显示：Release to get new data

// 行为设置

// pull down页：section#pull

// pull down页 内容区域：section#pull article

App.pull = new Lungo.Element.Pull('section#pull article', {

// 汉化操作

onPull: "向下拉更新",

onRelease: "鬆開獲取新數據",

onRefresh: "正在刷新",

callback: function() {

alert("刷新完成!");

App.pull.hide();

}

});

data-action

最后一个参数为弹出框停留事件，单位秒。

Lungo.Notification.show('user', 'Title', 2);

=》

<div class="notification">

<div class="window growl">

<span class="icon user"></span>

<strong class="text bold">Title</strong>

<small>&nbsp;</small>

</div>

</div>

Lungo.Notification.show();

setTimeout(Lungo.Notification.hide, 3000);

=》

<div class="notification">

<div class="window growl">

<div class="loading white">

<span class="top"></span>

<span class="right"></span>

<span class="bottom"></span>

<span class="left"></span>

</div>

</div>

</div>

Lungo.Notification.confirm({

icon: 'user',

title: 'Title',

description: 'Description',

accept: {

icon: 'checkmark', // 框架没有显示对应的icon

label: 'Accept',

callback: function(){ alert("Yes!"); }

},

cancel: {

icon: 'close', // 框架没有显示对应的icon

label: 'Cancel',

callback: function(){ alert("No!"); }

}

});

=》

<div class="notification">

<div class="window confirm">

<span class="icon user"></span>

<strong class="text bold">Title</strong>

<small>Description</small>

<!--anchor 的样式可以省略-->

<button class="anchor"data-callback="accept">Accept</button>

<button class="anchor"data-callback="cancel">Cancel</button>

</div>

</div>

Lungo.Notification.html('<h1>Hello World</h1>', "Close");

=》

<div class="notification">

<div class="window html undefined">

<h1>Hello World</h1>

<button data-action="close"class="anchor">Close</button>

</div>

</div>

Lungo.Notification.success('Title', 'Description', 'ok', 2);

=》

<div class="notification">

<div class="window success">

<span class="icon ok"></span>

<strong class="text bold">Title</strong>

<small>Description</small>

</div>

</div>

Lungo.Notification.error('Title', 'Description', 'remove', 2);

=》

<div class="notification">

<div class="window error">

<span class="icon remove"></span>

<strong class="text bold">Title</strong>

<small>Description</small>

</div>

</div>