移动应用开发 & jQuery Mobile_jquery mobile新建项目-CSDN博客

本文链接：https://blog.csdn.net/qxf1969851571/article/details/121348809

jQuery Mobile 定义

用于创建移动 Web 应用的前端开发框架
应用于移动设备：手机与平板电脑
使用 HTML5 & CSS3 来布局网页

加入 jQuery Mobile

无论是前端还是后端，用框架第一件事就是把框架的地址引过来，有两种方法：教程

从网络上引用

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

下载下来引用

位置：css 要写在 js 前面

原因和加载的方式有关 ↓

css方面

整个页面展示给用户会经过 html 的解析与渲染过程
而外链css无论放在html的任何位置都不影响html的解析，只是影响html的渲染
如果将css放在尾部，html的内容可以第一时间显示出来，但是会阻塞html行内css的渲染

JS 方面

浏览器一边下载HTML网页，一边开始解析
解析过程中，发现script标签
暂停解析，网页渲染的控制权转交给JavaScript引擎
如果script标签引用了外部脚本，就下载该脚本，否则就直接执行
执行完毕，控制权交还渲染引擎，恢复往下解析HTML网页

插件的位置

jQuery Mobile 插件引用要放到 jQuery Mobile 引用语句的后面

jQuery Mobile 页面

data-role

关键词	效果
page	在浏览器中显示的页面
header	在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
main	定义了页面的内容，比如文本，图片，表单，按钮等
ui-content	类用于在页面添加内边距和外边距
footer	用于创建页面底部工具条

示例

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>欢迎! 点击以下链接跳转到第二个页面。 </p>
    <a href="#pagetwo">跳转到第二个页面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>这是第二个页面。点击以下链接跳转到第一个页面。</p>
    <a href="#pageone">跳转到第一个页面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div>

过渡：data-transition

jQuery Mobile 提供了各种页面切换到下一个页面的效果

关键词	效果
fade	默认。淡入到下一页
flip	从后向前翻转到下一页
flow	抛出当前页，进入下一页
pop	像弹出窗口那样转到下一页。
slide	从右向左滑动到下一页。
slidefade	从右向左滑动并淡入到下一页。
slideup	从下到上滑动到下一页。
slidedown	从上到下滑动到下一页。
turn	转向下一页。
none	无过渡效果。

按钮

按钮样式

关键词	效果
ui-btn-b	修改按钮颜色为黑色，字体为白色(默认为灰色背景，黑色字体)
ui-corner-all	为按钮添加圆角
ui-mini	制作小按钮
ui-shadow	为按钮添加阴影

按钮图标

关键词	效果
ui-icon-arrow-l	左箭头
ui-icon-arrow-r	右箭头
ui-icon-info	信息
ui-icon-delete	删除
ui-icon-back	后退
ui-icon-audio	扬声器
ui-icon-lock	挂锁
ui-icon-search	搜索
ui-icon-alert	警告
ui-icon-grid	网格
ui-icon-home	主页

弹窗 data-position-to

关键词	效果
window	弹窗在窗口居中显示
#myId	弹窗显示在知道的 #id 元素上
origin	默认。弹窗显示在点击的元素上

导航栏：data-iconpos

关键词	效果
top	图标顶部对齐
right	图标右侧对齐
bottom	图标底部对齐
left	图标左侧对齐

画板

面板展示：data-display

关键词	效果
overlay	在内容上显示面板
push	是同时"推动"面板和页面
reveal	默认值，将页面像幻灯片一样从屏幕划出，将面板显示出来

关闭面板

关键词	效果
data-dismissible true 或 false	指定面板是否可以通过点击面板外部区域来关闭
data-swipe-close true 或 false	指定是否可以通过滑动来关闭

jQuery Mobile 列表

列表视图

  jQuery Mobile 中的列表视图是标准的HTML 列表; 有序(<ol>) 和 无序(<ul>).
  列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role="listview"属性。在每个项目(<li>)中添加链接，用户可以点击它

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>有序列表：</h2>
    <ol data-role="listview">
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
    </ol>
    <h2>无序列表：</h2>
    <ul data-role="listview">
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
      <li><a href="#">列表项</a></li>
    </ul>
  </div>
</div>

列表内容

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>列表图标:</h2>
    <ul data-role="listview" data-inset="true">    
      <li><a href="#">默认是右箭头</a></li>
      <li data-icon="plus"><a href="#">data-icon="plus"</a></li>
      <li data-icon="minus"><a href="#">data-icon="minus"</a></li>
      <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
      <li data-icon="location"><a href="#">data-icon="location"</a></li>   
      <li data-icon="false"><a href="#">data-icon="false"</a></li>
    </ul>
  </div>
