0

我是 JQueryMobile 的新手，当我在我的 jsfiddle测试它的工作正常时，但是当我在 Android 模拟器上运行时，它变成了这个图像。缺少日期和时间选择器

下面是我的示例代码，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title></title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <link rel="stylesheet" href="resources/css/my.css" />
                
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
        <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

        <!-- Optional Mousewheel support: http://brandonaaron.net/code/mousewheel/docs -->
        <script type="text/javascript" src="resources/js/jquery.mousewheel.min.js"></script>

        <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
        <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
        <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
        
        <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
        
        
        <style>
            /* App custom styles */
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script src="resources/js/my.js"></script>
    </head>
    <body>
        <!-- Home -->
        <div data-role="page" id="page1">
            <div data-theme="b" data-role="header">
                <a data-role="button" data-inline="true" data-transition="slide" data-theme="b" href="#page1" class="ui-btn-left">
                    Calendar
                </a>
                <a data-role="button" data-inline="true" data-transition="slide" href="#page1" class="ui-btn-right">
                    Save
                </a>
                <h4>
                    Edit Event
                </h4>
            </div>
            <div data-role="content">
                <div data-role="fieldcontain">
                        <label for="txtTitle">
                            Title
                        </label>
                        <input name="" id="txtTitle" placeholder="" value="" type="text" />                    
                </div>
                
                <div data-role="fieldcontain">
                  <label for="link1">Start Time*</label>
                  <input name="link1" type="text" data-role="datebox" data-options='{"mode": "timebox"}' id="link1" />
                  <label for="link3">End Time*</label>
                  <input name="link3" type="text" data-role="datebox" data-options='{"mode": "timebox"}' id="link3" />
                  <label for="mydate">Date*</label>
                  <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox"}'>
                </div>
                
            </div>
        </div>
        <script>
            //App custom javascript
        </script>
    </body>
</html>​

感谢任何人都可以指导我。

4

1 回答 1

1

这似乎是模拟器的问题，我刚刚在我的设备（HTC Desire with Android 2.2）上测试了你的例子，它工作正常，看截图
在此处输入图像描述

唯一的问题是，在按下其中一个图标后，键盘也会打开……但这是另一个问题……在此处输入图像描述

关于键盘问题，您可能想看看这些答案

于 2012-10-29T22:33:36.957 回答