1

Twitter ブートストラップ フレームワークを使用して、プレイ フレームワークでフォームを構築しようとしています。

コントロールを複数行に配置したい。また、ブートストラップが提供する検証メッセージも必要です。これを行う方法はありますか？

<form class="form">

    @****
    * This works
    *****@

    <div class="controls controls-row">
        <input type="text" id="inputWarning" placeholder="placeholder">
        <input type="text" id="inputWarning" placeholder="placeholder">
    </div>

    @****
    * Why doesn't this work?
    *****@
    <div class="controls controls-row">
        <div class="control-group warning">
            <label class="control-label" for="inputWarning">Input with warning</label>
            <div class="controls">
                <input type="text" id="inputWarning">
                <span class="help-inline">Something may have gone wrong</span>
            </div>
        </div>
        <div class="control-group warning">
            <label class="control-label" for="inputWarning">Input with warning</label>
            <div class="controls">
                <input type="text" id="inputWarning">
                <span class="help-inline">Something may have gone wrong</span>
            </div>
        </div>
    </div>

</form>
4

1 に答える 1

2

Twitter ブートストラップ ドキュメントform-horizontalで説明されているようにクラスを使用して、水平フォームを作成できます。

Play は、フォームのレンダリングをより簡単にするフォーム テンプレート ヘルパーを提供します。残念ながら、Play に同梱されている Twitter Bootstrap テンプレート ヘルパーは横型フォームでは機能せず、次の Play バージョンで廃止される予定です。

最善の解決策は、f.ex のような独自の Bootstrap テンプレート ヘルパーを作成することだと思います。app/views/twitterBootstrapInput.scala.html

@(elements: helper.FieldElements)  

<div class="control-group @if(elements.hasErrors) {error}">
  @if(elements.label.toString.nonEmpty) { <label class="control-label" for="@elements.id">@elements.label</label> }
  <div class="controls">
  @elements.input

    <p class="help-inline">@elements.infos.mkString(", ")</p>  
}  
    @if(elements.hasErrors) { <p class="help-block">@elements.errors.mkString(", ")</p> }  
  </div>
</div>

次に、次のような水平フォームを作成できます。

@(args...)

@import helper._
@implicitFieldConstructor = @{ FieldConstructor(twitterBootstrapInput.f) } 

@helper.form(routes.myRoute(args), 'class -> "form-horizontal") {
   @select(
     editOptions("highlightStyle"),
     Seq("abc" -> "def", "ghi" -> "jkl"),
     '_label -> "Source style:"
   )
}
于 2013-03-23T06:46:50.230 に答える