- 締切済み
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> ------------------------------------------------------------
- erieru103
- お礼率62% (5/8)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- y_shimizu
- ベストアンサー率41% (27/65)
サーバサイドを見ないとなんとも言えませんが、ログイン認証とセッション永続はどのように行っているのでしょうか？ 一般的には、ログイン認証されたことを表す何か（セッションクッキーとか）が付与されていない状態で要認証ページを表示しようとした場合、ログインページにリダイレクトなりをするって感じですね。
関連するQ&A
- 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を使った共通html埋め込みができない
各ページに共通なヘッダ部分を、jqueryを使って読み込みたいと以下のコードを書いたのですが、なぜか読み込まれません。 test.htmlとheader.htmlは同階層（トップレベル）にあって、jsディレクトリにjquery-1.7.1.min.jsを置いています。 どうか知恵をお貸しください。 よろしくお願いします。 test.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> <!–- $(function(){ $("#header").load("header.html"); }); // -–> </script> <title>test</title> </head> <body> <div id="header"></div> main </body> </html> header.html <div id="header">header</div>
- ベストアンサー
- JavaScript
- jquerymobileで作成するアンケートページ
jQuerymobileでアンケートページを作成しております。アンケートの結果(textbox,checkbox,radioboxなど)をformからcgiに飛ばして最終的にcsvファイルでデータを見る方法を考えております。cgiは「WebHandlerPro」(http://www.tryhp.net/webhandler.htm)の物を使用させていただいております。 ソースは [page1] <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Mobile</title> <meta name="viewport" content="width=device-width, initital-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.addBackBtn = false; $.mobile.ajaxEnabled = false; }); </script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> css省略 <body> <div data-role="page" id="page1" data-add-back-btn="true" data-back-btn-text="戻る" data-title="page1"> <div data-role="header" data-position="fixed"> <a href="#home" data-icon="home" data-iconpos ="notext" class="ui-btn-right"></a> <h1>page1</h1> <h3>アンケート</h3> </div> <!-- header --> <div data-role="content"> <h3>以下の設問に～</3> <h4>～～</h4> <p>以下の設問項目の～</p> <form method="post" action="～.cgi" name="myform"> <div data-role="fieldcontain" class="radio"> <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"> <legend>aaa</legend> <input type="radio" name="s1" value="1" id="s1-1"> <label for="s1-1">1</label> <input type="radio" name="s1" value="2" id="s1-2"> <label for="s1-2">2</label> <input type="radio" name="s1" value="3" id="s1-3" checked="checked"> <label for="s1-3">3</label> <input type="radio" name="s1" value="4" id="s1-4"> <label for="s1-4">4</label> <input type="radio" name="s1" value="5" id="s1-5"> <label for="s1-5">5</label> </fieldset> </div> <!-- radio --> <div data-role="fieldcontain" data-theme="b"> <label for="impression">aaa</label> <select name="impression" id="impression" data-native-menu="false" multiple data-theme="b" data-mini="true" data-inline="true"> <option value="1" selected>b</option> <option value="2">c</option> <option value="3">d</option> <option value="4">e</option> <option value="5">f</option> </select> </div> <!-- select --> <div data-role="footer" class="ui-bar" data-position="fixed"> <input type="submit" value="送信"data-icon="arrow-r" data-inline="true" data-iconpos="right"> </div> </form> </div> <!-- menu --> </body> </html> こんな感じのhtmlが何枚もあるようなアンケートです。 jQQuerymobileを使用しないでhtml、cssだけでつくったアンケートはうまく行くので,jQuelymobileでformを使う際におかしな点がありましたらご指摘頂きたいです。 まだ,かなり初心者なのでよくわかっていないところがありますがどなたか詳しい方よろしくお願い致します。
- ベストアンサー
- JavaScript
- 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
- jQueryMobileでテキスト分岐ゲーム
JavaScript&jQuery初心者です。 JavaScriptの勉強のために、jQueryMobileを使って、スマホ向けの簡単なテキストゲームを作ってみましたが、変数で処理の分岐のさせ方がわかりません。 ページがロードされたときに、have_mapが決まってしまいます。 以下のサンプルだと、常に地図を手に入れた状態で宿屋に行けてしまいます。 ボタンの選択によって、状態を変数に入れて、分岐などに使いたいのですが。。。 そもそも、変数定義の流れがよく分かっていないのだと思うのですが。。。 アドバイスがいただけるとうれしいです。 よろしくお願いいたします。 コードはこちらになります。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ChooseAvatar</title> <!-- jQuery MobileのCSSを読み込む --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" /> <!-- jQuery本体を読み込む --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <!-- jQuery MobileのJSを読み込む --> <script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script> </head> <body> <script> var have_map = 0; </script> <div id="page1" data-role="page"> <div data-role="header" > <h1>質問１</h1> </div> <div data-role="content" align="center"> <p> 宝箱を見つけた<br> </p> <p> <a href="#page2" data-role="button">開ける</a> <a href="#page3" data-role="button">開けない</a> </p> <script> have_map = 0; </script> </div><!-- /content --> <div data-role="footer"> <h4>sample</h4> </div><!-- /footer --> </div><!-- /page --> <div id="page2" data-role="page"> <div data-role="header" > <h1>宝箱</h1> </div><!-- /header --> <div data-role="content" align="center"> <p> 地図を手に入れた<br> </p> <p> <a href="#page3" data-role="button">先に進む</a> </p> <script> have_map = 1; </script> </div><!-- /content --> <div data-role="footer"> <h4>sample</h4> </div><!-- /footer --> </div><!-- /page --> <div id="page3" data-role="page"> <div data-role="header" > <h1>分かれ道</h1> </div><!-- /header --> <div data-role="content" align="center"> <p> 分かれ道です<br> </p> <p> <script> //alert(have_map); if( have_map === 1 ){ have_map_text_A = "宿屋に入る"; have_map_text_B = "お店に入る"; }else{ have_map_text_A = "右に進む"; have_map_text_B = "左に進む"; } document.write("<a href='#page4' data-role='button'>"+have_map_text_A+"</a>"); document.write("<a href='#page5' data-role='button'>"+have_map_text_B+"</a>"); </script> </p> </div><!-- /content --> <div data-role="footer"> <h4>sample</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
- 締切済み
- JavaScript
- jqueryの$.getJSONの処理結果について
jqueryの$.getJSONの結果およびその違いについて教えてください。 以下の(1)と(2)の処理があり、(2)を(1)と同じ様に 出力したいと考えておりますが、(2)では(1)のように 「class="ui-li-static ui-body-inherit ui-first-child"」などが 設定されずに出力されてしまいます。 そのため、どのように記述すれば(1)と同じ結果になるのかを ご教授いただけますでしょうか。 また、宜しければ(1)と(2)の処理の違いを 教えていただけると助かります。 ※chrome バージョン 43.0.2357.81 apache-tomcat-7.0.53 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ (1)固定値で埋め込み <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> var test1 = function(){ $('#listviewtest').append('<li>1:aaaaaaa</li>'); $('#listviewtest').append('<li>2:bbbbbbb</li>'); $('#listviewtest').append('<li>3:ccccccc</li>'); }; $(document).on("pagebeforecreate", function() { test1(); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <ul id="listviewtest" data-role="listview"> </ui> </div> </div> </body> </html> 処理結果 <ul id="listviewtest" data-role="listview" class="ui-listview"> <li class="ui-li-static ui-body-inherit ui-first-child">1:aaaaaaa</li> <li class="ui-li-static ui-body-inherit">2:bbbbbbb</li> <li class="ui-li-static ui-body-inherit ui-last-child">3:ccccccc</li> </ul> (2)$.getJSONで読み込み <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> var test1 = function(){ $.getJSON( 'test.js', null, function(data, status) { var items = []; $.each(data, function(key, val) { items.push('<li>' + val.id + ':' + val.name + '</li>'); }); $('#listviewtest').append(items.join('')).trigger('create'); } ); }; $(document).on("pagebeforecreate", function() { test1(); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <ul id="listviewtest" data-role="listview"> </ul> </div> </div> </body> </html> 外部ファイル（test.js） [ {"id":1,"name":"aaaaaaa"}, {"id":2,"name":"bbbbbbb"}, {"id":3,"name":"ccccccc"} ] 処理結果 <ul id="listviewtest" data-role="listview" class="ui-listview"> <li>1:aaaaaaa</li> <li>2:bbbbbbb</li> <li>3:ccccccc</li> </ul>
- ベストアンサー
- JavaScript
- H2にも色を付けたい、デザインを適用させたい
http://blog.direct-search.jp/2010/10/jquery-mobile.html のサイトを参考にしたのですが、 <h2>test</h2> も <h1>Header</h1> のように、 色を白にして背景を青にするデザインにするにはどうすればいいでしょうか？ 今は下記のコードのしていますが、 そうすると画像の様に、<h2>test</h2> は太字でtestになってしまいます。 <html> <head> <meta charset="utf-8"> <title>jQuery Mobile テスト</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <section data-role="page" data-theme="b" id="ds-home"> <header data-role="header" data-theme="b"> <h1>Header</h1> </header><!-- /header --> <article data-role="content"> <div>This is a test page.</div> <h2>test</h2> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Category</li> <li><a href="#ds-page-1">First Child</a></li> <li><a href="#ds-page-2">Second Child</a></li> </ul> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Category 2</li> <li><a href="#ds-page-3">First Child 2</a></li> <li><a href="#ds-page-4">Second Child 2</a></li> </ul> </article><!-- /content --> <header data-role="footer" data-theme="b"> <h2>Footer</h2> </header><!-- /footer --> </section><!-- /page --> </body> </html>
- ベストアンサー
- HTML
- 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 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 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
お礼
ご回答ありがとうございます。 お恥ずかしいながら、サーバーのこともよくわかっていません。 今、サーバ側では何も処理をやっていません。 ログイン処理は下記のようにしていますが、 このやり方自体、安全ではないですよね？？ 大変申し訳ございませんが、ログイン認証、サーバー側でやらなければならないことをご教授いただけますでしょうか？ よろしくお願いします。 -------------------------------------------------- $('#login').live('pageinit', function () { $(this).on("tap", "#loginBtn", function (e) { var inputLoginId = $("#inputLoginId").val(); var inputPwd = $("#inputPwd").val(); $.ajax({ type: "POST", url: "login.php", data: { login_id: inputLoginId, pwd: inputPwd }, success: function (response) { // 通信が成功した場合 if (response == 1) // 成功の場合 { $.mobile.changePage($('#index')); } else // 失敗の場合 { alert("ログイン失敗。"); } }, error: function (response, errorThrown) { // 通信が失敗した場合 alert('Error : ' + errorThrown); } }); }); }); -------------------------------------------------- login.phpでは下記のようにしています。 -------------------------------------------------- <?php define("LOGINID", "idea"); define("PASSWORD", "estimate"); $result = true; // 処理結果 true=正常、false=異常 $login_id = $_POST['login_id']; if (strcmp(LOGINID,$login_id)!=0) { $result = false; } $pwd = $_POST['pwd']; if (strcmp(PASSWORD, $pwd) != 0) { $result = false; } echo $result; ?> --------------------------------------------------