jQuery Mobile学习笔记（一）：环境配置与页面结构

其他 2021-03-20 09:51:02 阅读次数: 0

1.环境配置：

jQuery Mobile最新版本为v1.4.5，而jQuery最新版本为v3.5.1，但根据官网资料，jQuery Mobile v1.4.5支持jQuery v1.8〜v1.11与v2.1：
在这里插入图片描述
下载页建议使用jQuery的v1.11.1：

＃ https://jquerymobile.com/download/

解压缩后将jQuery的，jQuery Mobile的JS之程式码与CSS样式档分别复制到专案资料夹的JS与CSS的子目录下：
的jquery-1.11.1.min.js（94KB）
jquery.mobile-1.4.5.min.js（196KB）
jquery.mobile-1.4.5.min.css（203KB）
$（function（）{ }）; </ script> </ body> </ html> 利用CDN供档即无需准备执行环境，CDN的网页模板如下： <！DOCTYPE html>

    <html>
  <head>
    <title> </ title>
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control” content =“ no-cache”>
    <meta name =“ viewport”内容=“ width = device-width，initial-scale = 1”>
    <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>
    <link href =” http://code.jquery.com/mobile/ 1.4.5 / jquery.mobile-1.4.5.min.css“ rel =” stylesheet“>
  </ head>
  <body>
    <script>
      $（function（）{
    
    
        }）; 
    </ script>
  </ body>
</ html>

注意，如果是HTTPS网站，则CDN的URL也要改成https开头。

2.网页架构：

jQuery Mobile的Web应用程序网页以两层div元素搭配data-role属性建立行动网页之页结构，行动网页内容可分散在不同HTML档，也可以整合在一个HTML档案内，透过超几乎不用写一行程式码即可建立漂亮的行动网页使用者介面。

jQuery Mobile依据HTML5制定了data-role属性，其值如下表所示：

数据角色属性 说明页 建立一个浏览页面标头 建立浏览页面的标题列内容 建立浏览页面的内容列页脚 建立浏览页面的注解对话 建立一个导航栏 建立一个导览工具列按钮 建立一个按钮控制组 建立一个控制群组列表显示 建立列表（列表视图）滑杆 建立一个滑杆现场包含 建立一个表单栏位容器可折叠的 建立一个可折叠容器可折叠集 建立一个折叠选单

关于jQueryMobile的数据-XXX属性参考：

＃ https://api.jquerymobile.com/data-attribute/
基本的页面结构分成报头（页首或标题），内容（内容），以及页脚（页尾或注脚）三个部分：

<div data-role =“ page ”>
  <div data-role =“标头”>
    <h1>页首</ h1>
  </ div>
  <div data-role =“ content ”>
    <p>内容</ p>
  </ div>
  <div data-role =“ footer ”>
    <h3>页尾</ h3>
  </ div>
</ div>

目前手机浏览器都已支持HTML5，故可将上面的div改成HTML5如下的语意标签：

<section  data-role =“ page ”>
  <header  data-role =“ header ”>
    <h1>页首</ h1>
  </ header>
  <article  data-role =“ content ”>
    <p>内容</ p>
  </ article>
  <footer  data-role =“ footer ”>
    <h3>页尾</ h3>
  </ footer>
</ section>

其中内容是必要的部分，页眉与页脚则是可有可无。header用作放置页面标题，通常使用h1〜h6元素来替换标题文字，如果文字太长，则后面无法显示的部分会以“ …”缩略。内容已呈现文字，图片，视讯等主体资讯，页脚部分通常放置放置作者，公司，或版权资讯。

多档案架构：

如果网页内容太多，可分割成多个HTML档案页中，以元素的href属性切换：

<a href="page2.htm"  data-ajax="false">第二页< / a>

注意，因为jQuery Mobile是以Ajax方式加载网页，而Ajax不支持加载本地档案，因此这里超连结必须加入data-ajax属性设置为其false（设定为true），否则会出现“错误加载页面”错误消息，超连结a元素在jQuery Mobile中扮演了关键的页面切换角色，jQuery Mobile定义了一些data-开头之属性，如下表所示：
一个的data-xxx属性 说明数据ajax 是否要以Ajax方式加载网页，值=“ true”（预设），“ false”数据相关 超连结的行为，值=“ back”（上一页），“对话”（十年），“ external”（外部）等数据图标 超连结按钮上的小图示，值=“ home”（首页），“ back”（上一页）等数据转换 页面转换特效，值=“ fade”，“ pop”，“ slide”，“ flip”等六种

例如下面的测试1有三个网页档：

测试1： 多档案换页
第一页：jqueryuimobile_test_1_1.htm

<！DOCTYPE html>
<html>
  <head>
    <title> </ title>
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control” content =“ no-cache”>
    <meta名称=“ viewport” content =“ width = device-width，initial-scale = 1”>
    <script src =“ https://code.jquery.com/jquery-1.11.1.min.js”> </ script>
    <script src =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”> </ script>
    <link href =“ https：//code.jquery .com / mobile / 1.4.5 / jquery.mobile-1.4.5.min.css“ rel =” stylesheet“>
  </ head>
  <body>
    <section data-role =” page“>
      <header data-role =“ header”>
        <h1>第一页</ h1>
      </ header>
      <article data-role =“ content”>
        <a href="jqueryuimobile_test_1_2.htm" data-ajax="false">第二页</a> <br>
        <a href="jqueryuimobile_test_1_3.htm" data-ajax="false">第三页</ a >
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <script>
      $（function（）{
    
    
        }）;
    </ script>
  </ body>
</ html>

第二页：jqueryuimobile_test_1_2.htm

<！DOCTYPE html>
<html>
  <head>
    <title> </ title>
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control” content =“ no -cache“>
    <meta name =” viewport“ content =” width = device-width，initial-scale = 1“>
    <script src =” https://code.jquery.com/jquery-1.11.1.min。 js“> </ script>
    <script src =” https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js“> </ script>
    <link href =” https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css“ rel =” stylesheet“>
  </ head>
  <body>
    <section data-role =“ page”>
      <header data-role =“ header”>
        <h1>第二页</ h1>
      </ header>
      <article data-role =“ content”>
        <a href="jqueryuimobile_test_1_1.htm" data-ajax="false">第一页</a>
      </ article>
      <footer data-role =“ footer”>
        <h3 >页尾</ h3>
      </ footer>
    </ section>
    <script>
      $（function（）{
    
    
        }）;
    </ script>
  </ body>
</ html>

第三页：jqueryuimobile_test_1_3.htm

<！DOCTYPE html>
<html>
  <head>
    <title> </ title>
    <meta charset =“ utf-8”>
    <meta http -equiv =“

    <script src =“ https://code.jquery.com/jquery-1.11.1.min.js”> </ script>
    <script src =“ https://code.jquery.com/mobile/1.4.5 /jquery.mobile-1.4.5.min.js“> </ script>
    <link href =” https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css “ rel =” stylesheet“>
  </ head>
  <body>
    <section data-role =” page“>
      <header data-role =” header“>
        <h1>第三页</ h1>
      </ header>
      <文章数据角色= “内容”>
        <a href="jqueryuimobile_test_1_1.htm" data-ajax="false">第一页</A>
      </文章>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <script>
      $（function（）{
    
    
        }）;
    </ script>
  </ body>
</ html>

浏览首页jqueryuimobile_test_1_1.htm按内容区的“第二页”，“第三页”超连结会分别加载jqueryuimobile_test_1_2.htm与jqueryuimobile_test_1_3.htm，结果如下：
在这里插入图片描述
注意，这种多档方式有三个限制：
不可连结至其他网域之档案
连结之档案只能有单一页面
a元素不可以有target属性
也可将多页内容整合到单一档案中方便管理，每一个页面的div都需指定id属性值，jQuery Mobile就是以页面的id属性作为锚点，利用元素的href切换不同之锚点id达到页面切换之效果。

例如在第一页的超连结中设置href指向第二页页面的（id = page2）：

<a href=" #page2 ">第二页</a> <br>

则按此超连结就会切换到第二页：

<section data-role =“ page” id =“ page2” >

例如上面的三档案范例可以整合到以下范例的单一档案中：

测试2： 单档案换页

<！DOCTYPE html>
<html>
  <head>
    <title> </ title>
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control” content =“ no-cache”>
    <元名称=“ viewport” content =“ width = device-width，initial-scale = 1”>
    <script src =“ https://code.jquery.com/jquery-1.11。 1.min.js“> </ script>
    <script src =” https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js“> </ script>
    <链接href =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel =“ stylesheet”>
  </ head>
  <body>
    <！-第一页页面->
    <section data-role =“ page” id =“ page1” >
      <header data-role =“ header”>
        <h1>第一页</ h1>
      </ header>
      <article data-role =“ content”>
        <a href=" #page2 ">第二页</a> <br>
        <a href=" #page3 ">第三页</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <！-第二页页面->
    <section data-role =“ page” id =“ page2” >
      <header data-role =“ header”>
        <h1>第二页</ h1>
      </ header>
      <article data-role =“ content”>
        <a href=" #page1 ">第一页</a>
      </ article>
      $（function（）{
    
             }）;     </ script>   </ body> </ html>

3.回上一页按钮：

在上面的范例中，用超连结来操作回上一页不甚方便，若超连结文字太短可能不好按。其实jQuery Mobile提供了两个data-xxx属性，可用来在标题列左上角添加Back按钮：
data-add-back-btn：设置是否要添加回上一页按钮，值=“ true”，“ false”（预定）
data-back-btn-text：设置返回上一页按钮上的文字，值预设为“后退”
不过要注意的是，在jQuery Mobile 1.4之前，此属性是加在页面div元素中，而在1.4版后则必须要放在header中才会有效，而且放在首页无效，只有在非首页页面才会出现，这样，这两个属性只能放在header标题列，放在footer注脚列无效。

例如：
测试3： 标题列header上的返回按钮

<！DOCTYPE html>
<html>
  <head>
    <title> </ title>
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control” content =“ no-cache”>
    <元名称=“ viewport” content =“ width = device-width，initial-scale = 1”>
    <script src =“ https：//code.jquery。 com / jquery-1.11.1.min.js“> </ script>
    <script src =” https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js“ > </ script>
    <link href =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel =“ stylesheet”>
  </ head>
  <body>
    <！-第一页页面->
    <section data-role =“ page” id =“ page1”>
      <header data-role =“ header”>
        <h1>第一页</ h1>
      </ header>
      <article data-role =“ content”>
        <a href="#page2">第二页</a> <br>
        <a href="#page3">第三页</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <！-第二页页面->
    <section data-role =“ page” id =“ page2”>
      <header data-role =“ header” data-add-back-btn =“ true” >
        <h1>第二页</ h1>
      </ header>
      <article data-role =“ content”>
        <a href="#page1">第一页</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <！-第三页页面->
    <section data-role =“ page” id =“ page3”>
      <header data-role =“标头” data-add-back-btn =“ true” >
        <h1>第三页</ h1>
      </ header>
      <article data-role =“ content”>
        <a href="#page1">第一页</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <script>
      $（function（）{
    
    
        }）;
    </ script>
  </ body>
</ html>

此例中在第二页与第三页的header部分加入data-add-back-btn =“ true”后，结果这两个页面标题列左边就会出现一个“ Back”按钮，结果如下：
在这里插入图片描述
可见标题列的回上一页按钮预设显示“返回”，但可以使用data-back-btn-text属性设置，例如：
测试4： 自订标题列header上的返回按钮文字

< ！DOCTYPE html>
<html>
  <head>
    <title> </ title>
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control” content =“ no-cache”>
    <meta name = “视口” content =“ width = device-width，initial-scale = 1”>
    <script src =“ https://code.jquery.com/jquery-1.11.1.min.js”> </ script>
    <脚本src =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”> </ script>
    <link href =“ https：//code.jquery。 com / mobile / 1。4.5 / jquery.mobile-1.4.5.min.css“ rel =” stylesheet“>
  </ head>
  <body>
    <！-第一页页面->
    <section data-role =“ page” id =“ page1”>
      <header data-role =“ header”>
        <h1>第一页</ h1>
      </ header>
      <article data-role =“ content”>
        < a href =“＃page2”>第二页</a> <br>
        <a href="#page3">第三页</a>
      </ art >>
      <footer data-role =“ footer”>
        <h3 >页尾</ h3>
      </ footer>
    </ section>
    <！-第二页页面->
    <section data-role =“ page” id =“ page2”>
      <header data-role =“ header” data-add-back-btn =“ true”data-back-btn-text =“返回” >
        <h1>第二页</ h1>
      </ header>
      <article data-role =“ content”>
        <a href="#page1">第一页</一个>
    </ section>     <script>       $（function（）{
    
             }）;     </ script>   </ body> </ html>

结果如下：
在这里插入图片描述

4.固定标题列与

