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

質問

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

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

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

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

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

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

回答No.2

tracer · ベストアンサー

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

お礼

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

回答No.3

fujillin

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」というクラス設定をすることで、他のボタンと表示を変えているように思えますけれど…
（ざっと見ただけなので、ちゃんと確認していません）

お礼

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

回答No.1

fujillin

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

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

補足

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

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