jQuery Mobile笔记

最新推荐文章于 2017-11-29 15:21:03 发布

孤雪飘寒

最新推荐文章于 2017-11-29 15:21:03 发布

阅读量525

点赞数

分类专栏：全栈

本文链接：https://blog.csdn.net/msmile_my/article/details/52226557

版权

全栈专栏收录该内容

21 篇文章 0 订阅

订阅专栏

环境搭建

要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容

CSS文件：jquery.mobile-1.4.5.min.css
jQuery ：jquery-3.1.0.min.js
jQuery Mobile library： jquery.mobile-1.4.5.min.js

如有有使用jm自带的图标的话，那么还需要把images这个文件夹放入你项目中去
我是这么用的

js(文件夹)
|- jquery.mobile-1.4.5.min.css
|- jquery-3.1.0.min.js
|- jquery.mobile-1.4.5.min.js
|- images

简单的单页面和单页面多应用构建

单页面：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.5.css"/>
    <script type="text/javascript" src="js/jquery-3.1.0.min.js" ></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.js" ></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header">
                <h1>Header</h1>
            </div>
            <div data-role="content">
                <p>Content</p>
            </div>
            <div data-role="footer">
                <h4>Footer</h4>
            </div>
        </div>
    </body>
</html>

单页面多应用

3.0JQuery测试无效，所以换成了2.2.4版本

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.5.min.css" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>-->
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
    </head>

    <body>
        <div data-role="page" id="home">
            <div data-role="header">
                <h1>Home</h1></div>
            <div role="main" class="ui-content">
                <p>
                    <a href="#about">About this app</a>
                </p>

            </div>
            <div data-role="footer">
                dibu
            </div>
        </div>

        <div data-role="page" id="about">
            <div data-role="header">
                <h1>About</h1></div>
            <div role="main" class="ui-content">
                <p>This app rocks!
                    <a href="#home">Go home</a>
                </p>
            </div>
            <div data-role="footer">
                dibu
            </div>
        </div>
    </body>

</html>