2

フォーム テンプレートで@inputRadioGroupヘルパー (ここにあります)を使用したいと思います。

@inputRadioGroup(
          contactForm("gender"),·
          options = options("M"->"Male","F"->"Female"))

まあ、すべて大丈夫です。icon/imageしかし、代わりに使用したいと思いtextます。そのようなもの（Twitterブートストラップcssを使用）：

@inputRadioGroup(
          contactForm("gender"),·
          options = options("M"->"<i class="icon-user"></i>","F"->"<i class="icon-user"></i>"))

この場合、生成される html コードは次のとおりです。

<label for="gender_M">
&amp;lt;i class=&amp;quot;icon-user&amp;quot;&amp;gt;&amp;lt;/i&amp;gt;
</label>

アイコン html はエスケープされます。アイコンは表示されません。このヘルパーを使用してアイデアを発展させるにはどうすればよいですか?

注：Html()メソッドを使用しようとしましたが、同じ問題が発生しました。次の Scala 行コード:

options("M"->Html("<i class=\"icon-user\"></i>").text)

次の HTML コードを生成します。

<label for="gender_M">&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;</label>

ブラウザでのレンダリングは次のとおりです。

<i class="icon-info-sign"></i>

HTMLがエスケープしているため、アイコンが表示されません...誰かアイデアがありますか?

前もって感謝します。

4

2 に答える 2

1

たとえば、以下の内容のパッケージ内のinputRadioButton.scala.htmlファイルを作成して、既定のフィールド ヘルパーをオーバーライドします (必要に応じて変更します)。views.utils

@(field: play.api.data.Field, options: Seq[(String,String)], args: (Symbol,Any)*)(implicit handler: helper.FieldConstructor, lang: play.api.i18n.Lang)

@helper.input(field, args:_*) { (id, name, value, htmlArgs) =>
  <span class="buttonset" id="@id">
    @options.map { v =>
      <input type="radio" id="@(id)_@v._1" name="@name" value="@v._1" @(if(value == Some(v._1)) "checked" else "") @toHtmlArgs(htmlArgs)>
      <label for="@(id)_@v._1">@Html(v._2)</label>
    }
  </span>
}

次に、フィールド テンプレートに表示する場合:

@import helper._
@import views.utils.inputRadioButton
于 2012-10-05T15:44:29.573 に答える
0

生成されたラベルタグにクラスを適用する必要がある場合は、運が悪いです。radioButtonGroupを作成するコードは、それ自体がscalaテンプレートです。次のようになります。

@input(field, args:_*) { (id, name, value, htmlArgs) =>
  <span class="buttonset" id="@id">
    @options.map { v =>
      <input type="radio" id="@(id)_@v._1" name="@name" value="@v._1" @(if(value == Some(v._1)) "checked" else "") @toHtmlArgs(htmlArgs)>
      <label for="@(id)_@v._1">@v._2</label>
    }
  </span>
}

ご覧のとおり、labelタグには、エスケープされる文字列であるオプションlabelが入力されています。次のようなセレクターを持つCSSルールを使用して背景画像を設定できる場合があります。

span.buttonset#fieldId label:

または、HTMLを手動で作成するか、ドキュメントに従って独自のヘルパーを作成することもできます。

于 2012-10-05T15:04:15.220 に答える