@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

iPad

jQueryMobileでiPad向けの2カラムのWebページをデザインする まとめ

iQueryMobileを使って2カラム、(2ペイン)をデザインしてきました。 単純な画面遷移まではそれなりに実装出来たかと思いますので、ひとまずこれでまとめて、終わりとしたいと思います。 その後も色々と変更していますが、githubに上げました。まだまだ発展…

jQueryMobileでiPad向けの2カラムのWebページをデザインする その6

前回まででメニューの画面遷移が実装出来たので、今度はコンテンツ部分の実装に入ります。 こちらは、ほぼメニューと同じですね。面白みが無いです。 コンテンツを読み込む コンテンツを読み込む処理ですが、メニュー側でボタンを押された場合は戻るボタンは…

jQueryMobileでiPad向けの2カラムのWebページをデザインする その5

前回はメニューの画面遷移を実装しました。しかしながら遷移しただけで戻れないと言う致命的な欠陥がありますので、戻るボタンを実装しようと思います。 jQueryMobileでは画面遷移をURLのハッシュで管理していますね。でも2カラムだとどうしようもないので、…

jQueryMobileでiPad向けの2カラムのWebページをデザインする その4

前回までで基本的なデザインは出来上がりました。と言うことにしておきましょう。 次は画面遷移をしたいと思うのですが、jQueryMobileのデフォルトの挙動ではメニュー部分だけとか、コンテンツ部分だけを画面遷移させることが出来ないですね。 という訳で、…

jQueryMobileでiPad向けの2カラムのWebページをデザインする その3

さて、2カラムのデザイン部分だけ作りましたが、横向きだけの実装になっています。 そこで、今回は横向きと縦向きの表示を変えてみたいと思います。 とは言うもの、MediaQuery?MediaQueries?で出来ますので、CSSだけを編集しましょう。 sample.css div.ipa…

jQueryMobileでiPad向けの2カラムのWebページをデザインする その2

前回はレイアウトを組むところまででした。今回は組んだレイアウトの中にコンテンツを入れていこうとおもいます。 メニューを作る まずは、jQueryMobileのListViewを入れます。 sample.html <ul data-role="listview"> <li><a href="#">Menu-1</a></li> </ul> これはこまった、スクロール出来ませんし、ヘッダは固定…

jQueryMobileでiPad向けの2カラムのWebページをデザインする その1

なるべくネイティブ感を出したいので、jQueryMobileを使っているのですが、現状では2カラムのデザインってあんまり無いようなんですよね。 参考にしているデザインはiPadの設定アプリの画面の感じです。 jQueryMobileのバージョンは、1.1.1です。 骨組みを作…