jquery-mobile基础属性与用法详解资源-CSDN文库

9 浏览量 2020-11-28 02:44:47 上传评论收藏 98KB PDF 举报

资源推荐

资源详情

资源评论

jquery-mobile基础属性与用法详解基础属性与用法详解

本文实例讲述了jquery-mobile基础属性与用法。分享给大家供大家参考，具体如下：

写在前面

本文是根据w3c 学习轨迹，自己研习过程中记录下的笔记，只供自己学习轨迹记录之用，不喜勿喷。

0. 引入库引入库

引入对应的文件：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

一、页面结构说明一、页面结构说明

页面的三要素：

页面 data-role=”page” //注意这个属性必须有且为最外层div 否则事件注册的时候会自动注册俩次

页头 data-role=”header” //页面头部标题或菜单区

内容 data-role=”content” //页面内容

页尾 data-role=”footer” //页尾标题或菜单区

<div data-role="page" id="pageone">

<div data-role="header">

<h1>在此处写入标题</h1>

</div>

<div data-role="content">

<p>在此处写入正文</p>

</div>

<div data-role="footer">

<h1>在此处写入页脚文本</h1>

</div>

</div>

【1.页面全屏】

需要当前页面的头部和尾部留在最上和最下的时候可以在 header 和 footer 的div 中加上属性

data-position="fixed" data-fullscreen="true"

注意俩个必须同时加，否则将无任何效果

【2.页面标题居中】

必须在 header 或 footer的 div的下一级加上 h1 标签其他标签无效

<div data-role="footer">

<h1>标题文字</h1>

</div>

二、在二、在HTML中创建多个页面中创建多个页面

【页面内之间切换】

默认显示第一个页面

其他页面隐藏

<div data-role="page" id="pageone">

<div data-role="content">

<a href="#pagetwo">转到页面二</a>

</div>

</div>

<div data-role="page" id="pagetwo">

<div data-role="content">

<a href="#pageone">转到页面一</a>

</div>

</div>

剩余7页未读，继续阅读

内容反馈

weixin_38645373

粉丝: 4
资源: 958

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip