jQuery Mobile 表单选择菜单
jQuery Mobile 选择菜单
Iphone 上的选择菜单：
Android/SGS4 设备上的选择菜单：
<select> 元素创建带有若干选项的下拉列表。
<select> 元素内的 <option> 元素定义了列表中的可用选项：
实例
<form method=”post” action=……继续阅读 »
2年前 (2022-07-21) 228浏览
0个赞
jQuery Mobile 安装
在你的网页中添加 jQuery Mobile
你可以通过以下几种方式将jQuery Mobile添加到你的网页中：
从 CDN 中加载 jQuery Mobile (推荐)
从jQuerymobile.com 下载 jQuery Mobile库
从 CDN 中加载 jQuery Mobile
CDN的全称是Content Delivery Network，即内容……继续阅读 »
2年前 (2022-07-20) 77浏览 0评论
0个赞
jQuery Mobile 按钮图标
jQuery Mobile 提供了一套让按钮看起来更称心如意的图标。
添加图标到 jQuery Mobile 按钮
我们可以使用 ui-icon 类将图标添加到按钮上，并可以使用指定类来设置按钮位置。
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a……继续阅读 »
2年前 (2022-07-16) 66浏览 0评论
0个赞
jQuery Mobile 教程
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。
jQuery Mobile 可以应用于智能手机与平板电脑。
jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
在线实例
通过我们的在线编辑器，你可以编辑代码，并查看运行结果。
实例
<div data-role="page" id=&qu……继续阅读 »
2年前 (2022-07-16) 180浏览 0评论
0个赞
jQuery Mobile 实例
jQuery Mobile 页面
一个基本的移动网页
多个页面
对话框
实例解释
jQuery Mobile 页面切换
淡入效果
从后向前翻转效果
流动效果
弹出效果
滑动效果
从右到左滑动并淡入效果
从下到上滑动效果
从上到下滑动效果
翻页效果
没有切换效果
颠倒效果
实例解释
jQuery Mobile 按钮
创建按钮
内联按钮
组合按钮
后退按钮
带有圆角或不……继续阅读 »
2年前 (2022-06-29) 91浏览 0评论
0个赞
jQuery Mobile 事件
jQuery Mobile 事件参考手册
以下列表为所有的 jQuery Mobile 事件。
注意：请使用 on() 方法绑定事件。
事件
描述
hashchange
启用可标记 #hash 历史，哈希值会在一次独立的点击时发生时变化，比如一个用户点击后退按钮，会通过 hashchange事件进行处理。
navigate
包裹了 hashchange 和……继续阅读 »
2年前 (2022-06-29) 201浏览 0评论
0个赞
jQuery Mobile 事件
事件 = 所有不同访问者访问页面的响应动作。
jQuery Mobile 事件
在jQuery Mobile你可以使用任何标准的 jQuery 事件 。
除此之外, jQuery Mobile 也提供了针对移动端浏览器的事件：
触摸事件 – 当用户触摸屏幕时触发
滑动事件 – 当用户上下滑动时触发
定位事件 – 当设备水平或垂直翻转时触发
……继续阅读 »
2年前 (2022-06-28) 117浏览 0评论
0个赞
jQuery Mobile 按钮
Mobile 应用程序是建立在您想要显示的简单的点击事物上。
在 jQuery Mobile 中创建按钮
在 jQuery Mobile 中，按钮可通过三种方式创建：
使用 <button> 元素
使用 <input> 元素
使用带有 data-role=”button” 的 <a> 元素
<button&……继续阅读 »
2年前 (2022-06-24) 93浏览 0评论
0个赞
jQuery Mobile Data 属性
jQuery Data 属性
jQuery Mobile 使用 HTML5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观。
在下面的参考列表中，粗体显示的值为默认值。
按钮
在1.4 版本以后已废弃。使用
CSS 类 替代。带有 data-role=”button” 的超链接。button 元素、工具栏中的链接以及 input……继续阅读 »
2年前 (2022-06-21) 271浏览 0评论
0个赞
jQuery Mobile 网格
jQuery Mobile 网格布局
jQuery Mobile 提供了一套基于 CSS 的分列布局。然而，在移动设备上，由于考虑手机的屏幕宽度狭窄，一般不建议使用分栏分列布局。
但有时您想要将较小的元素（如按钮或导航标签）并排地排列在一起，就像是在一个表格中一样。这种情况下，推荐使用分列布局。
网格中的列是等宽的（合计是 100%），没有边框、背景、margin 或 paddi……继续阅读 »
2年前 (2022-06-20) 286浏览 0评论
0个赞
jQuery Mobile 表单
jQuery Mobile 会自动为 HTML 表单自动添加样式，让它们看起来更具吸引力，触摸起来更具友好性。
jQuery Mobile 表单结构
jQuery Mobile 使用 CSS 为 HTML 表单元素添加样式，让它们更具吸引力，更易于使用。
在 jQuery Mobile 中，您可以使用下列表单控件：
文本输入框
搜索输入框
单选按钮
复选框
选择菜单
滑动……继续阅读 »
2年前 (2022-06-19) 165浏览 0评论
0个赞
jQuery Mobile 方向改变事件
jQuery Mobile 方向改变（orientationchange）事件
当用户垂直或水平旋转移动设备时，触发方向改变（orientationchange）事件。
$(document).ready(function(){
$(“#btn”).click(function(){
$(“.iphone”).c……继续阅读 »
2年前 (2022-06-17) 162浏览 0评论
0个赞
jQuery Mobile 简介
jQuery Mobile 是一个用于创建移动端web应用的的前端框架。
学习本教程前你需要先了解
在开始学习 jQuery Mobile 前, 你应该了解一下基础知识：
HTML
CSS
jQuery
如果你想学习这些知识，你可以访问本站的首页。
什么是 jQuery Mobile?
jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架。
jQuery……继续阅读 »
2年前 (2022-06-16) 157浏览 0评论
0个赞
jQuery Mobile 页面事件
jQuery Mobile 页面事件
在 jQuery Mobile 中与页面打交道的事件被分为四类：
Page Initialization – 在页面创建前，当页面创建时，以及在页面初始化之后
Page Load/Unload – 当外部页面加载时、卸载时或遭遇失败时
Page Transition – 在页面过渡之前和之后
Page ……继续阅读 »
2年前 (2022-06-14) 159浏览 0评论
0个赞
jQuery Mobile 过滤
可过滤元素
所有的元素如果有一个或更多的子元素均可过滤。
如何创建搜索字段:
你想过滤的元素必须使用
data-filter=”true” 属性。
创建 <input> 元素并指定 id，元素上加上
data-type=”search” 属性。这样就能创建基本的搜索字段。将 <input> 元素放置……继续阅读 »
2年前 (2022-06-14) 271浏览 0评论
0个赞
jQuery Mobile 页面
开始学习 jQuery Mobile
尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。
为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。
实例
<body><div data-role="page">
<div
data-……继续阅读 »
2年前 (2022-06-12) 219浏览 0评论
0个赞
jQuery Mobile 触摸事件
触摸事件在用户触摸屏幕（页面）时触发。
触摸事件同样可应用与桌面电脑上：点击或者滑动鼠标！
jQuery Mobile 点击
点击事件在用户点击元素时触发。
如下实例：当点击 <p> 元素时，隐藏当前的 <p> 元素：
实例
$(“p”).on(“tap”,function(){ $(……继续阅读 »
2年前 (2022-06-08) 234浏览 0评论
0个赞
jQuery Mobile CSS 类
jQuery CSS 类
jQuery Mobile CSS 类来设置不同元素的样式。
以下列表包含了通用的 CSS 样式：
全局类
以下类可以在 jQuery Mobile 小工具中使用 (按钮，工具条，面板，表格，列表等。):
Class
描述
ui-corner-all
为元素添加圆角
ui-shadow
为元素添加阴影
ui-overlay-sh……继续阅读 »
2年前 (2022-06-07) 91浏览 0评论
0个赞
jQuery Mobile 图标
我们可以使用图标类在 jQuery Mobile 中 <a> 和 <button> 元素上添加图标，并对图标进行定位，如下所示：
<a href=”#anylink” class=”ui-btn ui-icon-refresh ui-btn-icon-left“>刷新页面</a>
……继续阅读 »
2年前 (2022-06-06) 157浏览 0评论
0个赞
jQuery Mobile 弹窗
弹窗是一个非常流行的对话框，弹窗可以覆盖在页面上展示。
弹窗可用于显示一段文本，图片，地图或其他内容。
创建一个弹窗，需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel=”popup”
属性， <div> 元素添加 data-role=”popup” 属性。
……继续阅读 »
2年前 (2022-06-03) 197浏览 0评论
0个赞
jQuery Mobile 表单输入元素
jQuery Mobile 文本输入框
输入字段是通过标准的 HTML 元素编码的，jQuery Mobile 将为它们添加样式使其看起来更具吸引力，在移动设备上更易使用。您也能使用新的 HTML5 的 <input> 类型：
实例
<form method=”post” action=”demo_form.php&……继续阅读 »
2年前 (2022-06-02) 168浏览 0评论
0个赞
jQuery Mobile 可折叠块
可折叠内容块
可折叠块允许您隐藏或显示内容 – 对于存储部分信息很有用。
如需创建一个可折叠的内容块，需要为容器添加 data-role=”collapsible” 属性。在容器（div）内，添加一个标题元素（H1-H6），后跟您想要进行扩展的 HTML 标记：
实例
<div data-role=”collapsib……继续阅读 »
2年前 (2022-06-02) 133浏览 0评论
0个赞
jQuery Mobile 导航栏
导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。
默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role=”button”）。
使用 data-role=”navbar” 属性来定义导航栏：
实例
<div data-role=”header”>
<div ……继续阅读 »
2年前 (2022-05-30) 146浏览 0评论
0个赞
jQuery Mobile 滚屏事件
jQuery Mobile 提供了两种滚屏事件：滚屏开始时触发和滚动结束时触发。
jQuery Mobile 滚屏开始（Scrollstart）
scrollstart 事件是在用户开始滚动页面时触发：
实例
$(document).on(“scrollstart”,function(){ alert(“开始滚动!”);}……继续阅读 »
2年前 (2022-05-15) 157浏览 0评论
0个赞
jQuery Mobile 表单滑动条
jQuery Mobile 滑动条控件
滑动条允许您从一个范围的数字中选择一个值：
如需创建滑动条，请使用 <input type=”range”>：
实例
<form method="post" action="demoform.php"> <labe……继续阅读 »
2年前 (2022-05-15) 221浏览 0评论
0个赞
jQuery Mobile 列表视图
jQuery Mobile 列表视图
jQuery Mobile 中的列表视图是标准的HTML 列表; 有序(<ol>) 和
无序(<ul>).
列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role=”listview”属性。……继续阅读 »
2年前 (2022-05-15) 146浏览 0评论
0个赞
jQuery Mobile 列表内容
jQuery Mobile 列表图标
默认情况下每个列表项都会包含一个箭头图标 “carat-r” (右箭头)。如果要修改这个图标可以使用 data-icon 属性:
实例
<ul data-role="listview"> <li><a href="#">De……继续阅读 »
2年前 (2022-05-15) 140浏览 0评论
0个赞
jQuery Mobile 表格
响应式表格
响应式设计一般用于适配用户各种移动设备。
我们只需要使用一个简单的类名，jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容。
响应式表格让页面内容在移动端和桌面设备上能够很好的适配。
响应式表格有两种类型： reflow(回流) 与 列切换。
回流表格
回流模型表格在屏幕尺寸足够大时是水平显示，而在屏幕尺寸达到足够小时，所有的数据会变成垂直显示。
创建……继续阅读 »
2年前 (2022-05-15) 148浏览 0评论
0个赞
jQuery Mobile 面板
jQuery Mobile 中的面板会在屏幕的左侧向右侧划出。
通过向指定 id 的 <div> 元素添加 data-role=”panel” 属性来创建面板。
在 <div> 中添加 HTML 标记来显示你的面板内容：
<div data-role="panel" id="myPanel">
<h2>面……继续阅读 »
2年前 (2022-05-15) 272浏览 0评论
0个赞
jQuery Mobile 工具栏
工具栏元素通常位于头部和尾部内 – 让导航易于访问：
头部栏
头部栏一般包含页面标题/logo 或一两个按钮（通常是首页、选项或搜索）。
您可以添加按钮到头部的左侧或右侧。
下面的代码，将添加一个按钮到头部标题文本的左侧，添加一个按钮到头部标题文本的右侧：
实例
<div data-role="header"> <……继续阅读 »
2年前 (2022-05-15) 148浏览 0评论
0个赞
