かなーりひさしぶりで・・・
ってまだ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
これからこちらのコードをいじっていきます。
(当分、教本のとおりですが・・・(^_^;))
良かったら、お付き合いください。