Web前端开发学习之路——jQuery Mobile 网页导航与布景主题

最新推荐文章于 2022-11-03 20:08:37 发布

宇直豪

最新推荐文章于 2022-11-03 20:08:37 发布

阅读量573

点赞数

分类专栏：前端开发文章标签：前端开发 UI JQUERY

本文链接：https://blog.csdn.net/CSDN_XUWENHAO/article/details/88692543

版权

前端开发专栏收录该内容

15 篇文章 1 订阅

订阅专栏

网页导航与布景主题

学会基本的jQuery Mobile网页之后，接下来学习网页导航与网页美化的好工具——ThemeRoller布景主题。

jQuery Mobile网页一开始会将初始页通过http加载，显示该页面的第一个page组件之后，为了增加网页转场效果(page transitions)，之后的页面回通过Ajax来载入并加到DOM中，网页内的元素也会默认加载到浏览器，所以页面之间的切换回比较流畅；当Ajax加载失败时，就会显示如下图所示的错误窗口：

如果链接的页面是单一网页多个页面或者不是同一域的网页，就会发生错误，这时可以停用Ajax而改用传统的http来加载网页，在链接元素中加入下面任意一个属性，都可以停用Ajax：

rel = "external"

//或者如下

data-ajax = "false"


//例如
<a href ="page2.html" data-icon="gear" rel ="external">

下面就来看一些常用的链接：

回上页

jQuery Mobile提供了data-rel="back"属性，只要直接应用就可以达到回上页的效果，代码如下：

<a data-rel="back">回上页</a>

下面看一个范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style type="text/css">
        #content{text-align: center;}
    </style>
    <meta name="viewport" content="width-device-width,initial-scale=2">
</head>
<body>
    <!--第一页-->
<div data-role="page" data-title="第一页" id="first">
    <div data-role="header">
        <h1>第一页</h1>
    </div>
    <div data-role="content" id="content">
        <a href="#second">按我到第二页</a>
    </div>
    <div data-role="footer">
        <h4>页脚</h4>
    </div>
</div>
<!---第二页--->
<div data-role="page" data-title="第二页" id="second">
    <div data-role="header">
        <a data-rel="back">回上页</a>
        <h1>第二页</h1>
    </div>
    <div data-role="content" id="content">
        <a href="#first">回到第一页</a>
    </div>
    <div data-role="footer">
        <h4>页脚</h4>
    </div>
</div>
</body>
</html>

执行结果如下：

以弹出新窗口链接网页

通过data-rel="dialog"属性可以让链接页面显示在弹出的新窗口中，虽然从移动设备上看起来跟普通链接方式差不多，两者的区别在于弹出窗口的左上角有一个关闭按钮，而且使用弹出窗口的链接不会记录在浏览器的历史纪录中。因此，当我们按“上一页”或“下一页”时不会切换到这个页面。语法如下：

<a href="#second" data-rel="dialog">第二页</a>

范例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ch11_04</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style type="text/css">
        #content{text-align: center;}
    </style>
    <meta name="viewport" content="width-device-width,initial-scale=2">
</head>
<body>
<!--第一页-->
<div data-role="page" data-title="第一页" id="first">
    <div data-role="header">
        <h1>第一页</h1>
    </div>
    <div data-role="content" id="content">
        <a href="#second" data-rel="dialog">按我到第二页</a>
    </div>
    <div data-role="footer">
        <h4>页脚</h4>
    </div>
</div>
<!--第二页-->
<div data-role="page" data-title="第二页" id="second">
    <div data-role="header">
        <h1>第二页</h1>
    </div>
    <div data-role="content" id="content">
        这是弹出的窗口
    </div>
</div>
</body>
</html>

执行结果如图：

ThemeRoller快速应用布景主题

相信许多人在制作网站时都会遇到配色的问题，既要选择背景颜色，又要搭配按钮颜色，对于没有美术功底的人来说，制作网页的大部分时间都浪费在配色上，实在是很累人的事情，幸好jQuery Mobile提供了一款非常好用的网页工具——ThemeRoller，可以下载使用，下面就来介绍ThemeRoller。ThemeRoller网站网址为http://jquerymobile.com/themeroller/

