apex:commandLinkをボタン風に変更する

apex:commandButtonを使って別画面起動が出来なくて、苦肉の策でapex:commandLinkをボタン風にしてごまかした記録。

やり方は、スタイルで「btn」をあてる。
押下不可状態にしたければ、スタイルは「btnDisabled」となる。

<apex:commandLink value="commandLink" styleClass="btn" />
<apex:commandLink value="commandLink" styleClass="btnDisabled" />

これの結果。

これだけだと、リンクのアンカーラインが表示されてしまう。
なので、aタグに対してスタイルをあてる。

a{ text-decoration: none; }

これの結果。

しかし、まだ課題が。
カーソルをあてると、アンカーラインが表示される。色が変わる。
カーソルがキャプチャ出来ていないが、こんな感じ。

これの対応は少し面倒。

/* 押下可能ボタン */
a:link.lnk2btn{ text-decoration: none; color: black; }
a:visited.lnk2btn{ text-decoration: none; color: black; }
a:hover.lnk2btn{ text-decoration: none; color: black; }
a:active.lnk2btn{ text-decoration: none; color: black; }

/* 押下不可ボタン */
a:link.lnk2btnD{ text-decoration: none; }
a:visited.lnk2btnD{ text-decoration: none; }
a:hover.lnk2btnD{ text-decoration: none; }
a:active.lnk2btnD{ text-decoration: none; }

リンク先表示済みの場合など色が変わるので、それぞれのスタイルを作成する。
なお、上記順番で記述しないと反応しない。

押下可能可否でクラスを分けたのは、押下不可の場合、文字色を変えるため。黒ではおかしい。

そのため、apex:commandLinkの方も書き換える

<apex:commandLink value="commandLink" styleClass="btn lnk2btn" />
<apex:commandLink value="commandLink" styleClass="btnDisabled lnk2btnD" />

最後に、押下不可ボタンを押下したときに無反応にさせる。
onclickを追加する。

<apex:commandLink value="commandLink" styleClass="btn lnk2btn" />
<apex:commandLink value="commandLink" styleClass="btnDisabled lnk2btnD" onclick="return false;" />

元々がリンクであるため、縦に配置するとボタン同士がくっついたりするので、適宜調整は必要。