JQuery mobile 基本结构

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

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

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

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

一个基本的页面

  1. <section id="page1" data-role="page">
  2.         <header data-role="header">
  3.             <h1>data-role="header"</h1>
  4.         </header>
  5.         <div data-role="content" class="content">
  6.             <p>data-role="content"</p>
  7.         </div>
  8.         <footer data-role="footer">
  9.             <h1>data-role="footer"</h1>
  10.         </footer>
  11.     </section>

这里写图片描述

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

  1. data-role="page"

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

  1. data-role="header"

头部部分，图片上有标志

  1. data-role="content"

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

  1. data-role="footer"

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

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

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

发表评论

表情：
评论列表 （有 0 条评论，250人围观）

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

相关阅读

    相关 jQuery Mobile

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

    小灰灰小灰灰/ 0 赞/ 617 阅读