jQuery.validationEngine: ポップアップの位置を変更する方法


jQuery.validationEngine で、 ポップアップの位置を変更する方法をまとめました。

環境

  • jQuery.validationEngine v2.6.2

経緯

jQuery.validationEngine を jQuery UI の Dialog 内 のフォームで使用したら、 アラートのポップアップが入力欄の上の方に表示されて見えなくなったため、 ポップアップの位置を調整する必要が出てきた。

属性 data-prompt-position を使用します。

基本

data-prompt-positiontopLeft, bottomLeft, bottomRight を指定します。 デフォルトでは topRight になっています。

位置調整

data-prompt-position に 基本となるポジション と オフセット を記述します。

ポジションを指定すると下のようになります。 これだけでも表示される位置が変わります。 data-prompt-position 属性 に topLeft, topRight, bottomLeft, bottomRight の値を設定します。

オフセットを設定すると、topLeft に配置したいけれども一番左じゃなくて左から2文字ぐらい右に移動したところ、といったような微調整を行うことができます。 data-prompt-position の値をtopLeft:20,5 のように変更します。 最初の数値は X のオフセット、 次の数値が Y のオフセットです。