琐碎的学习——接触html5开发

从互联网开发者要转到手机开发不是一朝一夕的事情，不说android与ios复杂繁琐的接口，java与objc的语法就够我学好一阵子了。最近接触了点html5的东西，感觉将html5技术用于手机端开发起来确实容易很多。

网上有很多不错的html5框架，如sencha touch与lungo等，我这里处于学习了解的目的，使用lungo写点代码。

首先下载lungo和quojs两个js库

创建一个最简单的lungo应用程序，包含下面几个部分

1，section（主容器）

2，article（必须放置在section里面，并且配置class为active）

3，添加依赖库（quo.js与lungo.js文件）

4，初始化lungo

注意每个section与article都必须包含id标记

代码如下：

<body class="app">
    <section id="main" data-transition="">
        <article id="main-article" class="active">
	Hello World
        </article>
    </section>

    <!-- Lungo - Dependencies -->
    <SCRIPT SRC="components/quojs/quo.js"></SCRIPT>
    <SCRIPT SRC="components/lungo/lungo.js"></SCRIPT>
    <!-- Lungo - Sandbox App -->
    <SCRIPT>
        Lungo.init({
            name: 'example'
        });
    </SCRIPT>
</body>

<section>块是我们应用程序显示的地方，可以包含子元素<header>,<footer>,<article>

<header>块指定title，增加导航button（进入上一个/下一个section，进入其它article或者打开侧边栏菜单aside menu）

<article>包含具体内容，一个<section>可以包含多个<article>元素，将需要被显示的article的样式class设置为active

详细代码如下：

index.html

<html>
<head>
<meta charset="utf-8">
<title>影评网</title>
	<meta name="description" content="">
	<meta name="author" content="Javier Jiménez Villar (@soyjavi)">
	<meta name="HandheldFriendly" content="True">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<meta http-equiv="cleartype" content="on">

	<link rel="stylesheet" href="l/lungo.css">
	<link rel="stylesheet" href="l/lungo.icon.css">
	<link rel="stylesheet" href="l/lungo.icon.brand.css">
	<link rel="stylesheet" href="l/theme.lungo.css">
	
	<link rel="stylesheet" href="diy.css">
</head>

<body class="lungoapp">
	<!-- Lungo - Dependencies -->
<SCRIPT SRC="q/quo.js"></SCRIPT>
<SCRIPT SRC="l/lungo.js"></SCRIPT>
	<!-- Lungo - Sandbox App -->
	<SCRIPT>
	Lungo.init({
		name: 'example',
		resources: ['resources.html']
	});
</SCRIPT>
</body>

</html>

resourse.html

<section id="main" data-pull="normal" data-transition="slide">
<header data-title="视频之窗">
<nav>
<a href="#features" data-router="aside" data-icon="menu"></a>
</nav>
</header>
<article id="movie_list" class="active list scroll indented bigfont">
	<ul>
		<li class="accept arrow">
			<a href="#dtmain" data-router="section">浙沪新发现两例禽流感</a>
		</li>
		<li class="cancel arrow">实拍粤警方街头抓毒贩</li>
		<li class="accept arrow">曝&lt;歌手&gt;幕后炒作内幕</li>
		<li class="cancel arrow">古惑仔穿越组队兄弟连</li>
		<li class="accept arrow">&lt;箭在弦上&gt;女版绿箭侠</li>
		<li class="cancel">&lt;仁心解码2&gt;衰男泡妞</li>
	</ul>

</article>
<footer class="scroll">
<nav>
<a href="#back" data-icon="left" data-router="section"></a>
<a href="#" data-icon="home"></a>
<a href="#forward" data-icon="right"></a>
</nav>
</footer>
</section>

<section id="tdmain" data-pull="normal" data-transition="slide">
<header data-title="土豆网">
<nav>
<a href="#main" data-router="section" data-icon="home"></a>
</nav>
</header>

<article id="td_movie_list" class="active list scroll indented bigfont">
	<ul>
		<li class="accept">董洁被指主动勾引王大治</li>
		<li class="cancel">板蓝根可预防H7N9禽流感</li>
		<li class="accept">男生寝室优雅小资照走红</li>
		<li class="cancel">酒肚哥的忘情自嗨舞爆红</li>
		<li class="accept">愚人节当天范范也被恶搞</li>
		<li class="cance">小小麻将牌玩法却大不同</li>
	</ul>
</article>
</section>

<section id="ykmain" data-pull="normal" data-transition="slide">
<header data-title="优酷网">
<nav>
<a href="#main" data-router="section" data-icon="home"></a>
</nav>
</header>

<article id="yk_movie_list" class="active list scroll indented">
	<ul>
		<li class="accept bigfont">在爷爷身边疯跑的日子</li>
		<li class="cancel bigfont">中国动画也能这么牛！</li>
		<li class="accept bigfont">好饿好饿！快到碗里来</li>
		<li class="cancel bigfont">如何三步谋杀一场爱情</li>
		<li class="accept bigfont">香艳美人肉搏</li>
		<li class="cancel bigfont">动画也能这么</li>
	</ul>
</article>
</section>

<section id="dtmain" data-transition="slide">
<header data-title="优酷网">
<nav>
<a href="#back" data-icon="left" data-router="section"></a>
</nav>
</header>

<article id="details" class="active">
        <div class="form">
            <fieldset data-icon="plus">
                <label>电影:</label>
                <input type="text">
            </fieldset>
            <fieldset>
                <label>写点评价:</label>
                <br>
                <input type="text">
            </fieldset>
            <fieldset>
                <textarea></textarea>
            </fieldset>
        </div>
</article>
</section>

<aside id="features">
<header data-title="视频库"></header>
<article class="active list scroll indented center">
	<ul>
		<li data-icon="home" class="bigfont">
			<a href="#ykmain" data-router="section">
                    <div class="right blue tag">5</div>
                    <strong>优酷</strong>
            </a>
		</li>
		<li data-icon="home" class="bigfont">
			<a href="#tdmain" data-router="section">
                    <div class="right blue tag">4</div>
                    <strong>土豆</strong>
            </a>
		</li>
	</ul>
</article>
</aside>

<SCRIPT>
var pull_example = new Lungo.Element.Pull('#movie_list', {
    onPull: "Pull down to refresh",
    onRelease: "Release to get new data",
    onRefresh: "Refreshing...",
    callback: function() {
        alert("Pull & Refresh completed!");
        pull_example.hide();
    }
});
</SCRIPT>

效果截图如下：

程序有不少bug，还不清楚lungo的样式如何使用以及js事件如果使用。不过感觉html5无论是用在做wap网站还是手机应用都是很不错的选择。

琐碎的学习——接触html5开发

猜你喜欢