jQuery Mobile 初始化

最新推荐文章于 2024-08-14 15:45:18 发布
最新推荐文章于 2024-08-14 15:45:18 发布
阅读量109 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/linyongqin/articles/3813624.html
版权

pageinit.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>pageinit</title> 
    <link rel="stylesheet" href="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
        alert("document.ready 被触发");
    });
    $(document).live("mobileinit",function(){
        alert("mobileinit 事件被触发");
    });
    $(document).delegate("#page1","pageinit",function(){
        alert("page1 页面 pageinit 事件被触发");
    });
    $(document).delegate("#page1","pageshow",function(){
        alert("page1 页面 pageshow 事件被触发");
    });
    $(document).delegate("#page2","pageinit",function(){
        alert("page2 页面 pageinit 事件被触发");
    });
    $(document).delegate("#page2","pageshow",function(){
        alert("page2 页面 pageshow 事件被触发");
    });
    
    $(function(){
        $("#triggerMobileinit").click(function(){
            $(document).trigger('mobileinit');    
        });    
        
        $("#backPageinit").click(function(){
            $("#page1").trigger('pageinit');    
        });    
    });
    </script>
    <script src="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>

<body>
    <section id="page1" data-role="page" data-title="第一个页面">
        <header data-role="header" data-position="fixed">
            <h1>跨平台移动应用</h1>
        </header>
        <div data-role="content"> 
            <p>执行顺序：</p>
            <p>mobileinit</p> 
            <p>$(document).ready</p> 
            <p>pageinit</p> 
            <p>pageshow</p> 
            <p><a href="basic.html" rel="external">basic页面(不使用Ajax超级链接的方式  rel="external")</a></p>
            <p><a href="#page2">第二个页面</a></p> 
            <p><a href="#" id="triggerMobileinit">js触发mobileinit</a></p> 
            <p><a href="#" onClick="$(document).trigger('mobileinit')">触发mobileinit</a></p>
        </div>
        <footer data-role="footer" data-position="fixed">
            <h1>第一个页面底部</h1>
        </footer>
    </section>
    <section id="page2" data-role="page" data-title="第二个页面">
        <header data-role="header" data-position="fixed">
            <h1>第二个页面</h1>
        </header>
        <div data-role="content"> 
            <p>Hello world</p> 
            <p><a href="#page1">第一个页面</a></p> 
            <p><a href="#page1" id="backPageinit">js 返回 并触发pageinit</a></p> 
            <p><a href="#page1" onClick="$('#page1').trigger('pageinit')">返回 并触发pageinit</a></p>
        </div>
        <footer data-role="footer" data-position="fixed">
            <h1>第二个页面底部</h1>
        </footer>
    </section>
</body>
</html>

1.初始化事件：

<script type="text/javascript">
    $(document).ready(function(e) {
        alert("document.ready 被触发");
    });
    $(document).live("mobileinit",function(){
        alert("mobileinit 事件被触发");
    });
    $(document).delegate("#page1","pageinit",function(){
        alert("page1 页面 pageinit 事件被触发");
    });
    $(document).delegate("#page1","pageshow",function(){
        alert("page1 页面 pageshow 事件被触发");
    });
    $(document).delegate("#page2","pageinit",function(){
        alert("page2 页面 pageinit 事件被触发");
    });
    $(document).delegate("#page2","pageshow",function(){
        alert("page2 页面 pageshow 事件被触发");
    });
    </script>

2.不使用Ajax超级链接的方式  rel="external"

<a href="pageinit.html" rel="external">pageinit页面</a>

 

basic.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>跨平台移动应用</title> 
    <link rel="stylesheet" href="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head> 
<body>
    <section id="page1" data-role="page" data-title="第一个页面">
        <header data-role="header" data-position="fixed">
            <h1>跨平台移动应用</h1>
        </header>
        <div data-role="content"> 
            <p>Hello world</p> 
            <a href="pageinit.html" rel="external">pageinit页面</a>
            <a href="#page2">第二个页面</a>
            <a href="#page3" data-transition="slideup">第三个页面</a>
        </div>
        <footer data-role="footer" data-position="fixed">
            <h1>第一个页面底部</h1>
        </footer>
    </section>
    <section id="page2" data-role="dialog" data-title="第二个页面">
        <header data-role="header" data-position="fixed">
            <h1>第二个页面</h1>
        </header>
        <div data-role="content"> 
            <p>Hello world</p> 
            <a href="#page1">第一个页面</a>
        </div>
        <footer data-role="footer" data-position="fixed">
            <h1>第二个页面底部</h1>
        </footer>
    </section>
    <section id="page3" data-role="page" data-title="第三个页面">
        <header data-role="header" data-position="fixed">
            <h1>第三个页面</h1>
        </header>
        <div data-role="content"> 
            <p>Hello world</p> 
            <a href="#page1">第一个页面</a>
        </div>
        <footer data-role="footer" data-position="fixed">
            <h1>第三个页面底部</h1>
        </footer>
    </section>
</body>
</html>

 

切换方式 data-transition="slideup"：

<a href="#page3" data-transition="slideup">第三个页面</a>

 

