jQuery UI の position の振る舞いがちょっと弱った話

基本「きゃーすてきー」なんだろうけどさ。

jQuery UI Position に従って「Dialog がどの種類も真ん中では使いにくかろ」とたくさん出してる Dialog の初期表示位置を「粗く」コントロールしていたのだけれど、「left, right, top, bottom, center」だけでは足りないので、Each dimension can also contain offsets, in pixels or percent, e.g., "right+10 top-25%". を試みようとして思わずハマった、という話。

理解してしまえばなんてことないことだったけれど、「オフセットはダイアログの四隅も考慮の上で」指定しないとダメなわけなのよ。なのでたとえばこんなのが「正解」なの:

 1 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
 2 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 3 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 4 <!-- ... -->
 5 <div id="settings-dialog" class="dialog" title="Settings">
 6 <!-- ... -->
 7 </div>
 8 <!-- ... -->
 9 <script>
10 /* ... */
11 $("#open-settings-dialog").on("click", function() {
12     var width = 400;
13     var height = 200;
14     var x_off = 80;
15     var y_off = 40;
16     $("#settings-dialog").dialog({
17         width: width,
18         height: height,
19         position: {
20             at: "left+" + (x_off + width / 2) + " top+" + (y_off + height / 2),
21         },
22     });
23 });
24 </script>

最初全然言うこと効かなくて意味わからなかったよ。そしてだとすると、「デフォルトの width, height 任せ」は避けた方がかえって楽、というちょっといやらしい結論に。(もしくは多少のズレは気にしない、として「えいや」でオフセットを決めるかどっちかだろう。)

こういうのさぁ、いっそこれが許されたら楽なのに:

効かないよ残念ながら
1 $("#open-settings-dialog").on("click", function() {
2     $("#settings-dialog").dialog({
3         position: {
4             at: "200 200",
5         },
6     });
7 });


Related Posts