注脚列： 由上述范例可知，页尾标题列时间表是紧随在内容区后面，当内容很长必须用卷轴卷动时，标题列与注脚列可能会从页面中消失，如果页首与页尾上有放置导览按钮（例如上面范例中的返回按钮），操作起来就不太方便，这可用data-position =“ fixed”属性设置解决，只要为标题列与注脚列天加此属性，就可以将标题列固定在最上方，注脚列固定在最下方，例如：
测试5： 固定标题列与注脚列

<！DOCTYPE html>
<html>
  <head>
    <title > </ title>
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control” content =“ no-cache”>
    <meta name =“ viewport” content =“ width = device-width， initial-scale = 1“>
    <script src =” https://code.jquery.com/jquery-1.11.1.min.js“> </ script>
    <script src =” https：//code.jquery。
    <link href =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel =“ stylesheet”>
  </ head>
  <body>
    <！-第一页页面->
    <节data-role =“ page” id =“ page1”>
      <header data-role =“ header” data-position =“ fixed” >
        <h1>第一页</ h1>
      < / header>
      <article data-role =“ content”>
        <a href="#page2">第二页</a> <br>
        <a href="#page3">第三页</a>
      </文章>
      <footer data-role =“ footer” data-position =“ fixed” >
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <！-第二页页面->
    <section data-role =“ page” id =“ page2”>
      <header data-role =“ header” data-add-back-btn =“ true” data-back-btn-text =“返回” data-position =“ fixed” >
        <h1>第二页</ h1>
      < / header>
      <article data-role =“ content”>
        <a href="#page1">第一页</a>
      </ article>
      <footer data-role =“ footer” data-position =“ fixed” >
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <！-第三页页面->
    <section data-role =“ page” id =“ page3”>
      <header data-role =“标头” data-add-back-btn =“ true”data-back-btn-text =“返回” data-position =“ fixed” >
        <h1>第三页</ h1>
      </ header>
      <article data-role =“ content”>
        <a href="#page1">第一页</a>
      </ art >>
      <footer data-role =“ footer” data-position =“ fixed” >
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <script>
      $（function（）{
    
    
        }）;
    </ script>
  </ body>
</ html>

此例每个页面的标题列与注脚列都加上data-position =“ fixed”属性，结果如下：

在这里插入图片描述

5.预设Ajax换页：

jQuery Mobile网页在载入时是同时加载全部页面，但仅显示第一页，其他页面是放在页面池中暂存，按超连结按钮进行换页时时序是使用Ajax模式从页面池中取得目标页面，原页面则加入页面池中暂存，几乎作法可增加页面加载速度，这对静态页面没有问题，但对动态须更新数据的页面就会产生数据不即时问题，这时可用数据-ajax =“ false”关闭预设之Ajax功能来解决，例如：

测试6： 消超连结的Ajax加载功能

<！DOCTYPE html>
<html>
  <头>
    <title> </ title>
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control” content =“ no-cache”>
    <meta name =“ viewport” content =“ width = device-width，initial-scale = 1”>
    <script src =“ https://code.jquery.com/jquery-1.11.1.min.js”> </ script>
    <script src =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”> </ script>
    <link href =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel =“ stylesheet”>
  </ head>
  <身体>
    <！-第一页页面->
    <section data-role =“ page” id =“ page1”>
      <header data-role =“ header”>
        <h1>第一页</ h1>
      </ header>
      <article data-role =“ content”>
        <a href="#page2">第二页</a> <br>
        <a href="#page3" data-ajax="false">第三页</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <！-第二页页面->
    <section data-role =“ page” id =“ page2”>
      <header data-role =“ header” data-add-back-btn =“ true” >
        <h1>第二页</ h1>
      </ header>
      <article data-role =“ content”>
        <a href="#page1">第一页</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <！-第三页页面->
    <section data-role =“ page” id =“ page3”>
      <header data-role =“ header” data-add-back-btn =“ true” >
        <h1>第三页</ h1>
      </ header>
      <article data-role =“ content”>
        <a href="#page1">第一页</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <脚本>
      $（function（）{
    
    
        }）;
    </ script>
  </ body>
</ html>

此例在page1页面中有两个超连结按钮，前往page2者使用预设的Ajax模式加载第二页，而前往page3者使用data-ajax =“ false”关闭Ajax功能，结果如下：
在这里插入图片描述
可见因为到page2的按钮维持预设的Ajax模式加载，故在第二页中可看到返回按钮; 而到page3的页面取消了Ajax功能重新加载该页面，导致没有显示返回按钮。

猜你喜欢

转载自blog.csdn.net/wlcs_6305/article/details/114581993
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022