jQuery Mobile页面事件
jQuery Mobile 页面事件 在 jQuery Mobile 中与页面打交道的事件被分为四类： Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后 Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时 Page Transiti
jQuery Mobile 页面事件
在 jQuery Mobile 中与页面打交道的事件被分为四类：
- Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后
- Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
- Page Transition - 在页面过渡之前和之后
- Page Change - 当页面被更改，或遭遇失败时
如需关于所有 jQuery Mobile 事件的完整信息，请访问我们的 jQuery Mobile 事件参考手册。
jQuery Mobile Initialization 事件
当 jQuery Mobile 中的一张典型页面进行初始化时，它会经历三个阶段：
- 在页面创建前
- 页面创建
- 页面初始化
每个阶段触发的事件都可用于插入或操作代码。
| 事件 | 描述 |
|---|---|
| pagebeforecreate | 当页面即将初始化，并且在 jQuery Mobile 已开始增强页面之前，触发该事件。 |
| pagecreate | 当页面已创建，但增强完成之前，触发该事件。 |
| pageinit | 当页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事件。 |
下面的例子演示在 jQuery Mobile 中创建页面时，何时触发每种事件：
实例
$(document).on("pagebeforecreate",function(event){
alert("pagebeforecreate 事件触发!");
});
$(document).on("pagecreate",function(event){
alert("pagecreate 事件触发!");
});jQuery Mobile Load 事件
页面加载事件属于外部页面。
不管外部页面是在什么时候被载入到 DOM 里的，都会依次触发两类事件：先是 pagebeforeload，随后则是 pageload（加载成功）或者 pageloadfailed（加载失败）。
下表中解释了这些事件：
| 事件 | 描述 |
|---|---|
| pagebeforeload | 在任何页面加载请求作出之前触发。 |
| pageload | 在页面已成功加载并插入 DOM 后触发。 |
| pageloadfailed | 如果页面加载请求失败，则触发该事件。默认地，将显示 "Error Loading Page" 消息。 |
下列演示 pageload 和 pagloadfailed 事件的工作原理：
实例
$(document).on("pageload",function(event,data){
alert("触发 pageload
事件！nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert(";抱歉，被请求页面不存在。");
});jQuery Mobile 过渡事件
我们还可以在从一页过渡到下一页时使用事件。
页面过渡通常会牵涉到两个页面：一个是“进入”的页面，另一个是“离开”的页面。正是这些过渡效果，让当前正在显示的页面（“进入”的页面）切换到新页面（“离开”的页面）时，不再只是生硬地替换，而是显得更流畅、更有动感。
| 事件 | 描述 |
|---|---|
| pagebeforeshow | 在"去的"页面触发，在过渡动画开始前。 |
| pageshow | 在"去的"页面触发，在过渡动画完成后。 |
| pagebeforehide | 在"来的"页面触发，在过渡动画开始前。 |
| pagehide | 在"来的"页面触发，在过渡动画完成后。 |
下列演示了过渡时间的工作原理：
实例
$(document).on("pagebeforeshow","#pagetwo",function(){ //当进入页面二时
alert("页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){
// 当进入页面二时
alert("现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){
// 当进入页面二时
alert("页面二即将隐藏");
});
$(document).on("pagehide","#pagetwo",function(){
// When lea ving pagetwo
alert("现在隐藏页面二");
});
在jQuery中动态更新Label标签的文本 想让页面上的说明文字活起来吗？通过jQuery选中Label标签，再调用一个简单的text()方法，就能实时更改它的显示内容。下面咱们通过一个手把手的案例，把这个过程的每一步都拆解清楚。 第一步：搭建演示环境 首先，创建一个名为test.html的HTM
在你的网页中添加 jQuery Mobile 你可以通过以下几种方式将jQuery Mobile添加到你的网页中： 从 CDN 中加载 jQuery Mobile (推荐) 从jQuerymobile.com 下载 jQuery Mobile库 从 CDN 中加载 jQuery Mobile CDN
开始学习 jQuery Mobile 尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。 为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。 实例 欢迎来到我的主页 我现在是一个移动端开发者!! 底部文本 实例解析： data-
jQuery Mobile 包含 CSS3 效果让您选择页面打开的方式。 jQuery Mobile 页面切换效果 jQuery Mobile 提供了各种页面切换到下一个页面的效果。 注意：为了实现页面切换效果，浏览器必须支持 CSS3 3D 切换： 12.0 10.0 16.0 4.0 15.0
Mobile 应用程序是建立在您想要显示的简单的点击事物上。 在 jQuery Mobile 中创建按钮 在 jQuery Mobile 中，按钮可通过三种方式创建： 使用 元素 使用 元素 使用带有 data-role="button" 的 元素 按钮 按钮 在 jQuery Mobile 中，按
jQuery Mobile 提供了一套让按钮看起来更称心如意的图标。 添加图标到 jQuery Mobile 按钮 我们可以使用 ui-icon 类将图标添加到按钮上，并可以使用指定类来设置按钮位置。 Search 注意： 如果是其他场景下的按钮，比如列表里的按钮或表单中的按钮，就需要用到 data
弹窗是一个非常流行的对话框，弹窗可以覆盖在页面上展示。 弹窗可用于显示一段文本，图片，地图或其他内容。 要做一个弹窗，通常会配合使用 和 这两个元素。先给 元素加上 data-rel="popup" 属性，再给 元素设置 data-role="popup" 属性。接下来，为这个 指定一个 id，同时
导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。 默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。 使用 data-role="navbar" 属性来定义导航栏： 实例 首页 页面二 搜索 默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平
jQuery Mobile 中的面板会在屏幕的左侧向右侧划出。 通过向指定 id 的 元素添加 data-role="panel" 属性来创建面板。 在 中添加 HTML 标记来显示你的面板内容： 面板标题.. 文本内容.. 注意： panel 标记必须置于头部、内容、底部组成的页面之前或之后。 要
可折叠内容块 可折叠块允许您隐藏或显示内容 - 对于存储部分信息很有用。 如果想做一个可折叠的内容块，先给容器加上 data-role="collapsible" 属性。接着在这个容器（div）里，先放一个标题元素（H1-H6），再把需要展开显示的 HTML 标记紧跟在后面即可： 实例 点击我 -
火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力，依托字节自研豆包多模态大模型，凭借火山方舟一站式平台，提供模型精调、推理部署、智能应用搭建等全链路服务，结合高性能AI算力，助力各行业快速落地大模型数字化与智能化应用。
