2012年8月版「Safari 5.1.7 for Windows」をダウンロードする方法
2012年8月6日現在、日本のアップル公式サイトでWindows版Safariのダウンロード先が見つかりにくい場所に変更されてしまいました。
Safari 6も現時点でMac版のみです。
アップルが Safari 6 を公開、Windows 版は終了? - Engadget Japanese
ステップ1:アップル公式サイト
↓アップル公式ページにアクセスします。アップル
ステップ2:ダウンロード
↓「サポート」>「ダウンロード」↓「Safari 5.1.7」をクリック
ステップ3:言語の罠
↓「言語」が日本語のままダウンロードボタンを押すと・・・↓なぜかSafariの説明ページに・・・?
↓「言語」を英語にしてダウンロードすると無事ダウンロードされます。
ステップ4:インストール手順
↓ダウンロードしたインストーラーを開くステップ5:インストール完了
↓ダウンロードページで英語を選択しましたが、インストールしたSafariはメニューバーも日本語になっています。jQueryMobileの基本
プレビュー
↓別ウィンドウを開いて見る
jQueryMobileの基本
※おすすめQRコード読み取りアプリ
お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格: 無料
ポイント
↓jQueryMobile公式サイト
jQuery Mobile | jQuery Mobile
↓jQueryMobile日本語リファレンスサイト
jQuery Mobile 1.1.0 日本語リファレンス
↓jQueryMobileの基礎を学べる記事
ASCII.jp:10分でわかる! jQuery Mobileのキホン
コード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>jQueryMobileの基本</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> </head> <body> <div data-role="page" id="index"> <div data-role="header"> <h1>jQueryMobile Test</h1> </div> <div data-role="content"> <p>jQueryMobileを利用しています。</p> <ul data-role="listview" data-inset="true" data-theme="c"> <li data-role="list-divider">メニュー</li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> <div data-role="footer"> <h4>© 2012 vinton </h4> </div> </div> </body> </html>
jQueryMobileのデザインテーマをいろいろ変更してみる
プレビュー
↓別ウィンドウを開いて見る
デザインテーマのデモ
※おすすめQRコード読み取りアプリ
お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格: 無料
ポイント
- 「data-theme」にa〜eのいずれかを指定する
- 「list-divider」のテーマを変更するには「ul」の「data-divider-theme」にa〜eのいずれかを指定する
コード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>デザインテーマのデモ</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> </head> <body> <div data-role="page" id="index"> <div data-role="header"> <h1>デフォルトテーマ</h1> </div> <div data-role="content"> <p>このページはデフォルトのままです。</p> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">テーマの種類</li> <li><a href="#theme_a">テーマ「a」</a></li> <li><a href="#theme_b">テーマ「b」</a></li> <li><a href="#theme_c">テーマ「c」</a></li> <li><a href="#theme_d">テーマ「d」</a></li> <li><a href="#theme_e">テーマ「e」</a></li> </ul> </div> <div data-role="footer"> <h4>© 2012 vinton </h4> </div> </div> <div data-role="page" id="theme_a" data-theme="a"> <div data-role="header" data-theme="a"> <a href="#index" data-icon="back">戻る</a> <h1>テーマ「a」</h1> </div> <div data-role="content" data-theme="a"> <p>テーマ「a」は黒と濃い灰色を基調としています。</p> <ul data-role="listview" data-inset="true" data-theme="a" data-divider-theme="a"> <li data-role="list-divider">メニュー</li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> <div data-role="footer" data-theme="a"> <h4>© 2012 vinton </h4> </div> </div> <div data-role="page" id="theme_b" data-theme="b"> <div data-role="header" data-theme="b"> <a href="#index" data-icon="back">戻る</a> <h1>テーマ「b」</h1> </div> <div data-role="content" data-theme="b"> <p>テーマ「b」は青色と薄灰色を基調としています。</p> <ul data-role="listview" data-inset="true" data-theme="b" data-divider-theme="b"> <li data-role="list-divider">メニュー</li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> <div data-role="footer" data-theme="b"> <h4>© 2012 vinton </h4> </div> </div> <div data-role="page" id="theme_c" data-theme="c"> <div data-role="header" data-theme="c"> <a href="#index" data-icon="back">戻る</a> <h1>テーマ「c」</h1> </div> <div data-role="content" data-theme="c"> <p>テーマ「c」は薄い灰色を基調としています。</p> <ul data-role="listview" data-inset="true" data-theme="c" data-divider-theme="c"> <li data-role="list-divider">メニュー</li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> <div data-role="footer" data-theme="c"> <h4>© 2012 vinton </h4> </div> </div> <div data-role="page" id="theme_d" data-theme="d"> <div data-role="header" data-theme="d"> <a href="#index" data-icon="back">戻る</a> <h1>テーマ「d」</h1> </div> <div data-role="content" data-theme="d"> <p>テーマ「d」は灰色を基調としています。</p> <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d"> <li data-role="list-divider">メニュー</li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> <div data-role="footer" data-theme="d"> <h4>© 2012 vinton </h4> </div> </div> <div data-role="page" id="theme_e" data-theme="e"> <div data-role="header" data-theme="e"> <a href="#index" data-icon="back">戻る</a> <h1>テーマ「e」</h1> </div> <div data-role="content" data-theme="e"> <p>テーマ「e」は黄色を基調としています。</p> <ul data-role="listview" data-inset="true" data-theme="e" data-divider-theme="e"> <li data-role="list-divider">メニュー</li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> <div data-role="footer" data-theme="e"> <h4>© 2012 vinton </h4> </div> </div> </body> </html>
jQueryMobileのページ切替効果をいろいろ試してみる
プレビュー
↓別ウィンドウを開いて見る
ページ切替効果
※おすすめQRコード読み取りアプリ
お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格: 無料
ポイント
- 「data-transition」にfadeやflipといった値を指定します。
- fade:ページがフェードイン/フェードアウトで切り替わる
- flip:ページが回転して切り替わる
- pop:ページが拡大しながら切り替わる
- turn:ページが左端を軸にターンして切り替わる
- flow:ページが浮き上がったようにして切り替わる
- slidefade:ページがフェードイン/フェードアウトしながら左右にスライドして切り替わる
- slide:ページが左右にスライドして切り替わる
- slideup:ページが下から上にスライドして切り替わる
- slidedown:ページが上から下にスライドして切り替わる
- none:切替効果なし
- ページ切替効果を逆回しにしたい場合は、「data-direction=“reverse”」を記述します。
コード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>ページ切替効果</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> </head> <body> <div data-role="page" id="index"> <div data-role="header"> <h1>ページ切替効果</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li><a href="#about" data-transition="fade">fade</a></li> <li><a href="#about" data-transition="flip">flip</a></li> <li><a href="#about" data-transition="pop">pop</a></li> <li><a href="#about" data-transition="turn">turn</a></li> <li><a href="#about" data-transition="flow">flow</a></li> <li><a href="#about" data-transition="slidefade">slidefade</a></li> <li><a href="#about" data-transition="slide">slide</a></li> <li><a href="#about" data-transition="slideup">slideup</a></li> <li><a href="#about" data-transition="slidedown">slidedown</a></li> <li><a href="#about" data-transition="none">none</a></li> </ul> </div> <div data-role="footer"> <h4>© 2012 vinton</h4> </div> </div> <div data-role="page" id="about"> <div data-role="header"> <a href="#index" data-icon="back">戻る</a> <h1>ページ切替効果</h1> </div> <div data-role="content"> <p>コンテンツ内容</p> </div> <div data-role="footer"> <h4>© 2012 vinton</h4> </div> </div> </body> </html>
jQueryMobileのサイトにGoogle マップを設置する
プレビュー
↓別ウィンドウを開いて見る
【jQueryMobile】Google マップの表示
※おすすめQRコード読み取りアプリ
お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格: 無料
ポイント
jQueryMobileで作られたサイトにGoogle Mapを表示させるには通常のスクリプトの他に
$('マップを表示するcontentのid名').live('pageshow',function(){ google.maps.event.trigger(map, 'resize'); map.setCenter('座標'); });
を追加します。
コード
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>【jQueryMobile】Google マップの表示</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> </head> <body> <div data-role="page" id="map"> <div data-role="header"> <h1>Google マップの表示</h1> </div> <div data-role="content" id="map_content"> <div id="map_canvas"></div> </div> <div data-role="footer"> <h4>© 2012 vinton</h4> </div> </div> </body> </html>
CSS
#map_canvas { width:100%; height:400px; border:4px solid #fff; -webkit-box-sizing: border-box; box-sizing: border-box; }
JavaScript
$(function() { var latlng = new google.maps.LatLng(35.69167,139.700211); var myOptions = { zoom: 16, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ position:latlng, map: map }); $('#map_content').live('pageshow',function(){ google.maps.event.trigger(map, 'resize'); map.setCenter(Latlng); }); });