"情熱プログラマ" になっちゃるけんね

情熱プログラマ目指してます!

かなーりひさしぶりで・・・

ってまだ2回目じゃないですか!
orz

まぁ、それは良しとして。。。
よ〜し、今日からまじめにブログ続けていこっと。

http://blog.livedoor.jp/dankogai/archives/51837985.html
小飼弾さんのこの記事に触発されて私もコードを表に出していこうと決意しました。


が、ビビリなので、今日は現在勉強中のjQueryMobileのコードを
ブロク公開の練習も兼ねて晒してみます。

もろ、O'REILLYの『jQuery Mobile』のまんまなんですが・・・(;´∀`)

index.html

<!DOCTYPE html>
<html>
  <head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobileアプリケーション</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  </head>
  <body>
    <!-- ここから1ページ目 -->
    <section id="page1" data-role="page">
      <header data-role="header"><h1>jQuery Mobile</h1></header>
      <div class="content" data-role="content">
        <p>
		  初めてのページ!
		</p>
        <p><a href="#page2" data-rel="dialog">2ページ目へGo!</a></p>
      </div>
      <footer data-role="footer"><h1>toku345</h1></footer>
    </section>
    <!-- ここまで1ページ目 -->
    
    <!-- ここから2ページ目 -->
    <section id="page2" data-role="page" data-add-back-btn="true">
      <header data-role="header"><h1>jQuery Mobile</h1></header>
      <div class="content" data-role="content">
        <p>2ページ目!</p>
        <p><a href="#page3">3ページ目へGo!</a></p>
      </div>
      <footer data-role="footer"><h1>toku345</h1></footer>
    </section>
    <!-- ここまで2ページ目 -->
    
    <!-- ここから3ページ目 -->
    <section id="page3" data-role="page" data-add-back-btn="true">
      <header data-role="header"><h1>jQuery Mobile</h1></header>
      <div class="content" data-role="content">
        <p>3ページ目!</p>
        <p><a href="external.html">外部ページヘGo!</a></p>
      </div>
      <footer data-role="footer"><h1>toku345</h1></footer>
    </section>
    <!-- ここまで3ページ目 -->
  </body>
</html>

おう、こうやって公開するのか。
もういっちょ!

external.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>    
    <p>このコンテンツは無視されます。</p>

    <!-- ここから4ページ目 -->
    <section id="page4" data-role="page" data-add-back-btn="true">
      <header data-role="header"><h1>jQuery Mobile</h1></header>
      <div class="content" data-role="content">
        <p>外部ページ!</p>
        <p><a href="#page1">1ページ目へ戻る</a></p>
      </div>
      <footer data-role="footer"><h1>toku345</h1></footer>
    </section>
    <!-- ここまで4ページ目 -->

    <p>このコンテンツは無視されます。</p>

    <!-- ここから3ページ目 -->
    <section id="page3" data-role="page" data-add-back-btn="true">
      <header data-role="header"><h1>jQuery Mobile</h1></header>
      <div class="content" data-role="content">
        <p>3ページ目!</p>
        <p><a href="external.html">外部ページヘGo!</a></p>
      </div>
      <footer data-role="footer"><h1>toku345</h1></footer>
    </section>
    <!-- ここまで3ページ目 -->    
  </body>
</html>

なるほど。
結構簡単に公開できるのね。

実際に動くのはこちら↓
http://49.212.131.62/jqm/index.html

これからこちらのコードをいじっていきます。
(当分、教本のとおりですが・・・(^_^;))

良かったら、お付き合いください。