はじめてのjQuery mobile

最近、3分動画でマスターする初心者向けプログラミング学習サイト – ドットインストールの動画を見ています。

1つの動画が短いこと
最低限必要なことを教えてくれること
スマホ・タブレットでも見られること

もあり、未経験のトピックに抵抗がなくなります。じゃあ自分もやってみようという気になり、とてもいいサービスだと思います。という訳で、jQuery Mobileの動画を見たので、自分でもお試し。

メモ

jQueryのjsファイルと、jQuery mobileのjs/cssファイルを読み込む(公式サイトにコピペ用ページあり)
data-roleで階層を指定する

page

header
content
footer

headerの文言を、サービス名とかで固定するのはおかしい？ページに関する文言を書くの？

確認ページ：hello_jQuery_mobile.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>はじめてのjQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- http://jquerymobile.com/blog/2012/01/26/jquery-mobile-1-0-1-released/ -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

</head>

<body>

<!-- Home page -->
<div data-role="page" id="home">
	<div data-role="header">
		<h1>title</h1>
	</div>
	<div data-role="content" align="center">
		<h3>home</h3>
		hello, world.<br><br><br>
		<a href="#home">home</a> | <a href="#about">about</a>
	</div>
	<div data-role="footer">
		<h4>Copyright 2012</h4>
	</div>
</div>

<!-- About page -->
<div data-role="page" id="about">
	<div data-role="header">
		<h1>title</h1>
	</div>
	<div data-role="content" align="center">
		<h3>about</h3>
		This page is xxx.<br><br><br>
		<a href="#home">home</a> | <a href="#about">about</a>
	</div>
	<div data-role="footer">
		<h4>Copyright 2012</h4>
	</div>
</div>

</body>
</html>

参考サイト

3分動画でマスターする初心者向けプログラミング学習サイト – ドットインストール

はじめてのjQuery mobile

最近の投稿

タグクラウド