</div>

过滤

如何创建搜索字段:

想过滤的元素必须使用 data-filter=“true” 属性。
创建元素并指定 id，元素上加上 data-type=“search” 属性。这样就能创建基本的搜索字段。将元素放置于一个表单中，表单元素使用 “ui-filterable” 类 - 该类会调整搜索字段与过滤元素的外边距。
接着为过滤的元素添加 data-input 属性。该值需要是元素的 id

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>我的通讯录</h2>
    <form class="ui-filterable">
      <input id="myFilter" data-type="search">
    </form>
    <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">
      <li><a href="#">Cameron</a></li>
      <li><a href="#">Christina</a></li>
      <li><a href="#">Diana</a></li>
      <li><a href="#">Gabriel</a></li>
      <li><a href="#">Glen</a></li>
      <li><a href="#">Ralph</a></li>
      <li><a href="#">Valarie</a></li>
    </ul>
  </div>
</div>

jQuery Mobile 表单

表单样式

关键词	效果
data-corners	指定按钮是否有圆角
data-icon	指定按钮图标
data-iconpos	指定图标位置
data-inline	指定是否内联按钮
data-mini	指定是否为迷你按钮
data-shadow	指定按钮是否添加阴影效果

表单选择

<div data-role="page">
  <div data-role="header">
  <h1>选择菜单</h1>
  </div>

  <div data-role="main" class="ui-content">
    <form method="post" action="demoform.asp">
      <fieldset data-role="fieldcontain">
        <label for="day">选择天</label>
        <select name="day" id="day">
         <option value="mon">星期一</option>
         <option value="tue">星期二</option>
         <option value="wed">星期三</option>
         <option value="thu">星期四</option>
         <option value="fri">星期五</option>
         <option value="sat">星期六</option>
         <option value="sun">星期日</option>
        </select>
      </fieldset>
      <input type="submit" data-inline="true" value="提交">
    </form>
  </div>
</div>

jQuery Mobile 事件

初始化 jQuery Mobile 事件

触摸事件 - 当用户触摸屏幕时触发
滑动事件 - 当用户上下滑动时触发
定位事件 - 当设备水平或垂直翻转时触发
页面事件 - 当页面显示，隐藏，创建，加载或未加载时触发

用 $(document).ready() 来使jQuery代码脚本在DOM元素加载完成后才开始执行
在 jQuery Mobile 中, 使用pageinit 事件来设置代码脚本在DOM元素加载完成后开始执行，所以要在任何新页面加载并创建是执行脚本，就需要绑定pageinit事件

触摸事件

<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").on("click",function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>点击我，我也会消失。</p>

滚屏事件

<script>
$(document).on("pagecreate","#pageone",function(){
  $(document).on("scrollstart",function(){
    alert("开始滚动!");
  });                       
});
</script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>scrollstart 事件</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p><b>提示：</b>如果未出现滚动条，请尝试调整窗口尺寸。</p>
  
    <p>可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。</p>
  </div>
  <div data-role="footer">
    <h1>页脚文本</h1>
  </div>
</div>

jQuery Mobile Data 属性

jQuery Mobile 使用 HTML5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观

关键词	效果
data-corners	规定按钮是否圆角
data-icon	规定按钮的图标。默认没有图标。
data-iconpos	规定图标的位置
data-iconshadow	规定按钮图标是否有阴影
data-inline	规定按钮是否内联
data-mini	规定按钮是小尺寸还是常规尺寸
data-shadow	规定按钮是否有阴影
data-theme	规定按钮的主题颜色

jQuery Mobile Initialization 事件

当 jQuery Mobile 中的一张典型页面进行初始化时，它会经历三个阶段：

在页面创建前
页面创建
页面初始化
每个阶段触发的事件都可用于插入或操作代码

关键词	效果
pagebeforecreate	当页面即将初始化，并且在 jQuery Mobile 已开始增强页面之前，触发该事件
pagecreate	当页面已创建，但增强完成之前，触发该事件
pageinit	当页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事件

案例

<script>
$(document).on("pagebeforecreate",function(){
  alert("pagebeforecreate 事件触发 - 页面即将初始化。jQuery Mobile 还未增强页面");
});                     
$(document).on("pagecreate",function(){
  alert("pagecreate 事件触发 - 页面已经创建，但还未增强完成");
});
</script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>头部文本</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>页面已创建，并增强完成。</p>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div>