Cordova JqueryMoible 开发

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

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

安装

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

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

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

Image

Cordova JqueryMoible 开发_第1张图片
Cordova JqueryMoible 开发_第2张图片

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>

你可能感兴趣的:(Cordova,jquerymobi)