Question

我正在使用jQuery Mobile主要用于构建此站点，但我已经包含jQuery UI，用于移动中缺少的一些功能，例如日期选择器（主要从桌面访问的站点的一部分）。直接加载页面时一切正常，但我实际上无法从站点的其他地方导航到页面 - AJAX加载微调器只是旋转。我在控制台中看到错误：TypeError: $(...).datepicker is not a function。我假设这与jQuery Mobile的AJAX页面加载有关，并且该修复与API信息中的pageinit信息有关，但我不理解应用它。

换句话说，如何将<script> $("#mydatepicker").datepicker(); </script>转换为适用于pageinit的内容？

编辑：页面请求：

<head>
    <meta charset="utf-8">
    <title>Test Site</title>

    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="cleartype" content="on">

    <link rel="stylesheet" href="_css/normalize.css" />
    <link rel="stylesheet" href="_css/red_ui_variant/jquery-ui-1.10.3.custom.min.css" />
    <link rel="stylesheet" href="_css/jquery.mobile.structure-1.3.1.css" />
    <link rel="stylesheet" href="_css/red_mobile_variant.css" />
    <link rel="stylesheet" href="_libraries/foundation-4.1.5.custom/css/foundation.css" />
    <link rel="stylesheet" href="_css/main.css" />

    <script src="_scripts/vendor/custom.modernizr.js"></script>
    <script src="ckeditor/ckeditor.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="_scripts/jquery-migrate-1.1.1.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

</head>

Answer 1

在jQuery Mobile中使用jQuery UI时，在jQuery Mobile之前初始化它很重要，它不适用于任何其他情况。基本上你的HEAD应该是这样的：

<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />        
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>          
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>      
</head>

另外一件事，就像你提到的那样，必须在jQM页面事件中初始化datapicker。在这种情况下，您可以使用任何页面事件，但通常最好坚持使用pageinit。

这样做，如果这是你的HTML：

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <p>Date: <input type="text" id="datepicker" /></p>                
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>

然后你会像这样初始化datapicker：

$(document).on('pageinit', '#index', function(){       
    $( "#datepicker" ).datepicker();
});

这是一个有效的例子：http://jsfiddle.net/Gajotres/sSqKz/

最后一点，如果您想了解更多有关jQuery Mobile页面事件的信息，请查看我的其他答案： jQuery Mobile: document ready vs page events

如果在页面上调用jQuery UI小部件（datepicker），jQuery Mobile Page将无法加载？

1 个答案: