jQuery Mobileでページ数を多くする場合
- jQuery Mobileを使用してページ数を増やす方法とその影響を検討しています。
- 現在、jQuery Mobileではindex.phpに全てのページを書き込む方法が一般的ですが、ページ数が増えるとトップページの読み込みが遅くなる可能性があります。
- 通常のHTMLと同様にページを複数に分ける方法や、jQuery Mobileの仕組みを活かす方法が考えられます。
- ベストアンサー
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ページあったとしても各ページは軽い」というようなことがあるのでしょうか? 宜しくお願い致します。
- tajix14
- お礼率72% (175/242)
- AJAX
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
>下記の4ページのサイトで最初に1-2ページだけを読ませ表示し、その後3-4ページを読ませるためには、どのように加工すれば宜しいでしょうか? 見たところ、単に<a>タグのリンクで移動しているだけのようですね。ではなくて、リンクをクリックしたらJavaScriptの関数で処理をさせるようにします。 function doClick(){ $.get'読み込むテキストファイル', {}, function(result, status, xhr){ $('#表示するタグのID').html(result); $.mobile.changePage('#表示するページのID'); }); 例えばですが、こんな具合にAjaxでページデータをロードし、コールバック関数で読み込んだテキストを表示してページ移動する関数を定義しておき、リンクをクリックしたらこの関数を呼び出すようにしておきます。このあたりは、jQueryおよびjQuery Mobileの関数などについて調べてみるとよいでしょう。 参考 http://libro.tuyano.com/index3?id=72001 http://libro.tuyano.com/index3?id=619006&page=2
その他の回答 (1)
さすがにMB単位になってしまうとなると、最初の読み込みでかなり時間がかかってしまうでしょうからあまり得策とはいえないでしょう。 こうした場合は、データを一定のページ数ごとに分け、必要に応じてAjaxなどで先読みしながら利用する、というスタイルがよいように思えます。例えば、10ページずつでデータを割った場合、最初にアクセスしたときに最初の10ページ分のテキストだけを読み込み、すぐさま次の10ページをAjaxで読み込みにいきます。そして最初の10ページを読み終え、次の10ページに進んだら、更にその先の10ページを読みこませる、というわけです。 ページは多量のページタグを用意するのでなく、表示するページに応じて、読み込んだテキストから指定のページのデータを取り出してページ内に表示させていきます。 こんな感じで、必要に応じてAjaxで小出しにデータを受け取りながら表示させていけば、それほど利用者に負担とならずに済むでしょう。
補足
有難うございます。 大変申し訳ございません。もう少し教えてください。 、最初にアクセスしたときに最初の10ページ分のテキストだけを読み込み、すぐさま次の10ページをAjaxで読み込みにいきます。そして最初の10ページを読み終え、次の10ページに進んだら、更にその先の10ページを読みこませる、というわけです。 の方法についてですが、方法が分からず困惑しております。 素人で申し訳ございません。 下記の4ページのサイトで最初に1-2ページだけを読ませ表示し、その後3-4ページを読ませるためには、どのように加工すれば宜しいでしょうか? お手数をおかけし申し訳ございません。 あと少しご教授頂けましたら幸甚です。 宜しくお願い致します。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/> <script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script> <script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script> <script src="/phonegap.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="page"> <div data-role="header"> <h1>test</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#1" data-transition="flip">1</a></li> <li><a href="#2" data-transition="flip">2</a></li> <li><a href="#3" data-transition="flip">3</a></li> <li><a href="#4" data-transition="flip">4</a></li> </ul> </div> </div> <div data-role="page" id="1"> <div data-role="header"> <h1>1</h1> </div> <div data-role="content"> コンテンツ1 </div> </div> <div data-role="page" id="2"> <div data-role="header"> <h1>1</h1> </div> <div data-role="content"> コンテンツ2 </div> </div> <div data-role="page" id="3"> <div data-role="header"> <h1>1</h1> </div> <div data-role="content"> コンテンツ3 </div> </div> <div data-role="page" id="4"> <div data-role="header"> <h1>1</h1> </div> <div data-role="content"> コンテンツ4 </div> </div> </body> </html>
関連するQ&A
- 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のデザイン関連だけ使って、ページ遷移絡みは 使いたくないという気持ちです。
- 締切済み
- 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でスマホサイトを作成しているのですが 現在は <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で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
- トップページしかインデックスできない構造、直したい
数十万件の情報をデータベースで扱うWebサイトを作成しています。 トップページはindex.phpです。 1. トップページで検索したりフィルタリグしたりするとそれに該当したデータがjQuery Ajaxで取得してindex.php上にリスト形式で表示されます。 2. さらにそのリストからどれかアイテムを一つクリックするとjQueryダイアログが開いてそこに詳細情報が表示されます。 これら全てトップページのindex.php上で動作しますので一切別ページに遷移しません。 jQueryのAjaxを使ってphpにアクセスし、データベースから取得した情報をindex.php上で表示しているだけです。 そのため、sitemap.xmlに追加するページがindex.phpしかなく、これ以上ページを追加しようがありません。 GoogleWebmasterToolでもインデックスされているのはindex.phpのみです。 情報を動的に取得し、なおかつAjaxでindex.phpで取得した場合はどのように数十万件のページのような情報をインデックスすれば良いのでしょうか？ 何か良い案があればお教えください。 どうぞよろしくお願い致します。
- 締切済み
- HTML
- jquery.mobile 画像を中央に表示
<!DOCTYPE html> <html lang="ja"> <head> <title>test</title> <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> </head> <body> <div id="home" data-role="page" data-theme="d"> <ul data-role="listview" data-dividertheme="a"> <li data-role="list-divider">test </li> <li> <a href="#"> <img src="C:\1.jpg"> test </a> </li> <li> <a href="#"> <img src="C:\2.jpg"> test </a> </li> </ul> </div> </body> </html> ------------------------- 上記のようなコードで携帯サイトを構築しているのですが 正方形ではない画像が、右上に寄ってしまうのですが これを回避する方法はありますか？ 例で言うのであれば 添付画像の黄色い四角を画像表示エリアの中央に表示させたいです。
- ベストアンサー
- HTML
- jquery-mobileでform送信
こんにちわ。 さっそく質問させて下さい。 eclipse環境でstruts2を使いサーブレットアプリを勉強しています。 ゼロ・コンフィギュレーションのしくみを利用しています。 内容は簡単でindex.jspからhome.actionを呼びhome.jspを返すといったものです。 （index.jsp→home.action→home.jsp） 今回、スマホ用にjsp部分を「jquery-mobile」を使い実装したいのですが、 form送信でhome.actionが呼び出せません。（画面がloadingとなったままになる） ≪index.jsp≫ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> </head> <body> <div data-role="page" id="page1"> <form action="home" method="post"> <P> <label>名前：<input type="text" name="ussername" required></label> <label>password：<input type="password" name="password"></label> </P> <p><input type="reset"><input type="submit"></p> </form> </div> </body> </html> 開発環境は eclipse3.6 tomcat6 struts2.2.3 ブラウザ/ スマホ：iphone safari PC：google chrome です。 サーバ側は /root |-WEB_INF | | | - content - home.jsp | | | - lib | | | | | -struts2で必須のjar | | | -src | | | | | -action - home.java | | | | | -struts.xml | | | -web.xml | -----index.jsp です。ご存じの方いましたら、教えてください。 お願いします。
- 締切済み
- Java
- jQuery.jTagging.jsを使った入力
現在、jQuery.jTagging.jsを使った入力支援を 以下のサイトを参考に作っています。 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_other/jtagging.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 上記サイトの例のようにテキストボックスだと、問題なく動作するのですが テキストエリアにすると動作しません。 以下、上記サイトを基にして、テキストエリアでテストしたコードです。 <script type="text/javascript"> $(function() { $("#TagTextArea1").jTagging($("#TagDiv1"), ","); }); </script> ・ ・ ・ <h2>例1</h2> <p>your tags: <textarea id="TagTextArea1"></textarea> カンマ区切り</p> <div id="TagDiv1" class="box"> <a href="#" onclick="return false;">javascript</a> <a href="#" onclick="return false;">jquery</a> <a href="#" onclick="return false;">tag</a> <a href="#" onclick="return false;">cool</a> </div> jQuery.jTagging.jsを使用した入力支援は テキストエリアでは、実装することは不可能なのでしょうか？
- ベストアンサー
- JavaScript
- 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
- jQueryの$.postの戻り値による条件分岐
jQueryの$.postにてPHPファイルをリクエストしています。 Ajax→PHPの処理後、Ajaxに処理が戻る際にPHPからAjaxに 値を受け渡し、さらにその値によってAjaxの処理を条件分岐させたい場合 どのような記述になるのでしょうか。 PHPからの戻り値は単なるテキストかtrue/falseで考えています。 それとも、そもそも$.postでは戻り値を処理する、 といった事はできないのでしょうか。
- ベストアンサー
- AJAX
お礼
有難うございます。 早速トライしてみます。 お忙しい中、大変ありがとうございました。 感謝です!!