在 Tizen webapp 上使用 Jquery mobile答案

【问题标题】：Using Jquery mobile on Tizen webapp在 Tizen webapp 上使用 Jquery mobile
【发布时间】：2014-04-07 10:17:12
【问题描述】：

我正在制作一个 Tizen 网络应用程序，并想使用 jQuery mobile 的“taphold”侦听器。

我从 jQuery 移动网站下载了最新的 .js，但是当我尝试包含它时，它不起作用。

我是打算将它与 jQuery 一起使用还是单独使用它？两个产品错误。

不包括 jQuery 我得到错误：

js/jquery.mobile-1.4.2.min.js (26) :TypeError: 'undefined' is not an object (evalating '$.mobile = {}')"

但是如果我在访问该页面时确实包含了 jQuery，那么屏幕会完全变黑，我什么也做不了。

【问题讨论】：

标签： javascript jquery jquery-mobile mobile tizen

【解决方案1】：

您应该发布您的代码。 JQuery Mobile 与 Tizen 配合使用，您甚至可以从 IDE 将其添加到项目中。

下面是index.html 的 TizenWeb 版本的关于点击事件的 JQuery 教程。一切正常。您可以将其用作解决方案的模板。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="A single-page template generated by Tizen Web IDE"/>

    <title>Tizen Web IDE - Tizen - jQuery Mobile - tapHold listener</title>

    <link rel="stylesheet" href="./css/jquery.mobile-1.2.0.css"/>
    <script type="text/javascript" src="./js/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="./js/jquery.mobile-1.2.0.js"></script>
    <script type="text/javascript" src="./js/main.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
    <style>
    <!--
    based on http://api.jquerymobile.com/taphold/
    -->
        html, body { padding: 0; margin: 0; }
        html, .ui-mobile, .ui-mobile body {
           height: 85px;
        }
        .ui-mobile, .ui-mobile .ui-page {
            min-height: 85px;
        }
        #nav {
            font-size: 200%;
            width:17.1875em;
            margin:17px auto 0 auto;
            }
        #nav a {
            color: #777;
            border: 2px solid #777;
            background-color: #ccc;
            padding: 0.2em 0.6em;
            text-decoration: none;
            float: left;
            margin-right: 0.3em;
        }
        #nav a:hover {
            color: #999;
            border-color: #999;
            background: #eee;
        }
        #nav a.selected,
        #nav a.selected:hover {
            color: #0a0;
            border-color: #0a0;
            background: #afa;
        }
        div.box {
            width: 3em;
            height: 3em;
            background-color: #108040;
        }
        div.box.taphold {
            background-color: #7ACEF4;
        }
    </style>
</head>

<body>
    <!--
    based on http://api.jquerymobile.com/taphold/
    -->
    <div data-role="page" >
        <div data-role="header" data-position="fixed" >
            <h1>Single-Page Application </h1>
        </div><!-- /header -->

        <div data-role="content" >
            <p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page.</p>
            <h3>Long press the square for 750 milliseconds to see the above code applied:</h3>
        <div class="box"></div>
        <script>
            $(function(){
                $( "div.box" ).bind( "taphold", tapholdHandler );
                function tapholdHandler( event ) {
                    $( event.target ).addClass( "taphold" );
                }
            });
        </script>
    </div><!-- /page -->
</body>
</html>

【讨论】：