在$ .mobile中覆盖JQuery Mobile方法的正确方法

时间:2012-10-16 02:02:50

标签: jquery jquery-mobile extending

我正在研究的JQuery Mobile应用程序在软键盘启动时往往会吓坏。我已经实现了一个解决方案并且效果很好,但是我必须直接编辑jquery.mobile-1.2.0.js来完成它。我更愿意将我的更改保存在jquery.mobile.customizations.js文件中,该文件扩展了jQuery Mobile。

我尝试执行以下操作但没有成功:

delete $.mobile.getScreenHeight;
$.mobile.last_width = null;
$.mobile.last_height = null;
$.mobile.getScreenHeight = function() 
{
   // My modified version
}

我在我的$.mobile.getScreenHeight和原始$.mobile.getScreenHeight中添加了提醒语句。我确实看到我的自定义方法的警报被触发,但有时它也会触发原始函数中的警报。

有没有人知道在$ .mobile中覆盖方法的正确方法,还要添加两个新属性?

(原始问题的完整详情位于window.resize due to virtual keyboard causes issues with jquery mobile

更新

@elclanrs - 我试图在没有运气的情况下实现下面的代码。我也尝试过交换第二个和第三个参数。每当我运行代码时,它会触发我的扩展getScreenHeight,但它会触发基本的getScreenHeight。 (我掏空了原来的getScreenHeight并在里面发出警报。警告永远不应该开火。

开放思想!

$.mobile = $.extend( {}, $.mobile, {
    last_width: null,
    last_height: null,
    getScreenHeight: function() {
        // My code...
    }
} );

1 个答案:

答案 0 :(得分:0)

违规行似乎是getScreenHeight = $.mobile.getScreenHeight;,它将当前定义放在resetActivePageHeight函数的闭包中。我不确定是否可以在不编辑文件的情况下直接覆盖它,但是你可以将它从下游开始:

  //simply set the active page's minimum height to screen height, depending on orientation
  function resetActivePageHeight() {
    var aPage = $( "." + $.mobile.activePageClass ),
      aPagePadT = parseFloat( aPage.css( "padding-top" ) ),
      aPagePadB = parseFloat( aPage.css( "padding-bottom" ) ),
      aPageBorderT = parseFloat( aPage.css( "border-top-width" ) ),
      aPageBorderB = parseFloat( aPage.css( "border-bottom-width" ) );

    aPage.css( "min-height", getScreenHeight() - aPagePadT - aPagePadB - aPageBorderT - aPageBorderB );
  }


  //set page min-heights to be device specific
  $( document ).bind( "pageshow", resetActivePageHeight );
  $( window ).bind( "throttledresize", resetActivePageHeight );

定义您自己的resetActivePageHeight然后unbindbind再次确定这些可能会有所帮助。这有点乱。