1

XPages アプリケーションに Twitter Bootstrap を採用しようとしてきました。これまでのところ、私は主に CSS を試してきました。

私が本当に気に入っていることの 1 つは、次の構文を使用してボタンを簡単に装飾する (つまり、ボタンにアイコンを追加する) 方法です。

<button class="btn" type="button"><i class="icon-ok"></i> Approve</button>

<i>タグの内側にタグを使用して装飾を追加し<button>ます。そして、ここに問題があります。ボタン コア コントロールを使用する場合、<i>タグはvalue属性内に配置する必要があります。もちろん、それは機能していません。

CSS を変更することでこれを修正できますが、それは私が追求したいコースではありません。

<i>解決策は、ボタン コントロールがレンダリングされた後にタグを「挿入」することです。サーバー側のスクリプトでは成功していませんが、次のように Dojo を使用して成功することができました。

<xp:button id="button1" styleClass="btn" value="Approve">
</xp:button>

<script type="text/javascript">
  var decorate = function() {
    e = dojo.query("[id$='button1']")[0];
    e.innerHTML = '<i class="icon-ok"></i> Aprove';
  }    

  dojo.addOnLoad(decorate);
</script>

これを行うより良い方法はありますか？に代わるものはありdojo.addOnLoadますか？これはSSJSを通じて達成できますか?

4

2 に答える 2

4

ボタン内にパススルー タグを追加できます。

<xp:button styleClass="btn" value="BUTTON">
   <i class="icon-ok"></i>
</xp:button>

生成された HTML は次のようになります。

<button class="btn" type="button" name="view:_id1:_id2"><i class="icon-ok"></i>BUTTON</button>

編集：

他の HTML 要素を使用して内部にコンテンツを追加する場合は、xp:panelが役立ちます。

<xp:panel styleClass="btn" tagName="a">
   <i class="icon-ok"></i>
   ...OTHER INTERESTING THINGS INSIDE...
</xp:panel>

これが結果の HTML コードです。

<a class="btn">
   <i class="icon-ok"></i>...OTHER INTERESTING THINGS INSIDE...</a>
于 2013-04-27T13:30:41.000 に答える
0

本当にボタンを使用する必要がありますか? 必要に応じて、ここに代替手段があります。このようなアンカーを使用してみてください<a href='#' class='btn'><i class='icon-ok'></i> Approve </a>

于 2013-04-27T02:42:06.837 に答える