JQuery Mobile

Posted 2020-07-28 薄冰

按钮可通过三种方法创建：

• 使用 <button> 元素
• 使用 <input> 元素
• 使用 data-role="button" 的 <a> 元素
•  data-role="button" 的 <a> 元素来创建页面之间的链接，而 <input> 或 <button> 元素用于表单提交。

• 行内按钮

  默认情况下，按钮会占据屏幕的全部宽度。如果需要两个或多个按钮并排显示，请添加 data-inline="true"

• 组合按钮

  请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合按钮

• 后退按钮

  使用 data-rel="back" 属性:<a href="#" data-role="button" data-rel="back">返回</a>

• 定位图标

  规定图标被放置的位置：上、右、下或左。使用 data-iconpos 属性:left,top,right,bottom

     如果只需显示图标，请将 data-iconpos 设置为 "notext"

  单独向页眉标题的某一侧添加一个按钮：class="ui-btn-right">

页脚栏

与页眉相比，页脚更具伸缩性。页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。如果要修正该问题，请在页脚设置类名 "ui-btn"

定位页眉和页脚

使用 data-position 属性：

• Inline - 默认。页眉和页脚与页面内容位于行内。
• Fixed - 页面和页脚会留在页面顶部和底部。
• Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部

导航栏

使用 data-role="navbar" 属性。活动按钮：使用 class="ui-btn-active"

为每个按钮设置“被选”外观，以表示用户正在浏览该页面。<li><a href="#anylink" class="ui-btn-active ui-state-persist">首页</a></li>

可折叠的内容块

创建可折叠的内容块，向某个容器分配 data-role="collapsible" 属性。在容器（div）中，添加一个标题元素（h1-h6）。如需在页面加载时扩展内容，请使用 data-collapsed="false"

可折叠集合

可折叠集合（Collapsible sets）指的是被组合在一起的可折叠块（常被称为手风琴）。

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>点击我 - 我可以折叠！</h1>
    <p>我是被展开的内容。</p>
  </div>
  <div data-role="collapsible">
    <h1>点击我 - 我可以折叠！</h1>
    <p>我是被展开的内容。</p>
  </div>
</div>

布局网格

一般不推荐在移动设备上使用列布局，这是由于移动设备的屏幕宽度所限。但当需要定位更小的元素，比如按钮或导航栏时，列布局就恰如其分。

网格中的列是等宽的（总宽是 100%），无边框、背景、外边距或内边距。

eg：对于 ui-grid-b 类（三列布局），请添加三个子元素 ui-block-a、ui-block-b 和 ui-block-c。

 列表视图

创建列表，向 <ol> 或 <ul> 元素添加 data-role="listview"。为列表添加圆角和外边距，使用 data-inset="true" 属性

列表分隔符：向 <li> 元素添加 data-role="list-divider" 属性

列表是字母顺序的（比如通讯录），自动添加恰当的分隔符：在 <ol> 或 <ul> 元素上设置 data-autodividers="true" 属性

搜索过滤器

在列表中添加搜索框，请使用 data-filter="true" 属性，修改默认文本，请使用 data-filter-placeholder 属性

 列表缩略图

对于大于 16x16px 的图像，请在链接中添加 <img> 元素。

列表图标

向 <img> 元素添加 class="ui-li-icon" 属性

计数泡沫

计数泡沫用于显示与列表项相关的数目，例如邮箱中的消息：使用行内元素，比如 <span>，设置 class "ui-li-count" 属性并添加数字

表单结构

• <form> 元素必须设置 method 和 action 属性
• 每个表单元素必须设置唯一的 "id" 属性。该 id 在站点的页面中必须是唯一的。
• 每个表单元素必须有一个标记（label）。请设置 label 的 for 属性来匹配元素的 id。
• 隐藏 label，请使用类 ui-hidden-accessible
• 如需 label 和表单元素在宽屏幕上显示正常，用 data-role="fieldcontain" 属性的 <div> 或 <fieldset> 元素来包装 label 或表单元素
• 如需避免 jQuery Mobile 自动为可点击元素设置样式，请使用 data-role="none" 属性

 文本输入

使用 placeholder 来规定简短的提示，以描述输入字段的预期值：<input placeholder="sometext">

用 data-role="controlgroup" 属性来组合按钮；对单选框或复选框进行水平分组，用 data-type="horizontal" 属性

 选择菜单

 如果列表中包含了一长列相关的选项，请在 <select> 中使用 <optgroup> 元素

自定义选择菜单

在所有移动设备上显示一致外观的选择菜单，使用 自定义选择菜单，data-native-menu="false" 属性

 滑块控件　　　

<input type="range" name="points" id="points" value="50" min="0" max="100">，突出显示截止滑块值的这段轨道，添加 data-highlight="true"

创建切换开关，使用 data-role="slider" 的 <select> 元素，并添加两个 <option selected> /*设置为预选（突出显示）*/ 元素  （on,off）

jQuery Mobile 事件

• 触摸事件 - 当用户触摸屏幕时触发（敲击和滑动）
• 滚动事件 - 当上下滚动时触发
• 方向事件 - 当设备垂直或水平旋转时触发
• 页面事件 - 当页面被显示、隐藏、创建、加载以及/或卸载时触发
• jQuery on() 方法用于添加事件处理程序
• Touch 事件同样适用于桌面电脑：点击鼠标！
• tap 事件在用户敲击某个元素时触发
• taphold 事件在用户敲击某个元素并保持一秒时被触发
• swipe 事件在用户在某个元素上水平滑动超过 30px 时被触
• swipeleft 事件在用户在某个元素上从左滑动超过 30px 时被触发
• swiperight 事件在用户在某个元素上从右滑动超过 30px 时被触发
• scrollstart 事件在用户开始滚动页面时被触发
• scrollstop 事件在用户停止滚动页面时被触
• orientationchange 事件在用户垂直或水平旋转移动设备时被触发,使用 orientationchange 事件，把它添加到 window 对象;callback 函数可以设置一个参数，即 event 对象，它会返回移动设备的方向："portrait" （设备被握持的方向是垂直的）或 "landscape" （设备被握持的方向是水平的）：