読者です 読者をやめる 読者になる 読者になる

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

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

ナビゲーションバーを表示してみる

ナビゲーションバーは5つまでは横並びに表示できるけれど、6つ以上になると、2列の並びになってしまう。ナビゲーションを定義するのは、 <div data-role="navbar"> というもの。こんな風に表示してみる。 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=divice-width, initial-scale=1"> <title>jQuery Mobile Example</title> </meta></meta></head></html></div>

ヘッダーを表示してみる

■スウォッチの指定方法 スウォッチはカラーバリエーションを定義するときに使います。 スウォッチを指定するには、「data-theme」というカスタムデータ属性を用います。 a~eの5つが標準で用意されています。 <div data-role="page" data-theme="d"> aaa </div> ■ヘッダーを表示する ヘッダーを作るひな形…

jQuery Mobileでポップアップを出す方法。ポップアップをオーバーレイで、背景を半透明で暗くして出す方法。

スマホ上にポップアップを出したい時がある。 クリックした際に、ちょっとした注意喚起のような、そんなポップアップ。 イメージとしてはこんな感じ。 こんな風にポップアップを出すのはけっこう簡単で、以下のようなコードを書けばいい。 <html lang="ja"> <head> <title>ポップアップ</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </meta></meta></head></html>

jQuery Mobileでリストビューを折りたたんだり開いたりする。リストのアイコンを矢印にする。

jQuery Mobileでリストビューを折りたたむ方法 例えばお菓子のメニューを作る時。 ケーキ チーズケーキ ショートケーキ レーズンケーキ クッキー ビタークッキー ラブクッキー クッキークリッカー みたいな感じで、項目ごとにリストにして、クリックで開くよ…

jQuery Mobileで折りたたみコンテンツを作る

jQuery Mobileで折りたたみコンテンツを実現するには、div要素などのコンテナに「data-role="collapsible"」属性を加える。 その後の最初のh要素が「見出し」となって、その後ろが折りたたみできるようになる! 最初から折りたたみが開かれた状態で表示した…

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>

pageinitとmobileinit

toggle()メソッド jQueryのtoggle()メソッドは実行されるたびに表示/非表示を切り替えるメソッド。 引数にはアニメーションのスピードを設定する。 jQueryにおける$(document).ready(function() {}); JavaScriptでDOMを操作するためには、Webページのロード…

jQuery Mobileでヘッダやフッターに戻るやホームボタンを配置する方法

jQuery Mobileでヘッダに「戻る」ボタンを配置する方法 ヘッダーの部分に、data-rel="back"を配置すればいい。 data-iconにはアイコンを指定する。 <div data-role="header"> <a href="hoge.dummy" data-icon="back" data-rel="back">前へ</a> <h1>jQuery Mobileさん</h1> </div> jQuery Mobileでヘッダにホームボタンを配置する方法 ヘッダにhref属性にホームペ…

jQuery Mobileでテーマを利用する。サイトデザインをGUIで設定できるThemeRollerについて。

jQuery Mobileのスウォッチ jQuery Mobileにはテーマというのが用意されていて、テーマにはスウォッチを設定することができる。 テーマにスウォッチを設定することで、簡単にデザインを適用することができるようになっている。スウォッチとはヘッダ/フッタ/…

jQuery Mobileでグループ化したリストビューを作成したり、ページの先頭へ戻るボタンを設置する方法。

jQuery Mobileでリストビューを作成する。 jQuery Mobileで、スマホによくあるリストを作成する方法は以下の通り。 <div data-role="top" id="top"> <div data-role="listview"> <li>トリコ</li> <li>NARUTO</li> <li>黒子のバスケ</li> </div> </div> リストの項目をグループ化するのは、 <li data-role="list-divider">ジャンプの注目マンガ</li> のようにdata-role="list-divider"を使う。 リ…

jQuery Mobileの最も単純なサンプルを作ってみる。

CDN(Content Delivery Network)とは CDNとは、その名が示す通り、さまざまなWebコンテンツの配布に最適化されたネットワークである。 jQueryのライブラリもCDN経由で読み込むことが推奨されているが、この場合はインターネット接続が必須となる。 cssとかjs…