进入网页就可以看到ThemeRoller编辑器，默认有3个空白的主题面板（swatch），分别为A，B，C而左侧功能区的标签也有对应的A、B、C标签，标签中有相关的选项可以设置：

如果不知道标签的选项对应的是说明组件，可以使用Inspector工具来查看，单击后off会变成on，再点击相应组件

也可以直接将主题面板上方的颜色块直接拖曳到组件上，设置好后，只要单击左上方的Download按钮，就会出现如图的下载界面

下载的文件为zip压缩文件，解压缩文件后，会有一个Index.html文件和一个themes文件夹。index.html文件中写着如何引用这个CSS文件，打开Index.html文件之后，会告诉用户如何引用文件，只要用这几行代码取代网页中原来的引用代码即可，如图所示

记住要将themes文件夹复制到网页(HTML文件)所在的文件夹

themes文件夹中包含要引用的mytheme.min.css文件，以及未压缩的mytheme.css文件，当以后想要再次修改这个CSS样式时，只要回到ThemeRoller网站，单击Import按钮，粘贴mythem.css文件的内容就可以了

做好的样式只要使用data-theme属性就可以指定想应用的主题样式，例如，如果想应用主题a，那么程序代码中只要再元素内加上data-theme="a"即可。喜爱按通过范例来联系如何应用做好的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Mobile创建的第一个网页</title>
    <link rel="stylesheet" href="themes/mytheme.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <meta name="viewport" content="width-device-width,initial-scale=1">
    <style type="text/css">
        #content{text-align: center;}
    </style>
</head>
<body>
<div data-role="page" data-title="课程" id="first" data-theme="a">
    <div data-role="header">
        <h1>课程</h1>
    </div>
    <div data-role="content" id="content">
        <ul data-role="listview" data-inset="true">
            <li>
                <a href="chinese.html">
                    <img src="images/chinese.jpg"/>
                    <h3>语文</h3>
                    <p>时间：星期一 人数：15人</p>
                    <span class="ui-li-count">12</span>
                </a>
                <a href="#taking" data-icon="gear"></a>
            </li>
            <li>
                <a href="math.html">
                    <img src="images/math.jpg"/>
                    <h3>数学</h3>
                    <p>时间：星期三 人数：20人</p>
                    <span class="ui-li-count">11</span>
                </a>
                <a href="#taking" data-icon="gear"></a>
            </li>
            <li>
                <a href="english.html">
                    <img src="images/eng.jpg">
                    <h3>英语</h3>
                    <p>时间：星期五 人数：30人</p>
                    <span class="ui-li-count">20</span>
                </a>
                <a href="#taking" data-icon="gear"></a>
            </li>
        </ul>
    </div>
    <div data-role="footer">
        <h4>页脚</h4>
    </div>
</div>
</body>
</html>

执行结果如下：

只要再data-role="page"后添加data-theme="a"，页面上的元素就会应用我们设置好的主题样式。此范例中进设置了一个主题a，当然还可以多做几个主题，如b与c，再让各个组件引用不同的主题，例如想让标题栏使用主题b,可以如下表示：

<div data-role="header" data-theme="b">

jQuery Mobile的默认值布景主题有5种，swatch分别时a、b、c、d、e，不一定要到ThemeRoller制作主题样式，也可以直接应用默认的布景主题。

宇直豪

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发学习之路——jQuery Mobile 网页导航与布景主题

网页导航与布景主题学会基本的jQuery Mobile网页之后，接下来学习网页导航与网页美化的好工具——ThemeRoller布景主题。jQuery Mobile网页一开始会将初始页通过http加载，显示该页面的第一个page组件之后，为了增加网页转场效果(page transitions)，之后的页面回通过Ajax来载入并加到DOM中，网页内的元素也会默认加载到浏览器，所以页面之间的切换...
复制链接

扫一扫