如何从 javascript (GPS) 显示 jQuery 移动对话框

Question

我正在使用 JQM 和 PhoneGap 开发一个应用程序。开始时，应用程序会检查 GPS 是否已启用。如果没有，它应该打开一个 JQM 对话框。

JavaScript 的标准对话框有效，但我想要 JQM 对话框，但它不起作用。

这是我的代码：

<!-- PhoneGap 2.9.1  -->
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>

---

来自 PhoneGap 文档： 我在最后插入了一行： $.mobile.changePage('#dialogGPS', { transition: 'pop', role: 'dialog' });

<div data-role="page" id="home">

    <div data-role="header">
        <h1>Test</h1>
    </div>

    <div data-role="content">
        Hello
    </div>

    <script type="text/javascript">
    $('#home').on("pageshow", function() {  
        // Wait for device API libraries to load
        //
        document.addEventListener("deviceready", onDeviceReady, false);

        // device APIs are available
        //
        function onDeviceReady() {
            navigator.geolocation.getCurrentPosition(onSuccess, onError);
        }

        // onSuccess Geolocation
        //
        function onSuccess(position) {
            var element = document.getElementById('geolocation');
            element.innerHTML = 'Latitude: '           + position.coords.latitude              + '<br />' +
                                'Longitude: '          + position.coords.longitude             + '<br />' +
                                'Altitude: '           + position.coords.altitude              + '<br />' +
                                'Accuracy: '           + position.coords.accuracy              + '<br />' +
                                'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' +
                                'Heading: '            + position.coords.heading               + '<br />' +
                                'Speed: '              + position.coords.speed                 + '<br />' +
                                'Timestamp: '          + position.timestamp                    + '<br />';
        }

        // onError Callback receives a PositionError object
        //
        function onError(error) {
            alert('code: '    + error.code    + '\n' +
                  'message: ' + error.message + '\n');

            $.mobile.changePage('#dialogGPS', { transition: 'pop', role: 'dialog' });
        }
    });
    </script>

</div>

---

dialogGPS 角色：

<div data-role="dialogGPS">
        <div data-role="header" data-theme="d">
            <h1>Dialog</h1>
        </div>
        <div data-role="content" data-theme="c">
            <p>Content goes here.</p>
            <a href="#home" data-role="button" data-rel="back" data-theme="b">OK</a> 
            <a href="#home" data-role="button" data-rel="back" data-theme="c">Cancel</a>
        </div>
    </div>

Answer 1

我认为您的对话框标记是错误的。而不是：

<div data-role="dialogGPS">

试试

<div id="dialogGPS" data-role="page">

这是一个DEMO FIDDLE