ボタンを押したような状態にしたい。JQuery

下記のようなJQuery mobileのリンクのボタンを２つ並べたページがあったとします。

その１ページ目は現在表示中として、一応ボタンも表示しておきたいのですが、

実際のボタンは無効で、色が違うなど押した状態に見えるようにしたいのです。


<a href="" data-role="button" data-inline="true">１ページ</a>

<a href="２ページ目のアドレス" data-role="button" data-inline="true">２ページ</a>



どのようにしたらいいでしょうか？

No.2 ベストアンサー 回答者： tracer 回答日時： 2012/11/11 12:49

通常は、ボタンの機能は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;
});

この回答へのお礼

やっと使いこなせるようになりました＾＾
ありがとうございました。

お礼日時：2012/12/23 21:35

No.3 回答者： fujillin 回答日時： 2012/11/12 15:47

ANo1です。

ご提示のサンプルよりは構成が複雑になっていますが、
http://jquerymobile.com/demos/1.2.0/
http://jquerymobile.com/demos/1.2.0/docs/buttons …

もＣＳＳで処理していませんか？


特に、2番目のトップにあるボタンは、ご質問のものに近いのではないかと想像しますが、
「basics」の部分については、リンク要素に「ui-btn-active」というクラス設定をすることで、他のボタンと表示を変えているように思えますけれど…
（ざっと見ただけなので、ちゃんと確認していません）

この回答へのお礼

ボタンの種類、かなりあるんですね。さらに工夫できそうです。
ありがとうございました

お礼日時：2012/11/17 02:24

No.1 回答者： fujillin 回答日時： 2012/11/09 10:38

よくわかりませんが、CSSでボタン風（違うのでも良いですが）に見せておいて、表示中のページにはactiveなどのクラスを設定しておくとかではダメなのでしょうか？

そういうのとは質問の意味が違うのかな？

この回答への補足

押されたボタンも、他のボタンと同じ形式のものを並べたいのですが、

jquery mobileのボタンの表示形式をcssで真似ることができるかどうか、やってみるしかないですかね。。

補足日時：2012/11/09 12:25