JQuery mobile 基本结构

刺骨的言语ヽ痛彻心扉 2022-08-21 08:52 195阅读 0赞

JQuery mobile的书看了些，说实话有点过时了可能，我觉得最好还是看官网的API可能效果更好点吧。

最近学习了下，感觉的确比较容易，也是结合这最近看的书，写写笔记啥的。

首先最基本的，JQM的页面每一个页面就是一个page页面，每一个page分为header content 和footer是不是有点像H5的标签。很好理解。

一个基本的页面

<section id="page1" data-role="page">
            <header data-role="header">
                <h1>data-role="header"</h1>
            </header>
            <div data-role="content" class="content">
                <p>data-role="content"</p>
            </div>
            <footer data-role="footer">
                <h1>data-role="footer"</h1>
            </footer>
        </section>

![这里写图片描述][20160425162924627]

data 为h5新出现的属性，是用户自己定义的属性，详情可以看下这个文章，  
[https://segmentfault.com/a/1190000002445964][https_segmentfault.com_a_1190000002445964]

data-role="page"

上面截图的部分就是page部分，包含了整个页面，也就是一个页面的标志

data-role="header"

头部部分，图片上有标志

data-role="content"

内容部分，也就是我们显示网页的主体部分，上面用代码标志出来了

data-role="footer"

尾部部分，也用代码表示出来了。

一个页面的基本结构也就是这样。

最后说一下使用的手机模拟用的是Opera Mobile Emulator，看书里推荐的，使用起来还算可以

[20160425162924627]: /images/20220724/2893a1a5fc404575bc298b8e76900bcc.png
[https_segmentfault.com_a_1190000002445964]: https://segmentfault.com/a/1190000002445964

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery mobile学习教程之Jquery mobile 二页面结构

Jquery Mobile基本框架在jQuery Mobile中，有一个基本的页面框架模型，就是在页面中通过将一个标记的“data-role”属性设置为“pag

一时失言乱红尘/ 2023年10月16日 19:32/ 0 赞/ 21 阅读

相关 jquery mobile学习教程之初识Jquery mobile 一

Jquery Mobile简介： jQuery Mobile 是一个针对触摸体验的 web UI 开发框架，允许您开发跨智能电话和平板电脑工作的移动 web 应用程序

墨蓝/ 2023年10月16日 19:32/ 0 赞/ 44 阅读

相关 jquery mobile 移动web(5)

有序列表　　<div data-role="content"> 　　　　<ol data-role="listview" data-theme="g"> 　　　　

╰+哭是因爲堅強的太久メ/ 2023年06月11日 04:27/ 0 赞/ 36 阅读

相关 jQuery Mobile 快速入门

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQueryMobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery

谁借莪１个温暖的怀抱￠/ 2022年09月26日 14:54/ 0 赞/ 180 阅读

相关 JQuery mobile 基本结构

JQuery mobile的书看了些，说实话有点过时了可能，我觉得最好还是看官网的API可能效果更好点吧。最近学习了下，感觉的确比较容易，也是结合这最近看的书，写写笔记啥的

刺骨的言语ヽ痛彻心扉/ 2022年08月21日 08:52/ 0 赞/ 196 阅读

相关 jquery mobile笔记

1：http://www.wglong.com/main/artical!details?id=4\q2 2：codeigniter（ci）在nginx下返回404

深碍√TFBOYSˉ_/ 2022年08月13日 00:42/ 0 赞/ 185 阅读

相关 JQuery Mobile Popup窗口定位

在JQuery Mobile 1.4.5 Demo中，有Popup窗口定位的实例，看上出倒是很强大，自己用起来的确很蛮烦的，本人通过修改窗口位置来实现相对定位，供参考。

素颜马尾好姑娘i/ 2022年08月08日 14:54/ 0 赞/ 60 阅读

相关 jquery mobile界面数据刷新

[jquery mobile界面数据刷新][jquery mobile] JQM里面当我们更新了某些页面标签(如: listview, radiobuttons, che

野性酷女/ 2022年07月15日 06:50/ 0 赞/ 227 阅读

相关 jQuery Mobile

jQuery Mobile是一个基于jQuery Core的触摸友好UI框架，适用于所有流行的移动，平板电脑和桌面平台。官网：[http://jquerymobile.co

小灰灰/ 2022年05月14日 07:07/ 0 赞/ 554 阅读

相关 JQuery Mobile试试水

JQuery Mobile了解，扩展一下知识面……废话不多说，找资料去…… 第一步：打开软件——webstorm。（哈哈，让我缓一下）第二步：找到所需的一些工具，引入进

浅浅的花香味﹌/ 2021年06月24日 16:11/ 0 赞/ 373 阅读