- ベストアンサー
ボタンを押したような状態にしたい。JQuery
下記のようなJQuery mobileのリンクのボタンを２つ並べたページがあったとします。 その１ページ目は現在表示中として、一応ボタンも表示しておきたいのですが、 実際のボタンは無効で、色が違うなど押した状態に見えるようにしたいのです。 <a href="" data-role="button" data-inline="true">１ページ</a> <a href="２ページ目のアドレス" data-role="button" data-inline="true">２ページ</a> どのようにしたらいいでしょうか？
- ricercar6
- お礼率57% (19/33)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
通常は、ボタンの機能はbuttonに実装されているわけで、素直にbuttonを使えばよろしいかと。 <button disabled=disabled>1ページ</button> どうしてもaタグで実装したいなら、javascriptでaにbuttonの機能を実装するだけだよね。 --HTML <a href="" data-button-flg="false">1ページ</a> --CSS a[data-button-flg=false]{ cursor:default; color:#000; } --JS $("a").on("click",function(){ if($(this).data("buttonFlg")=="false") return false; });
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
ANo1です。 ご提示のサンプルよりは構成が複雑になっていますが、 http://jquerymobile.com/demos/1.2.0/ http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-types.html もＣＳＳで処理していませんか？ 特に、2番目のトップにあるボタンは、ご質問のものに近いのではないかと想像しますが、 「basics」の部分については、リンク要素に「ui-btn-active」というクラス設定をすることで、他のボタンと表示を変えているように思えますけれど… （ざっと見ただけなので、ちゃんと確認していません）
お礼
ボタンの種類、かなりあるんですね。さらに工夫できそうです。 ありがとうございました
- fujillin
- ベストアンサー率61% (1594/2576)
よくわかりませんが、CSSでボタン風（違うのでも良いですが）に見せておいて、表示中のページにはactiveなどのクラスを設定しておくとかではダメなのでしょうか？ そういうのとは質問の意味が違うのかな？
補足
押されたボタンも、他のボタンと同じ形式のものを並べたいのですが、 jquery mobileのボタンの表示形式をcssで真似ることができるかどうか、やってみるしかないですかね。。
関連するQ&A
- 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
- html で ボタンをつくる
楽天RMSで、ページにリンクできるテキストボタンを作りたいのですが onClick が禁止タグになっているので使えませんでした。 <html>だけでリンクボタンを作成したいのですが、 <button><a href="リンク場所">テキスト</a></button>で できるかとおもったら、表示はボタンになっているにもかかわらず、リンクできませんでした。 楽天RMSでリンクボタンを作成するにはどのように記述すればいいかわかりません。 どなたか教えていただけないでしょうか。
- 締切済み
- 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
- 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 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
- 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でリンクを無効にしたあとに有効にする方法
jqueryで下記のコードでページ内のリンクを全て無効にしましたが、有効にする方法がわからずに困っております。 どなたかご教授ください。宜しくお願いいたします。 ↓コード↓ $("a[href]").click(function(e){e.preventDefault()}).attr("href","#");
- ベストアンサー
- AJAX
- 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
- ボタンリンクをしたいのですが・・・
ボタンの形でリンクをしたいのですが、うまくできません。 <a>タグのテキストリンクならページが移動するのですが、 <a href="ＵＲＬ"><button>文字</button></a> は、ボタンがペコペコするだけで、 <form><input type="botton" value="文字" onclick="parent.main.location.href='ＵＲＬ'" title="文字"></form> は、ステータスバーにエラーが出ただけです。 何がいけないのか分からないし、他にどうすればいいのかもさっぱり分かりません。 ＩＥ６．０を使っていますが、ＩＥ依存タグは避けたいです。 ボタンリンクのやり方についてアドバイスをいただけないでしょうか。
- 締切済み
- 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
お礼
やっと使いこなせるようになりました＾＾ ありがとうございました。