2

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

换句话说，我如何<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>
4

1 回答 1

4

在 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 页面事件中初始化数据选择器。在这种情况下，您可以使用任何页面事件，但通常最好坚持使用 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>

然后你会像这样初始化数据选择器：

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

这是一个工作示例：http: //jsfiddle.net/Gajotres/sSqKz/

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

于 2013-05-05T22:17:47.120 回答