`

关于在phonegap中使用jquery mobile的一个小问题。

 
阅读更多

其实这个事情本身和phonegap没有什么关系，不过是我在使用phonegap的过程中碰到的而已。er问题是这样的，我在本地(assets/www目录）定义了一个htm，其中代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=10, minimum-scale=1, width=device-width, height=device-height" />
    
        <link rel="stylesheet" href="jquery.mobile-1.3.0.css" />
        <link rel="stylesheet" href="jquery.mobile.structure-1.3.0.css" />
        <link rel="stylesheet" href="jquery.mobile.theme-1.3.0.css" />
            
        <script src="jquery.mobile-1.3.0.js"></script>
        <script type="text/javascript" src="cordova-2.4.0.js"></script>
    </head>
    <body>        
        <!-- Start of first page: #one -->
        <div data-role="page" id="one">
        
            <div data-role="header">
                <h1>Multi-page</h1>
            </div><!-- /header -->
        
            <div data-role="content" >  
                <h2>One</h2>
                
                <p>I have an <code>id</code> of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p> 
                
                <p>This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a <a href="page-template.html"> single page template</a> that has just one page within it.</p>  
                <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
                <p>You link to internal pages by referring to the <code>id</code> of the page you want to show. For example, to <a href="#two" >link</a> to the page with an <code>id</code> of "two", my link would have a <code>href="#two"</code> in the code.</p>   
        
                <h3>Show internal pages:</h3>
                <p><a href="#two" data-role="button">Show page "two"</a></p>    
                <p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
            </div><!-- /content -->
            
            <div data-role="footer" data-theme="d">
                <h4>Page Footer</h4>
            </div><!-- /footer -->
        </div><!-- /page one -->
        
        
        <!-- Start of second page: #two -->
        <div data-role="page" id="two" data-theme="a">
        
            <div data-role="header">
                <h1>Two</h1>
            </div><!-- /header -->
        
            <div data-role="content" data-theme="a">    
                <h2>Two</h2>
                <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>   
                <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>  
                <p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p> 
                
            </div><!-- /content -->
            
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div><!-- /footer -->
        </div><!-- /page two -->
        
        
        <!-- Start of third page: #popup -->
        <div data-role="page" id="popup">
        
            <div data-role="header" data-theme="e">
                <h1>Dialog</h1>
            </div><!-- /header -->
        
            <div data-role="content" data-theme="d">    
                <h2>Popup</h2>
                <p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p>      
                <p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p> 
            </div><!-- /content -->
            
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div><!-- /footer -->
        </div><!-- /page popup -->

    </body>
</html>

 熟悉jquery mobile的同学很容易看出来就是一个demo例子，其中包含了三个"page"。

 

理论上讲，当我用phonegap把这个程序部署到手机上的时候，应该会默认显示第一个page，但是诡异的是我碰到两个错误：

  1. 从android logcat中看到一个error，提示jquery中抛出了一个typeerror，提示无法初始化$.mobile
  2. 莫名其妙的三个“page”都显示出来了

这个问题我纠结了好久，因为我在网上找到的绝大部分jquery的demo都是这么写的。后来终于发现了问题，在引用js的时候，不能仅仅引用jquery.mobile-1.3.0.js（所以尼嘛这个名字起的太有歧义了），而且必须引用jquery下载包中的jquery.js （尼嘛在demo目录下）。

 

因为在看jquery mobile，不能不吐槽一下，对于我这样的纯新手（javascript生手+jquery新手），想要快速的开发一个基于jquery mobile的应用，有点儿老虎吃乌龟-无从下口的感觉， 文档还是硬伤啊。

分享到：
| 两个个关于javascript的scope的有趣的例子
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics