在Tizen webapp上使用Jquery mobile

时间:2014-04-07 10:17:13

标签: javascript jquery jquery-mobile mobile tizen

我正在制作一个Tizen网络应用程序,并希望使用jQuery mobile的“taphold”监听器。

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

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

不包含jQuery我得到错误:

  

js / jquery.mobile-1.4.2.min.js(26):TypeError:'undefined'不是对象(评估'$ .mobile = {}')“

但如果我在去那个页面的时候包含了jQuery,那么屏幕就完全是黑色的,我什么也做不了。

1 个答案:

答案 0 :(得分:3)

您应该发布您的代码。 JQuery Mobile与Tizen一起使用,您甚至可以将它从IDE添加到项目中。

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

<!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>