Cordova JqueryMoible 开发

最新推荐文章于 2024-03-18 23:36:24 发布

yaoyuan-yy

最新推荐文章于 2024-03-18 23:36:24 发布

阅读量773

点赞数

CC 4.0 BY-SA版权

文章标签： cordova jquerymobi

本文链接：https://blog.youkuaiyun.com/YYecust/article/details/51378105

这篇博客介绍了如何结合Cordova和jQueryMobile进行移动应用开发。通过在Cordova项目中引入jQueryMobile的资源文件，开发者可以获得一套完整的手机Web UI控件。文中详细说明了安装步骤，并展示了模仿QQ界面的实践示例。

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

JqueryMobile是一个非常流行的用于手机的Web框架

Cordova有了它，就可以有了一整套完整的UI控件了

安装

JQM官网
下载最新版
然后在将
Jquery.mobile.min.js
jquey.mobile.min.css
demos\js\jquery.min.js
iimages文件夹放到
assers\www目录里面

然后就和写HTML一样导入就好了

附上我随便模仿了QQ界面的实验品

Image

这里写图片描述

Code

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>Hello cordova</title>
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
    <script src="jquery.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
</head>
<body onload="onLoadded()">
    <script>
        function onLoadded() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
    </script>
    <div data-role="panel" id="myPanel">
        <h1>不想做了。。。</h1>
    </div>
    <div data-role="header">
        <a href="#myPanel" class="ui-btn ui-icon-user ui-btn-icon-left"></a>
        <h1>QQQ</h1>
        <a href="" class="ui-btn ui-icon-plus ui-btn-icon-right"></a>
    </div>
    <div data-role="main" class="ui-content">
        <form class="ui-filterable">
            <input id="myFilter" data-type="search">
        </form>

        <ul data-role="listview" data-filter="true" data-input="#myFilter">
            <li><a href="#" data-icon="power">我的电脑</a></li>
            <li><a href="#" data-icon="user">甲</a></li>
            <li><a href="#" data-icon="user">乙</a></li>
            <li><a href="#" data-icon="user">丙</a></li>
            <li><a href="#" data-icon="user">丁</a></li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="" data-icon="comment" data-iconpos="bottom">消息</a></li>
                <li><a href="" data-icon="user" data-iconpos="bottom">联系人</a></li>
                <li><a href="" data-icon="star" data-iconpos="bottom">动态</a></li>
            </ul>
        </div>
    </div>
</body>
</html>