PhoneGap / jQueryMobile滑块小工具问题:在屏幕上出现两次?

时间:2014-06-30 01:19:30

标签: jquery ios jquery-mobile cordova

我有一个奇怪的问题,也许有人可以帮助我。我正在使用PhoneGap 2.5 / jQueryMobile 1.3.2 / jQuery 1.9.1为iOS应用程序编写应用程序。在应用程序中,每当我使用滑块小部件时,它们在屏幕上出现两次。我尝试在一个单独的html文件(包括jQuery / jQuery mobile)中再现它,它工作得很好(小部件在屏幕上不出现两次)。我尝试刷新小部件(没有做任何事情),甚至使用提到的here延迟功能加载文件。无论如何,问题仍然存在。有帮助吗?这是相关的相关代码(我包括标题只是包含)

<html>
<head>
<title>Rate That Movie!</title>
    <link rel="stylesheet" href="_/css/mystyles.css" />

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=default-width, height=default-height, target-densitydpi=device-dpi" />    
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        var dd = $.Deferred();
        var jqd = $.Deferred();
        $.when(dd, jqd).done(doInit);

        $(document).bind('mobileinit', function () {
            jqd.resolve();
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript" src="cordova-2.5.0.js"></script>
    <script type="text/javascript" src="js/movieRetrieval.js"></script>
    <script type="text/javascript">
        document.addEventListener('deviceready', deviceReady, false);
        function deviceReady() {
            dd.resolve();
        }

    function doInit() {
        alert('Ready');
    }
    </script>
</head>
<body>
<div id="actor0" data-theme="a" data-role="page5" data-title="View Source: results">
            <div data-role="header"
                    data-theme="a"
                    data-position="fixed"
                    data-id="vs_header">
            <h1>...</h1>
            <a href="#home"
                        id ="screen_one"
                        data-icon="home"
                        data-iconpos="notext"
                        data-transition="slide"
                        data-direction="reverse"
        >Home</a>
            <a href="#genre-director"
                        id="to_genre_director"
                        data-icon="right-arrow"
                        data-iconpos="notext"
                        data-transition="slide"
                        data-direction="forward"
        >next</a>
            </div> <!--end of header-->
            <h1>demo rating page</h1>
            <br/>
    <div data-role="contain">
    <div data-role="fieldcontain">
        <p id="label0"></p>
        <input type="range"
           id="slider-mini1" value="0" min="-10" max="10"
           data-highlight="true" />
    </div>

    <div data-role="fieldcontain">
                <p id="label1"></p>
                <input type="range" name="slider-mini"
           id="slider-mini2" value="0" min="-10" max="10"
           data-highlight="true" />
    </div>

    <div data-role="fieldcontain">
                <p id="label2"></p>
                <input type="range" name="slider-mini"
           id="slider-mini3" value="0" min="-10" max="10"
           data-highlight="true" />
    </div>

    <div data-role="fieldcontain">
    <p id="label3"></p>
    <input type="range"  name="slider-mini"
           id="slider-mini4" value="0" min="-10" max="10"
           data-highlight="true" />
    </div> -->
    </div><!-- end of container -->
    </div> <!--end of actor page -->

</body>
</html>

0 个答案:

没有答案