- 締切済み
jQuery Mobileでのページ遷移、挙動
jQuery Mobileを使ってスマートフォン用のサイトを作成しています。 ページ遷移時の挙動が直せなくて困っています。 1つのHTML内に複数のページを作るやり方ではなくて、 リンクには rel='external' フォームには data-ajax='false' をつけて、 Ajaxでのページ遷移を行わないようにしているつもりです。 で、おかしな挙動なのですが、 1.AのページからリンクをクリックしてBのページを表示する。 2.ブラウザの戻る機能でAのページに戻る 3.再びリンクをクリックしてBのページを表示する。 このとき、Bのページが表示された後、「Loading」というメッセージが表示され、 Aのページを表示してしまいます。（AのページをAjaxで読み込んでいるか、 Bのページが何らかで非表示になっているように思えます） $.mobile.ajaxLinksEnabled = false; という設定も試してみたのですが、 特に変化はありませんでした。 この解決策を教えてください。 出来れば、jQuery Mobileのデザイン関連だけ使って、ページ遷移絡みは 使いたくないという気持ちです。
- kt_yuka
- お礼率70% (29/41)
- AJAX
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- qwerty_nata
- ベストアンサー率0% (0/0)
Beta3 より仕様が変わったようです。 下記設定を行うことで回避できないでしょうか？ $(document).bind("mobileinit", function(){ $.mobile.ajaxEnabled = false; $.mobile.pushStateEnabled = false })
関連するQ&A
- jQuery Mobileでページ数を多くする場合
jQuery Mobileでサイトを構築しようとしています。 jQuery Mobileの場合、ひとつのindex.phpに全てのページを書きいれ、a href=#13 a href=#453などのようにして飛ばす仕組みになっています。 例えば500ページのサイトになると、index.phpがMB単位になってしまい、これでは、重くてトップページの読み込みが鈍重になってしまうと考えます。 このような場合、やはり、 *data-ajax=“false” ,などを使って通常のHTMLのように複数にページ立てするのが適切なのでしょうか? それとも、jQuery Mobileの場合、「読み込みが#ページ単位になっているため、ページ数が500ページあったとしても各ページは軽い」というようなことがあるのでしょうか? 宜しくお願い致します。
- ベストアンサー
- AJAX
- jquerymobileのページ遷移のような遷移
いつもお世話になっております。 jquerymobileのページ遷移のような遷移を行いたいのですが、 イメージ（スライドはしなくても可） URL：http://billboardtop100.net/jquery_mobile/slide/slide.html 流れとしては、ページローディングしている最中、画面がオーバーレイしながら、 ローディングのアニメーション画像を表示し、 ロードが完了したら、スライドしてURL先へリンクする というイメージなのですが（スライドはしなくても可） ajaxとかそういう技術を使わないと、スムーズに遷移しないのでしょうか、、 以下に作ってみたサンプルを記載しますが、 単純にオーバーレイしてからリンク先へアクセスしているので、 読み込みも遅くなりますし、以下のコードだと、ロードの画像が真ん中にきません、、 そして画像を隠す動作が一瞬ちらついてしまいます、、、 html <div id="shade"><img src="/img/ajax-loader.gif" alt="ローディング中"></div> <section data-role="content"> <ul data-role="listview"> <li><a href="/aboutus.html" data-transition="slide">hoge</a></li> <li><a href="sample.html" data-transition="slide">hoge2</a></li> <li><a href="sample.html" data-transition="slide">hoge3</a></li> </ul> </section> js jQuery(function(jQuery){ jQuery("#shade").css({ opacity: '0.6', display: 'none', position: 'absolute', top: '0', width: '100%', height: '100%', background: '#000', zIndex: '1' }); jQuery("a[href]").click(function(e){ link = jQuery(this).attr("href"); if (!link.match(/#/i)) { e.preventDefault(); jQuery("#shade").css('display', 'block'); } }); }); カッコいいページ遷移がしたいです。。 是非ご教授下さい。 どうぞよろしくお願いします
- 締切済み
- JavaScript
- Query Mobile でのページ遷移アニメ
jQuery Mobile でのページ遷移アニメーション（data-transition）についての質問です。 通常のフォームのサブミットボタンでページ遷移をした場合はアニメーションするのですが、JavaScriptの document.forms[0].submit(); でページ遷移をしようとすると、アニメーションが効きません。 私だけでしょうか・・・ ちなみに、どうしても JavaScriptの document.forms[0].submit(); 関数でサブミットしなければなりません。（理由は長くなるので省略します） また、 document.forms[0].submit(); return false; としても、同様にページ遷移のアニメーションは効きませんでした。
- ベストアンサー
- JavaScript
- jQuery Mobile バージョン
jQuery Mobileでスマホサイトを作成しているのですが 現在は <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> と言うソースを使っていたのですが http://www.buildinsider.net/web/jquerymobileref/24 を見たら、私と違いました。 私のバージョンが古いのでしょうか？ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> へ 書き換えたほうが良いのでしょうか？
- ベストアンサー
- CSS
- ページ遷移時にスライドするjQuery（Ajax）
クリックして、ページを遷移した際にスライドで表示してくれるjQueryを探しています。 詳細はサイトをご参照の上、下記の文言をご確認ください。（サイト内右側のSOLUZIONIをクリックしてください） http://www.galvanmobili.it/ 上記URLのサイトのように複雑な動きはいりません。 単純に横にスライドしたいです。 A B と表示されていて、Bをクリックすると ←B C とスライドで表示ができるようにしたいです。 Cを画像にしてスライドショーとして使用するのではなく、あくまでページが遷移して欲しいです。 参考サイトのようにCは下にスクロールすることができます。 検索してみたのですが、スライド前に一度フェードで切り替わったりするjQueryが多かったので、プラグインの名前や参考サイト等知っている方いらっしゃれば教えて下さい。
- 締切済み
- CSS
- jQueryでloadしたページ内でもjQueryを使う方法
例えば、base.html内にjQueryでadd.htmlをloadします。 base.htmlに下記コードを記述 $(document).ready(function(){ $("a").click(function(){ alert("click"); return false; }); }); base.htmlに直接記述したaタグではアラートが出ますが、 base.htmlに読み込んだadd.html内のaタグでは適用されません。 Ajaxで読み込んだページ内にもjQueryを使用したい場合には、 どのようにすればよいのでしょうか？
- 締切済み
- AJAX
- Jquery Mobileでのページ表示について
Jquery Mobile初心者です。 ページ表示についての質問ですが、 ファイルtest.htmlに下記のようにコードを書きました。 ログインのページを通してから、indexのページを表示したいと思っていますが、 ブラウザのアドレスバーに....../test.html#indexと入力すると、 indexのページがそのまま表示されてしまいます。 これではログインページをつける意味がなくなってしまいます。 アドレスバーに....../test.html#indexを入力しても、indexのページが表示されない (ログインページを表示する)ようにするには、どうしたらいいでしょうか？ ご教授をよろしくお願いします。 ------------------------------------------------------------ <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>テスト</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div id="login" data-role="page"> <header data-role="header" data-position="fixed"> <h1>ログイン</h1> </header> <div data-role="content"> <div data-role="fieldcontain" class="noborder"> <label for="inputLoginId">ログインID:</label> <input type="text" name="inputLoginId" id="inputLoginId" value="" placeholder="ログインIDを入力" /> <label for="inputPwd">パスワード:</label> <input type="password" name="inputPwd" id="inputPwd" value="" placeholder="パスワードを入力" /> </div> <input type="button" id="loginBtn" value="ログイン" data-theme="f" /> </div> </div> <div id="index" data-role="page"> <header data-role="header" data-position="fixed"> <h1>テスト</h1> </header> <div data-role="content"> <p>メインページ</p> </div> </div> <div id="TR" data-role="page"> <header data-role="header" data-position="fixed"> <a href="#index" data-icon="back" onclick="backPrc()">戻る</a> <a href="#index" data-icon="home" onclick="homePrc()">ホーム</a> </header> <div data-role="content"> <p>サブページ</p> </div> </div> </body> </html> ------------------------------------------------------------
- 締切済み
- HTML
- jQuery Mobile
jQuery Mobileでは１つのHTMLファイルに複数ページを記述するようですが テキストボックスに記載した文字を別のページに表示するにはどのようにするのでしょうか
- ベストアンサー
- AJAX
- jquery mobile/指定のURLに飛ばない
今スマートフォンのトップページのロゴに自分のサイトのURLをリンクしているのですが、【error loading page】とでてリンク先に飛ぶ事が出来ません。 たとえば【a.com】というドメインを持ってたとして、ナビ部分のHOMEに【a.com】をリンクしてあるボタンを置いたとします。 それを押すと、【error loading page】と表示されてトップページに飛ぶことが出来ません。 どうすればこのエラーは解消されますでしょうか？？
- ベストアンサー
- AJAX
- jquery.mobile-1.1.1.min.c
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile Test</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.js"></script> </head> ・ ・ ・ 以下省略 のようにＨＰを作っているのですが、 jquery.mobile-1.1.1.min.cssの部分で設定されているcssの値を変更することは出来ないのでしょうか？ 例えば、 .ui-content .ui-listview { margin: -15px; } の値を、 margin: -15px; ではなく、 margin: 50px; にしたい場合、 どうすればいいですか？ ul.ul_test { margin-top: 50px; } を作って、 <ul class="ul_test" としてみましたが、 適用されませんでした。
- ベストアンサー
- CSS
