3

HTMLチェックボックスの後に右側のラベルを表示したいと思います。

Pere Villegaの提案に従い、Play2.1 -SNAPSHOTバージョンをviews.helper.checkbox.scalaasに変更しましviews.helper.twitterCheckbox.scalaた。私のプロジェクトでは、Webjarsが提供するバージョンのTwitterBootstrapを使用しています。

@**
 * Generate an HTML input checkbox for Twitter Bootstrap.
 *
 * Example:
 * {{{
 * @checkbox(field = myForm("done"))
 * }}}
 *
 * @param field The form field.
 * @param args Set of extra HTML attributes ('''id''' and '''label''' are 2 special arguments).
 * @param handler The field constructor.
 *@
@(field: play.api.data.Field, args: (Symbol,Any)*)(implicit handler: FieldConstructor, lang: play.api.i18n.Lang)

@boxValue = @{ args.toMap.get('value).getOrElse("true") }

@input(field, args:_*) { (id, name, value, htmlArgs) =>
  <label class="checkbox">
    <input type="checkbox" name="@name" value="@boxValue" @(
      if(value == Some(boxValue)) "checked" else "") @toHtmlArgs(htmlArgs.filterKeys(_ == 'value)) />
    @args.toMap.get('_text)
  </label>
}

私は次のようなフォームヘルパーを使用しました：

@import helper._
@form(action = courseName.map(routes.CoursesController.update(_)).getOrElse(routes.CoursesController.save()),
               args = 'class -> "form-horizontal") {
  <div class="span3">
    <p><b>@{if (allCourses.size>0) "" else "No "}Prerequisite Courses</b></p>
    <div class="control-group">
      <div class="controls">
        @allCourses.map { course =>
          @twitterCheckbox(field = editCourseForm(course.name))
        }
      </div>
    </div>
  </div>
}

しかし、このような出力が得られるため、チェックボックスがラベルとは別の行に表示されます。dl出力は読みやすいようにフォーマットされています-とddタグに注意してください：

<form action="/courses/admin" method="POST" class="form-horizontal">
<div class="span3">
  <p><b>Prerequisite Courses</b></p>
  <div class="control-group">
    <div class="controls">
      <dl class=" " id="skus_field">
        <dt><label for="skus">skus</label></dt>
        <dd>
          <label class="checkbox">
            <input type="checkbox" name="skus" value="true"   />
          </label>
        </dd>
       </dl>
    </div>
  </div>
</div>
</form>

私が気付いていないある種の暗黙の振る舞いがあるようです。代わりに次のようなもの、または少なくとも望ましい結果をもたらす出力を生成するにはどうすればよいですか？

<form action="/courses/admin" method="POST" class="form-horizontal">
<div class="span3">
  <p><b>Prerequisite Courses</b></p>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input name="skues" type="checkbox" value="true"> sku1
      </label>
    </div>
  </div>
</div>
</form>
4

1 に答える 1

8

同様の問題がありました。チェックボックスがTwitterBootstrapCSS用に適切にフォーマットされていませんでした。

<label>したがって、（タグを追加するために）独自のチェックボックスヘルパーを定義する必要がありました。

ファイルパス：

app\views\helper\checkbox2.scala.html

コンテンツ：

@(field: play.api.data.Field, args: (Symbol,Any)*)(implicit handler: FieldConstructor, lang: play.api.i18n.Lang)

<label class="checkbox">
    @checkbox(field, args:_*)
</label>

次に、フィールドコンストラクターテンプレートをTwitterBootstrapに一致するように再定義しました。

ファイルパス：

app\views\helper\bootstrapInput.scala.html

コンテンツ：

@(elements: helper.FieldElements)

<div class="control-group @if(elements.hasErrors) {error}">
    <label class="control-label" for="@elements.id">@elements.label</label>
    <div class="controls">
        @elements.input
        @if(!elements.errors.isEmpty) {
            <span class="help-inline alert alert-error">@elements.errors(elements.lang).mkString(", ")</span>
        }
        <span class="help-block">@elements.infos(elements.lang).mkString(", ")</span>
    </div>
</div>

次に、上記のテンプレートへの暗黙の呼び出しを使用してフィールドコンストラクターを作成しました。

ファイルパス：

app\controllers\helpers\BootstrapHelper.scala

コンテンツ：

package controllers.helpers

import views.html.helper.FieldConstructor

object BootstrapHelper {
  implicit val myFields = FieldConstructor(views.html.helper.bootstrapInput.f)
}

そして最後に、「通常の」ビューにインポートします。

@import helper._
@import helpers.BootstrapHelper._

これはまさにドキュメント（http://www.playframework.com/documentation/2.1.0/ScalaFormHelpers）に書かれており、うまく機能します。

最後に、すべての入力がTwitterBootstrapとチェックボックスで正しく表示されました。

お役に立てれば

Mike Slinnの質問に従って編集し、ファイルパスと、フィールドコンストラクターの暗黙的な呼び出しに関する詳細をいくつか追加しました。ただし、ここではファイル名は実際には重要ではなく、バリアントが暗黙の呼び出しを行うことができます（ドキュメントを参照）。

于 2013-03-07T10:00:41.417 に答える