phonegap+jqm的示例

最新推荐文章于 2015-10-27 09:42:00 发布

海贼王

最新推荐文章于 2015-10-27 09:42:00 发布

阅读量2.2k

点赞数

分类专栏： ios

本文链接：https://blog.youkuaiyun.com/w122079514/article/details/12619071

版权

ios 专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了在使用PhoneGap创建iOS项目时，将jQueryMobile CSS效果整合到应用中所遇到的问题及成功解决的步骤。包括如何正确导入jQueryMobile资源、配置项目以允许外部资源引用、解决白名单问题，并通过实例展示了最终实现的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装phonegap，根据文档资料，生成phonegap的Helloworld的ios的项目代码，具体步骤可以参看phonegap网站的指南，然后想把jquerymobile的效果加进去，但是试验过几次，开始下载zip，将jquery.mobile-1.3.2.min.css等文件放在本地，拷贝的

<body>
        <div data-role="page">
            <div data-role="header">
                <h1>My Title</h1>
            </div><!-- /header -->
            
            <div data-role="content">
                <ul data-role="listview" data-inset="true" data-filter="true">
                    <li><a href="#">Acura</a></li>
                    <li><a href="#">Audi</a></li>
                    <li><a href="#">BMW</a></li>
                    <li><a href="#">Cadillac</a></li>
                    <li><a href="#">Ferrari</a></li>
                </ul>
            </div><!-- /content -->
            
        </div>

网站示例代码，但是没有任何效果，css定义的效果都没有显示出来，就是简单普通的效果的，尝试过多次，都没有效果。经过搜索发现，需要将下载的zip下的image拷贝到项目工程下，需要勾选 copy items into destination group's folder，添加后效果也没有出来，看着控制台输出错误提示phonegap 白名单问题，因为用到的是网上下载的js/css.在项目config.xml添加白名单。

添加完成后，效果就全部出来了

效果图如下：

示例代码如下：

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, width=device-width, height=device-height" />
        
        <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>
        <title>My Page</title>
    </head>
    
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>My Title</h1>
            </div><!-- /header -->
            
            <div data-role="content">
                <ul data-role="listview" data-inset="true" data-filter="true">
                    <li><a href="#">Acura</a></li>
                    <li><a href="#">Audi</a></li>
                    <li><a href="#">BMW</a></li>
                    <li><a href="#">Cadillac</a></li>
                    <li><a href="#">Ferrari</a></li>
                </ul>
            </div><!-- /content -->
            
        </div>
        
    </body>
</html>

每解决一个问题，都是对自己的鼓励阿