jQuery Mobile Popup reposition() 方法

在jQuery移动环境中，弹出窗口(elements)通常会使用弹出对话框进行显示。如果弹出对话框的定位不正确，就会对用户体验产生负面影响。幸运的是，jQuery Mobile具有一个名为reposition()方法，可以使弹出对话框重新定位，并可以在每次对话框显示时自动调用该方法，以确保对话框始终位于正确的位置。

如何使用reposition() 方法

reposition() 方法可在弹出Tooltips, Dialogs, Popups和Collapsed widgets时使用。

$( "myPopup" ).on({
    popupbeforeposition: function() {
        $( this ).jqmData( "position", $( this ).jqmData( "positionTo" ) );
        // Set the correct pop-up position
        $( this ).jqmData( "position", $.mobile.window.scrollTop() + 100 );
        $( this ).jqmData( "position", $.mobile.window.scrollLeft() + 100 );
    },
    popupafteropen: function() {
        // Call the reposition method after the popup is open
        $( this ).popup( "reposition", {positionTo: "origin"} );
    }
});

reposition() 方法可选参数

reposition()方法还可接收以下参数：

• my：（默认：window）要重定位的窗口对象
• at：要将待定元素对齐到的对象
• of：计算待定元素位置的基对象
• collision：可能发生的碰撞事件和如何解决碰撞。

$( "#myPopup" ).popup( "reposition", {
   my: "center top",
   at: "center top",
   of: window,
   collision: "flip"
});

my

在要定位的元素的"x"和"y"位置显示一个相对于“at”的元素。默认为'center top'。

at

要将窗口对齐到的元素。

of

计算目标元素位置的基本对象。默认为窗口对象。

collision

定义运行时希望发生的碰撞事件和如何解决这些事件。默认为“flip”键。

结论

使用reposition()方法可以使弹出对话框在显示时自动调用该方法，以确保对话框始终位于正确的位置。可以使用该方法的可选参数进行微调与更好的体验。