2011年11月29日

jQuery Mobileのアニメーションの速度を変更する

jQuery Mobileのアニメーションの速度を変更する方法、次のCSSでアニメーション速度の制御が変更可能


.in, .out {
-webkit-animation-duration: 350ms;
}


タグ:jQuery Mobile
posted by ねこまんま at 08:36 | Comment(0) | TrackBack(0) | jQuery Mobile | 更新情報をチェックする

2011年05月31日

jQuery Mobileでページ遷移後にアドレスを消す

jQuery MobileでTOPページは読み込み後にアドレスバーが消えるのに、ページ遷移後にアドレスバーが表示され続けるのが気持ち悪のでJavaScriptで対応してみた。

$('div').live('pageshow',function(){
setTimeout("scrollTo(0,1)", 100);
});


pageshowイベントにアドレスバーを消す命令を仕込む。ただ、Android端末によっては背景の描画がおかしくなったりとちょっと微妙な気もする。
posted by ねこまんま at 01:05 | Comment(0) | TrackBack(0) | jQuery Mobile | 更新情報をチェックする

2011年05月02日

jQuery Mobileで data-themeが反映されない

jQuery Mobileでdata-themeを指定するとどうもうまく反映されないパターンがある。

<div data-role="page" data-theme="e" id="index">


list-dividerで設定してる項目がどうしても反映されない、そういった場合はclass="ui-btn-up-e"を追加することで反映される。

<li data-role="list-divider" class="ui-btn-up-e">


ただ、アクティブな箇所など反映されない箇所も多い。早く安定してベータにならんかな。
posted by ねこまんま at 21:24 | Comment(0) | TrackBack(0) | jQuery Mobile | 更新情報をチェックする

2011年04月20日

jQuery Mobileで共通フッターを設定する

jQuery Mobileではフッターに関しては遷移時にアニメーションを行わないように設定することが可能です。

<footer data-role="footer" data-position="fixed" data-id="myfoote">


fotterにたいしてdata-id属性で共通の属性値をふることで、ページ遷移時にフッターは固定されたままです。この機能は「data-position="fixed"」が指定されている場合のみ利用できます。
タグ:data-id
posted by ねこまんま at 13:18 | Comment(0) | TrackBack(0) | jQuery Mobile | 更新情報をチェックする

jQuery Mobileのheaderに配置されるボタン

jQuery Mobileの2ページ目以降のheader内には戻るボタンが表示される。それを非表示にするにはheaderに「data-backbtn="false"」を指定する。

<header data-role="header" data-backbtn="false">
<h1>header</h1>
</header>


header直下にa要素を配置すると独自のボタンを設置することができる。最初のa要素はheaderの左に、次のa要素はみぎに配置される。3個目移行は2行目以降に表示される(これは想定される動作ではないので利用しないこと)。

<header data-role="header">
<a href="index.html" data-icon="delete">Cancel</a>
<h1>header</h1>
<a href="index.html" data-icon="check">Save</a>
</header>


また、data-role="page"にdata-back-btn-tex属性で戻るボタンのテキストを指定することが出来る。

<section id="page2" data-role="page" data-back-btn-text="previous"gt;


独自に設置したボタンには「ui-btn-right"」もしくは「ui-btn-right"」というclass属性を指定することで表示位置を指定できる。

<a href="index.html" data-icon="gear" class="ui-btn-right">Options</agt;
posted by ねこまんま at 04:52 | Comment(0) | TrackBack(0) | jQuery Mobile | 更新情報をチェックする

2011年04月19日

jQuery Mobileでヘッダーやフッターを固定

jQuery Mobileではdata-role="header"やdata-role="footer"にdata-position="fixed"を指定することで擬似的にヘッダーやフッターを固定できる。

<header data-role="header" data-position="fixed">


これはあくまで擬似的でスクロールがスタートした際にヘッダーやフッターを消し、スクロールが終了した際にページの上下にフッターヘッターを表示している。

<footer data-role="footer" data-position="fixed">


また、footerに指定した data-position="fixed" はページの高さが足らない場合にフッターを最下部に固定することもできる。

ただ、この機能はページ遷移などのたの機能と連携して表示がおかしくなることがあるので注意が必要です。
タグ:data-position
posted by ねこまんま at 20:39 | Comment(0) | TrackBack(0) | jQuery Mobile | 更新情報をチェックする

2011年04月18日

jQuery Mobileでダイアログを開く

jQuery Mobile ではa要素にたいして「data-rel="dialog"」を指定することでダイアログを表示することができます。

<a href="#page1"  data-rel="dialog">dialog</a>


デフォルトではpopのtransitionが指定されていますが、data-transitionで変更も可能です。

<a href="#page1"  data-rel="dialog" data-transition="slide">dialog</a>
posted by ねこまんま at 03:08 | Comment(0) | TrackBack(0) | jQuery Mobile | 更新情報をチェックする

jQuery Mobileで戻るボタンの実装

jQuery Mobileではa要素に対してdata-rel=“back”を指定することで戻るボタンの実装が可能です。

<a href="#page1" data-rel="back">Back to foo</a>


