jQuery Mobile面板滑动功能导致错误。

4

我遇到了很大的困难,我有一个使用mootools的翻转时钟,然后是使用Yahoo API的天气小部件,现在我不知道是什么原因导致出现

"在初始化之前不能调用面板上的方法;尝试调用方法'open'"

所以我按照这个演示进行操作,http://view.jquerymobile.com/master/docs/examples/panels/panel-swipe-open.php#demo-page,现在我遇到了错误。

$( document ).on( "pageinit", "#demo-page", function() {
$( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
    // We check if there is no open panel on the page because otherwise
    // a swipe to close the left panel would also open the right panel (and v.v.).
    // We do this by checking the data that the framework stores on the page element (panel: open).
    if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
        if ( e.type === "swipeleft"  ) {
            $( "#right-panel" ).panel( "open" );
        } else if ( e.type === "swiperight" ) {
            $( "#left-panel" ).panel( "open" );
        }
    }
});

});

我有点束手无策,因为它曾经起作用,你可以随意查看我的代码,http://yaasko.com/gra423/project-4.3/ 如果你试图向左或向右滑动,控制台将输出错误。

请让我知道如果你能帮忙,我是第一次使用jquery mobile!

1个回答

10

对于此消息:

"无法在初始化面板之前调用方法;尝试调用方法 'open'"

可以按照以下方式打开面板:

$( "#left-panel" ).panel().panel("open");

第一个 panel() 调用将对其进行初始化,第二个调用将打开它。

编辑:

$(document).on('pagebeforeshow', '#index', function(){        
    $( document ).on( "swipeleft swiperight", "#index", function( e ) {
        if ($.mobile.activePage.find('#left-panel').hasClass('ui-panel-closed') && e.type === "swipeleft") {
            $( "#right-panel" ).panel( "open" ); 
        }    

        if ($.mobile.activePage.find('#right-panel').hasClass('ui-panel-closed') &&  e.type === "swiperight") {
            $( "#left-panel" ).panel( "open" );           
        }        
    });
});

1
谢谢您的帮助,这是我所做的:if ($j.mobile.activePage.jqmData("panel") !== "open") { if (e.type === "swipeleft") { $j("#right-panel").panel().panel("open"); } else if (e.type === "swiperight") { $j("#left-panel").panel().panel("open"); } }现在我遇到了“无法读取未定义的属性'nodeType'”和“无法调用null的'jqmData'方法”的问题。 - Yasko
1
你是一个救命恩人!非常感谢。我来自波斯尼亚的Velka Kladusa,但我六岁时就来到了美国。好的,再见! - Yasko
没问题,如果你需要额外的帮助,请直接通过邮件联系我。 - Gajotres

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接