感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQuery Mobileでリストビューを作ったり、リストビューの中に概要を書いたりする方法

<スポンサーリンク>

jQuery Mobileでフッターを固定する

以下のように、data-position="fixed"属性を設定することで、フッターを固定することができる。

<div data-role="footer" data-position="fixed">
	<p style="text-align:center"><small>Copyright &copy; 2013 sho322</small></p>
</div>

jQuery Mobileで1ページ分を作るためのdata-role

<div data-role="page" id="top">
	<div data-role="header">
		<h1>目次</h1>
	</div>

	<div data-role="footer" data-position="fixed">
		<p style="text-align:center"><small>Copyright &copy; 2013 sho322</small></p>
	</div>
</div>

こんな感じで、data-role="page"のdiv要素で囲った部分が画面1ページ分になる。

jQuery Mobileでリストビューを作る。

こんな感じで、

<ul div data-role="listview">

で囲んで、li要素を並べていけばいい。

<div data-role="content">
	<ul div data-role="listview">
		<li><a href="#naka">大企業の中の人について</a></li>
		<li><a href="#kechi">会社員ってけっこうケチな件</a></li>
		<li><a href="#tsumaran">賢い人はたくさんいるけど、面白い人はあまりいない件</a></li>
	</ul>
</div>

jQuery Mobileでリストビューをキーワードで絞り込めるようにする

<ul div data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="キーワードで絞込み">

のように、data-role="listview"のところに属性を追加する。

リストビューに見出しを表示する。

こんな感じで、li要素の中に色々書くと、リストビューの中に見出しみたいに概要を表示することができる。

<div data-role="content">
	<ul div data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="キーワードで絞込み">
		<li>
			<a href="#naka">
			<h3>大企業の中の人について</h3>
			<p>
			会社に入って金をもらうようになって、ふと気付いたのは、会社員ってケチじゃね?ってことだ。
			みんなチマチマした金をケチる割に、どうでもいいことに自分のために金を使う。そういう所が見ていて嫌だ。
			</p>
			</a>
		</li>
		<li><a href="#kechi">会社員ってけっこうケチな件</a></li>
		<li><a href="#tsumaran">賢い人はたくさんいるけど、面白い人はあまりいない件</a></li>
	</ul>
</div>

あらすじてきなことを書いたとしても、中の文字列が多いと、「会社に入って金をもらうように...」みたいな感じで省略されてしまう。
そういう省略が嫌な場合は、head要素内に以下を追記すると、文字列が折り返しで表示される。

<style>
	.ui-li-desc {
		white-space: normal;
	}
</style>

上記のサンプルで使ったHTML全体像

<!DOCTYPE html>
<html lang="ja">
<head>
<title>マルチページのてすと</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style>
	.ui-li-desc {
		white-space: normal;
	}
</style>
</head>
<body>
<div data-role="page" id="top">
	<div data-role="header">
		<h1>目次</h1>
	</div>
	<div data-role="content">
		<ul div data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="キーワードで絞込み">
			<li>
				<a href="#naka">
				<h3>大企業の中の人について</h3>
				<p>
				会社に入って金をもらうようになって、ふと気付いたのは、会社員ってケチじゃね?ってことだ。
				みんなチマチマした金をケチる割に、どうでもいいことに自分のために金を使う。そういう所が見ていて嫌だ。
				</p>
				</a>
			</li>
			<li><a href="#kechi">会社員ってけっこうケチな件</a></li>
			<li><a href="#tsumaran">賢い人はたくさんいるけど、面白い人はあまりいない件</a></li>
		</ul>
	</div>
	<div data-role="footer" data-position="fixed">
		<p style="text-align:center"><small>Copyright &copy; 2013 sho322</small></p>
	</div>
</div>
<div data-role="page" id="naka">
	<div data-role="header">
		<h1>大企業の中の人</h1>
	</div>
	<div data-role="content">
		<h2>大企業に新卒で入ってくる人はプライド高い人が多い?</h2>
		<p>大学で合った友達よりも、会社で出会う友達とか知り合いのほうが、高慢な人が多いのはなんでだろう?すごく自信家でナルシストが多い</p>
	</div>
	<div data-role="footer" data-position="fixed">
		<p style="text-align:center"><small>Copyright &copy; 2013 sho322</small></p>
	</div>
</div>
<div data-role="page" id="kechi">
	<div data-role="header">
		<h1>会社員ってケチじゃね?</h1>
	</div>

	<div data-role="footer" data-position="fixed">
		<p style="text-align:center"><small>Copyright &copy; 2013 sho322</small></p>
	</div>
</div>
<div data-role="page" id="tsumaran">
	<div data-role="header">
		<h1>賢い人はたくさんいるけど、面白い人はあまりいない件</h1>
	</div>

	<div data-role="footer" data-position="fixed">
		<p style="text-align:center"><small>Copyright &copy; 2013 sho322</small></p>
	</div>
</div>
</body>
</html>

読んだ本


本当に基本の基本から丁寧に解説してくれるので、迷いなくサンプルを作り始めることができる。

感謝のプログラミング

今回で感謝のプログラミングは【652時間目】
10000時間まで、あと【9348時間】