转载于:https://www.cnblogs.com/linyongqin/articles/3813624.html

bailiang9872
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery mobile 使用之基础篇
yinjingjing00的专栏
04-24 2009
首先声明：jquery mobile 版本不同，代码差距比较大，建议使用最新版本---1.4.5; 官网主页：http://jquerymobile.com/ 注:复制官网上的代码时，需要注意空格删除！否则页面样式可能出现空行或者错位； 教程主页：http://www.w3school.com.cn/jquerymobile/（有时候自学也是一种选择！有图，有真相！） 1.引入js、css
jQuery Mobile 简介
xyq2024的博客
07-16 370
jQuery Mobile 是一个基于 jQuery 的轻量级移动设备友好的开发框架。它旨在帮助开发者创建一个在所有智能手机、平板电脑和桌面设备上都能运行的一致的、响应式的网页和应用程序。jQuery Mobile 提供了一套丰富的用户界面组件和主题，使得开发者能够快速构建出具有良好交互体验的移动应用。
jQuery Mobile初始化事件
crkres9527
04-17 650
事件分为以下几种： 1）初始化事件(Page Initialization)：分别在页面初始在之前，页面创建时以及页面初始化之后触发事件。 2）外部页面加载事件(Page Load):外部页面加载时触发事件 3）页面切换事件（Page Transition）：页面切换时触发事件 语法如下： $(document).on(事件名称，选择器，事件处理函数); 1.Mobilei...
jQuery Mobile 中文手册 Ajax开发版——初始化部分
dianzongfan5428的博客
12-01 108
初始化 jQM在加载的时候会自动的初始化默认配置项，这样我们就不需要为了学习和配置这些参数花费很多的时间了，大大的提高了开发效率。但是有些时候因为项目的需要我们还是需要对这些参数进行自定义的。在学习jQM的初始化参数之前，我们需要先来了解mobileinit事件。 Mobileinit事件 jQM的加载事件和普通的jQuery插件有所不同，它会在document.ready事件之前执行。...
jQuery mobile 初始化页面的过程
weixin_30463341的博客
02-12 149
转载于:https://www.cnblogs.com/Sandheart/p/4288636.html
jquery mobile 的4个初始化事件
沈阳斌子
04-07 2424
jQuery Mobile 初期化事件有mobileinit,pagebeforecreate,pagecreate,pageinit这个4个事件。本文尝试总结和比较4个事件。 事件触发顺序 第一个触发的事件是mobileinit，其次pagebeforecreate，再次pagecreate，最后pageinit。 mobileinit -> pagebeforecreate ->
jQuery Mobile 中文手册(初始化部分) 翻译
04-29 1301
jQM在加载的时候会自动的初始化默认配置项，这样我们就不需要为了学习和配置这些参数花费很多的时间了，大大的提高了开发效率。 但是有些时候因为项目的需要我们还是需要对这些参数进行自定义的。在学习jQM的初始化参数之前，我们需要先来了解mobileinit事件。 Mobileinit事件 jQM的加载事件和普通的jQuery插件有所不同，它会在document.ready事件之前执行。因此我们在需要对jQM的默认运行参数进行调整的时候就需要在document.ready事件之前来对这些参数进行设置，jQM为我们
浅析jQuery Mobile的初始化事件
10-23
主要介绍了浅析jQuery Mobile的初始化事件,jQuery是当前人气最高的JavaScript库,需要的朋友可以参考下
jQuery移动web开发中的页面初始化与加载事件
10-23
主要介绍了jQuery移动web开发中的页面初始化与加载事件,是JavaScript移动端页面开发学习中的基础知识,需要的朋友可以参考下
移动端jqueryMobile日期插件特效代码
03-20
"移动端jqueryMobile日期插件特效代码"就是这样一个解决方案，它专门针对Android和iOS设备的日期选择框进行了界面优化，以实现更美观且易于操作的效果。 jQuery Mobile是一款流行的前端框架，它旨在简化移动Web应用...
jQuery Mobile 所需要的部署文件
03-01
1. **index.html**：这是你的主网页文件，通常包含页面的结构和jQuery Mobile的初始化代码。在这个例子中，它应该展示了如何使用jQuery Mobile创建一个简单的“Hello World”页面。通常，你需要在HTML头部引入jQuery...
JQuery Mobile 的4个初始化事件
BesturnLee
01-30 1818
/* JQuery Mobile 的4个初始化事件 */ $(document).bind('mobileinit', function(){ window.alert('1. JQuery Mobile加载时最先触发的事件'); // page loader 属性设置 $.mobile.loader.prototype.options.text = "正在加载中 ..."; $.mo
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 501
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 169
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 558
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
Electron学习与总结
song854601134的博客
08-12 197
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 419
注释很详细，直接上代码……
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 891
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
【无标题】
weixin_42348009的博客
08-14 80
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
jQuery Mobile页面初始化与HTML5/CSS3资源指南
本文档主要关注的是jQuery Mobile（JM）事件的页面初始化过程，特别是`pagebeforecreate`和`pagecreate`这两个关键环节。jQuery Mobile是一个基于HTML5、CSS3和JavaScript的移动Web应用框架，它允许开发者创建跨平台...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值