0

我正在尝试开发一个示例笔记应用程序。该应用程序包括一个索引页面，该页面具有两个使用选项的div元素。data-role="page"第一页包括两个按钮。单击任何按钮应div使用页面转换作为幻灯片导航到其他按钮。

这是我的 HTML 代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Dbsample</title>

        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

        <script type="text/javascript" src="css/cordova.js"></script>
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.min.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.2.min.css" />
        <link rel="stylesheet" href="css/custom-theme.min.css" />
        <script type="text/javascript" src="css/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="css/jquery.mobile-1.3.2.min.js"></script>
        <style type="text/css">
            body {
                margin: 0; /* Setting body margins to 0 to have proper positioning of #container div */
            }

            /* #container div with absolute position and 100% width and height so it takes up whole window */
            #container {
                position: absolute;
                width: 100%;
                height: 100%;
            }
        </style>
        <script type="text/javascript">
            $(document).one("mobileinit", function () {

                // Setting #container div as a jqm pageContainer
                $.mobile.pageContainer = $('#container');

                // Setting default page transition to slide
                $.mobile.defaultPageTransition = 'slide';

            });
        </script>
    </head>

    <body>
        <div id="container">
            <div data-role="page" id="homePage">
                <div data-role="header">
                    <h1>Notes</h1>
                </div>
            <div data-role="content" id="mainContent">  
                <ul data-role="listview" id="noteTitleList">
                </ul>
            </div>  

            <div data-theme="a" data-role="footer" data-position="fixed" style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li>
                            <a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="plus">
                                Add
                            </a>
                        </li>
                        <li>
                            <a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="grid">
                                Edit
                            </a>
                        </li>
                    </ul>
                </div>
            </div>  
        </div>
        <div data-role="page" id="editPage">
            <div data-role="header">
                <h1>Notes</h1>
            </div>

            <div data-role="content" id="mainContent">

                <div data-role="fieldcontain" data-controltype="textinput">
                    <label for="textinput1" style="margin-top: 2%;">
                        Title
                    </label>
                    <input name="" id="textinput1" placeholder="" value="" type="text">
                </div>
                <div data-role="fieldcontain" data-controltype="textarea">
                    <label for="textinput2" style="margin-top: 2%; height: 60px;">
                        Details
                    </label>
                    <input name="" id="textinput2" placeholder="" value="" type="text">
                </div>
                <div style="margin-left: 30%; margin-right: 30%;">
                    <input type="submit" data-theme="a" value="Submit">
                </div>
                <div data-theme="a" data-role="footer" data-position="fixed" 
                     style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
                    <div data-role="navbar" data-iconpos="top">
                        <ul>
                            <li>
                                <a href="#homePage" data-transition="slide" data-inline="true" data-theme="b" data-icon="home">
                                    Home
                                </a>
                            </li>
                        </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

但是当我尝试在 avd 上运行它时，似乎数据转换被简单地忽略了。在 logcat 中它会抛出一个错误：

"file:///android_asset/www/index.html: Line 15 : ReferenceError: Can't find variable: $"

不知道原因。有什么帮助吗？

4

3 回答 3

0

使用这个。它应该工作。

<!DOCTYPE HTML>
<html>
<head>
<title>Dbsample</title>

<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style type="text/css">
        body {
            /* Setting body margins to 0 to have proper positioning of #container div */
            margin: 0;
        }

            /* #container div with absolute position and 100% width and height so it takes up whole window */
        #container {
            position: absolute;
            width: 100%;
            height: 100%;
        }

</style>

</head>

<body>
 <div id="container">
<div data-role="page" id="homePage">
    <div data-role="header">
            <h1>Notes</h1>
        </div>
    <div data-role="content" id="mainContent">  
        <ul data-role="listview" id="noteTitleList">
        </ul>
    </div>  

    <div data-theme="a" data-role="footer" data-position="fixed" style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="plus">
                        Add
                    </a>
                </li>
                <li>
                    <a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="grid">
                        Edit
                    </a>
                </li>
            </ul>
        </div>
    </div>  
</div>
<div data-role="page" id="editPage">
    <div data-role="header">
            <h1>Notes</h1>
        </div>

    <div data-role="content" id="mainContent">

    <div data-role="fieldcontain" data-controltype="textinput">
                <label for="textinput1" style="margin-top: 2%;">
                    Title
                </label>
                <input name="" id="textinput1" placeholder="" value="" type="text">
            </div>
         <div data-role="fieldcontain" data-controltype="textarea">
                <label for="textinput2" style="margin-top: 2%; height: 60px;">
                    Details
                </label>
                <input name="" id="textinput2" placeholder="" value="" type="text">
            </div>
            <div style="margin-left: 30%; margin-right: 30%;">
            <input type="submit" data-theme="a" value="Submit">
            </div>
            <div data-theme="a" data-role="footer" data-position="fixed" style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
            <div data-role="navbar" data-iconpos="top">
                <ul>
                    <li>
                        <a href="#homePage" data-transition="slide" data-inline="true" data-theme="b" data-icon="home">
                            Home
                        </a>
                    </li>
                </ul>
              </div>
           </div>
        </div>
    </div>
</div>
</body>
</html>
于 2013-10-10T01:02:11.833 回答
0

mobileinit事件没有被触发。您需要在加载 jquery mobile 之前注册事件，以便在加载 JQM 后立即触发事件。在以下脚本之后加载 JQM 脚本。

<script type="text/javascript">
        $(document).one("mobileinit", function () {

            // Setting #container div as a jqm pageContainer
            $.mobile.pageContainer = $('#container');

            // Setting default page transition to slide
            $.mobile.defaultPageTransition = 'slide';

        });
    </script>

<script type="text/javascript" src="css/jquery.mobile-1.3.2.min.js"></script>
于 2013-10-09T12:32:06.123 回答
-1

看起来像

$(document).one("mobileinit", function () {

应该：

$(document).on("mobileinit", function () {
于 2013-10-09T20:06:25.297 回答