目次
jQuery.validationEngine で、 ポップアップの位置を変更する方法をまとめました。
環境
- jQuery.validationEngine v2.6.2
経緯
jQuery.validationEngine を jQuery UI の Dialog 内 のフォームで使用したら、 アラートのポップアップが入力欄の上の方に表示されて見えなくなったため、 ポップアップの位置を調整する必要が出てきた。
属性 data-prompt-position
を使用します。
基本
data-prompt-position
に topLeft
, bottomLeft
, bottomRight
を指定します。 デフォルトでは topRight
になっています。
1 2 3 |
<input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" data-prompt-position="topLeft" /> <input value="" class="validate[required] text-input" type="text" name="req" id="req" data-prompt-position="bottomLeft" /> <input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" data-prompt-position="bottomRight" /> |
位置調整
data-prompt-position
に 基本となるポジション と オフセット を記述します。
ポジションを指定すると下のようになります。 これだけでも表示される位置が変わります。 data-prompt-position
属性 に topLeft
, topRight
, bottomLeft
, bottomRight
の値を設定します。
1 2 3 |
<input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" data-prompt-position="topLeft" /> <input value="" class="validate[required] text-input" type="text" name="req" id="req" data-prompt-position="bottomLeft" /> <input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" data-prompt-position="bottomRight" /> |
オフセットを設定すると、topLeft
に配置したいけれども一番左じゃなくて左から2文字ぐらい右に移動したところ、といったような微調整を行うことができます。 data-prompt-position
の値をtopLeft:20,5
のように変更します。 最初の数値は X のオフセット、 次の数値が Y のオフセットです。
1 2 3 |
<input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" data-prompt-position="topLeft:70" /> <input value="" class="validate[required] text-input" type="text" name="req" id="req" data-prompt-position="bottomLeft:20,5" /> <input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" data-prompt-position="bottomRight:-100,3" /> |