href属性に何が指定されていても、一つ前に戻る機能を提供してくれます。(hrefに関しては古いブラウザを考慮して、もっとも適切であろうURLを記述しておいて下さい。)
タグ:jQuery Mobile
posted by ねこまんま at 02:59 | Comment(0) | TrackBack(0) | jQuery Mobile | 更新情報をチェックする

2011年04月17日

jQuery Mobileによる別ファイルへのリンク

jQuery Mobileでは別ファイルへのリンクはAjaxで取得してページ内リンクとして処理して遷移します。

<a href="index2.html">index2.htmlへ移動</a>


その際に通常のリンクと同じくdata-transition属性でアニメーションを指定することも可能です。

<a href="index2.html" data-transition="slide">index2.htmlへ移動</a>


ただ、alpha4.1では遷移先のhtmlファイルの特定のページにアクセスすることはできない。

つまり、次のような指定はできないということです。

<a href="index2.html#page2">index2.html#page2へ移動</a>


このように指定したい場合はAjax機能をOFFにする必要があります。Ajax機能をOFFにする方法としてはrel属性に「external」を指定する方法とdata-ajaxに「false」を指定する方法があります。

<a href="index2.html#page2" rel="external">index2.html#page2へ移動</a>


<a href="index2.html#page2" data-ajax="false">index2.html#page2へ移動</a>

タグ:jQuery Mobile
posted by ねこまんま at 20:10 | Comment(0) | TrackBack(0) | jQuery Mobile | 更新情報をチェックする

jQuery Mobileでページ遷移時のアニメーションエフェクト

jQuery Mobileでページ遷移時のアニメーションエフェクトはa要素に対して「data-transition」で指定することができます。

<a href="#page2" data-transition="slide">page2へ移動</a>


data-transitionは次のような値をとることができます。

slide:現在のページが左に移動してページ遷移
slideup:新しいページが下からスライドしてきてページ遷移
slidedown:新しいページが上からスライドしてきてページ遷移
pop:新しいページが拡大して表示される
fade:現在のページがフェードアウトしてページ遷移
flip:ページが回転するようにページ遷移

「data-direction="reverse"」を合わせて指定することでエフェクトを逆向きにすることができます。

<a href="#page2" data-transition="slide" 
data-direction="reverse">page2へ移動</a>


また、「data-transition」に「none」などの存在しない値を指定することでページ遷移時のアニメーションをOFFにすることができます。

<a href="#page2" data-transition="none">page2へ移動</a>
posted by ねこまんま at 19:02 | Comment(0) | TrackBack(0) | jQuery Mobile | 更新情報をチェックする

jQuery Mobileにおけるページ遷移

「data-role="page"」でページを指定すると解説しましたが、jQuery Mobileでは1つのHTMLに複数のページが設定できます。

複数の要素に対して「data-role="page"」を指定して、id属性でそれぞれ独立したページとしてjQuery Mobileに認識させることができます。

<section id="page1" data-role="page" data-theme="b">
(TOPページの内容)
</section>
<section id="page2" data-role="page" data-theme="b">
(他のページの内容)
</section>


複数のページが設定されている場合は、htmlが表示された場合は最初に「data-role="page"」を指定した要素が表示されます。他のページに移動する場合はページ内リンクでアニメーションをつけて遷移することができます。

<a href="#page2">page2へ移動</a>

タグ:data-role
posted by ねこまんま at 18:35 | Comment(0) | TrackBack(0) | jQuery Mobile | 更新情報をチェックする

jQuery Mobileでテーマを変更

jQuery Mobileではdata-theme属性を利用してテーマを変更することができる。

<section data-role="page" data-theme="b">


data-role="page"と同じ要素に対して、指定することでページそのもののテーマを変更できる。

<header data-role="header" data-theme="b" >


「data-role="header"」など個別のパーツに足してのテーマ指定も可能。

テーマはデフォルトではa〜eの5種類が利用可能。正式版リリース後にテーマを作成できるツールも公開される予定。
posted by ねこまんま at 13:59 | Comment(0) | TrackBack(0) | jQuery Mobile | 更新情報をチェックする

jQuery Mobileの基本

jQuery Mobileでは基本的にはhead要素内でjQueryのスクリプトファイルとjQuery MobileのCSSファイルとスクリプトファイルを読みこむ。

<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></


基本的にはフレームワークなので決められたフォーマットに従って記述する。最小構成としては次のようなHTML。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section data-role="page">
<header data-role ="header">
<h1>header</h1>
</header>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<footer data-role="footer">
<h4>Page Footer</h4>
</footer>
</section>
</body>
</html>


htmlを記述してHTML5のカスタムdata属性を利用して役割を与えていく。たとえば「data-role="page"」を付加することでページとして認識させることができる。後述するけど、jQuery Mobileではこの要素毎にページを表示している。ページのヘッダーには「data-role="header"」、本文には「data-role="content"」、フッターには「data-role="footer"」を付けることで利用できる。
タグ:data-role
posted by ねこまんま at 13:49 | Comment(0) | TrackBack(0) | jQuery Mobile | 更新情報をチェックする