Question

我是JQuery Mobile的新手，我很难实例化 pagecontainer小部件。我已经阅读了JQ Mobile文档，其中有一些摘录，并在此处寻找解决方案，但我一直得到同样的错误：＆＃34; undefined不是函数＆＃34;。

本说明和代码示例来自小部件上的文档：

注意：pagecontainer小部件被设计为由body元素上的框架实例化的单例。在jQuery Mobile的未来版本中将删除此限制。

文档代码示例：

使用指定的defaults选项初始化pagecontainer：

$( ".selector" ).pagecontainer({ defaults: true });

使用指定的create callback初始化pagecontainer：

$( ".selector" ).pagecontainer({
  create: function( event, ui ) {}
});

所以，我正在使用这些信息＆＃34; body＆＃34;作为选择器然而我一直得到＆＃34; undefined不是一个函数＆＃34;使用任一代码示例的消息。这是我的代码：

HTML

<div data-role="page" id="one">
<div data-role="header"></div>
<div data-role="main" class="ui-content">   
    <p><a href="#map-page" data-role="button" data-transition="slide">Show Map Page</a></p> 
<div data-role="footer" data-theme="a"></div>
</div>
<!-- Start of page: #map-page -->
<div data-role="page" id="map-page" data-url="map-page" data-add-back-btn="true">
<div data-role="header" data-theme="a">
   <h1>Maps</h1>
</div>
<div role="main" class="ui-content" id="map-canvas">
    <!-- map loads here... -->
</div>
<div role="main" class="ui-content">
    <form class="full-width-slider">
        <label for="slider-12" class="ui-hidden-accessible">Slider:</label>
        <input type="range" name="slider-12" id="slider-12" min="0" max="100" value="50">
    </form>
    <?php require "selectform3.php"; ?>
</div>
</div><!-- map page -->

JS：

$(document).on("pagecreate", "#one", function (e) {
    console.log(e);

    $("body").pagecontainer({
        defaults: true
    });
    var defaults = $("body").pagecontainer("option", "defaults");
    console.log(defaults); //undefined is not a function

    $("body").pagecontainer({
        create: function (event, ui) {
            console.log(event) //undefined is not a function
        }
    });

});

$("#map-page").on("pagebeforecreate", function () {
    $.getScript("googlemaps2.js")
        .done(function (script, textStatus) {})
        .fail(function (jqxhr, settings, exception) {
        console.log("Triggered ajaxError handler.");
    });
});

$("#map-page").on('pagecreate', function (e) {
    console.log(e);
});

Answer 1

首先，我将JQ升级到v 1.11.1，并且小部件在文档中按预期工作。完成后，我就可以使用小部件将标题的主题从“b”更改为“a”：

使用JQM选择器“初始化”标题上的小部件：

$（“div：jqmData（role ='header'）”）。pagecontainer（）;

每个文档：当通过jQuery Mobile数据属性查找元素时，请使用自定义选择器：jqmData（）。 http://api.jquerymobile.com/jqmData/

//初始化后设置主题选项：

$（“div：jqmData（role ='header'）”）。pagecontainer（“option”，“theme”，“a”）;

无法实例化JQUERY Mobile pagecontainer小部件

1 个答案: