w3school jQuery Mobile教程 飞龙整理 20141022

所需积分/C币:10 2014-10-22 20:38:39 1.19MB PDF
收藏 收藏
举报

w3school jQuery Mobile教程 飞龙整理 20141022
<script src=jquery. js></script> <script src=jquery. mobile-1.3.2.js></script> /head 提示:将下载的文件放置于与网页同目录下。 你是否想知道为什么在< script>标答中没有插入type=" text/javascript"? 在HTML5已经不需要该属性。 JavaScript在所有现代浏览器中是HTML5 的默认脚本语言! jQuery Mobile页面 开始学习 jQuery Mobile 尽管 jQuery Mobile兼容所有的移动设备,但是并不能完全兼容PC札(由于有 限的CSS3支持)。 为了更好的阅读本教程,建议您使用 Google Chrome浏览器。 实例 <body> <div data -role="page> <diy data-role=header> <h1>欢来到我的主贞</h1 </div> <diy data-role="content> <p>我现在是一个移动端开发者!!</p </div> <diy data-role="footer " <h1>底部文本</h1> </div> </div> </body> 实例解析 data-role="page"是在浏览器中显示的页面。 ·data-role=" header"是在页面顶部创建的工具条(通常用于标题或者搜索按钮) data-role=" conten"定义了页面的内容,比如文本,图片,表单,按钮等 data-role=" footer"用于创建页面底部工具条。 ·在这些容器中你可以添加任何HTML元素-段洛,图片,标题,列表等 Query Mobile依赖HTML5data-*属性来支持各种U元素、过渡和页面结 构。不支持它们的浏览器将以静默方式弃用它们。 在页面中添加 jQuery Mobile 使用 jQuery mobile,你可以再单个HTML文件中创建多个不同的页面 你可以使用不同的href属性来区分使用同一个唯一id的页面: 例 <div data-role="page" id="pageone"> <diy data-role="content> ca href="#pagetwo">Go to Page Two</a> </div> </div> <div data-role="page" id="pagetwo"> <diy data-role="content> ka href=#pageone >Go to Page One</a> </div> </div> 注意:当Web应用有大量的内容(文本,图片,脚本等)将会严重景响加载时间。如果你不想使用内页 链接可以使用外部文件: < a href=" externa1f11e.htm1">访问外部文件</ay 页面作为对话框使用 对话框是用于显示页面信息显示或者表单信息的输入。 在链接中添加data-re="daog"让用户点击链接时弹出对话框 实例 <div data-role=" page id= pageone"> diy data-role="content> <a href="tpagetwo" data-rel="dialog">Go to Page Two</a> </div> <div data-role="page id="pagetwo"> <div data-role="content> <a href="#pageone">Go to Page one</a> </div> </d1v> Query Mobile页面切换 jQuery Mobile包含CSS3效果让您选择页面打开的方式 jQuery Mobile页面切换效果 jQuery Mobile提供了各种页面切换到下一个页面的效果。 注意:为了实现页面切换效果,浏览器必须支持CSS33D切换: 浏览器支持 · Internet Explorer10支持3D切换(早期版本不支持) Opera不支持3D切换 页面切换效果可被应用于任何使用data- transition属性的链接或表单提交 < e href="#any1ink"data- transition="s1ide">切换到第二个页面</a> 下面的表格显示了通过使用data- transition属性后可用的页面切换 页面切换描述 尝试 fade 默认。淡入到下一页 p 从后向前翻转到下一页 fe 抛出当前页,进入下一页 pop 像弹出窗口一样进入下一页 slide 从右到左滑动到下一页 slidefade‖从右到左滑动并淡入到下一页 slideup 从下到上滑动到下一页 slidedown‖从上到下滑动到下一页 turn∩ 翻到下一页 none 没有切换效果 按钮 主页 选项 搜索 下一页面 信息 底部文本 在 jQuery Mobile中创建按针 在 jQuery Mobile中,按钮可通过三种方式创建 使用< button>元素 使用< cinput>元素 ·使用带有data-role=" button"的<a>元素 <button> < button>按钮</ button <input input type=" button" value="按钮" ≤a> < a href="#"data-ro1e=" button">按钮</a> 在 jQuery mobile中,按钮会自动样式化,让它们在移动设备上更具吸引力 和可用性。我们推荐您使用带有data-role=" button"的<a>元素在页面间 进行链接,使用<nput>或< button>元素进行表单提交。 导航按钮 如需通过按钮在页面间进行链接,请使用带有data-role=" button"属性的<a>元素: 实例 < a href="# pagetic"data-ro1e=" button">访问第二个页面</a> 内联按钮 默认情况下,按钮占满整个屏幕宽度。如果你想要个仅是与内谷·样宽的按钮,或者如果您想要并排 显示两个或多个按钮,请添加data- - inline="true" 实例 < e href="# pagetwo"data-role=" button"data-in1ine="true">访问第二个页面</a 组合按钮 jQuery Mobile提供了一个简单的方法来将按钮组合在一起。 请把data-roe=" controlgroup"属性和data-type=" horizontal vertica"一起使用来规定是否水平或垂直 组合按钮: 实例 <div data-role="controlgroup" data-type= horizontal> <a href=#anylink" data-role="button">fH 1</a> <a href=#anylink"data-role"button">il 2</a> ka href=#anylink" data-role="button">ti 3</a> </div> 默认情况下,组合按钮是垂直组合,它们之间没有外边距和空间。并且只有 第一个和最后一个按钮是圆角,以便它们组合在一起的时候创建一个漂亮的 外观。 按钮图标 主页 选项 搜索 下一页 信息 底部文本 添加图标到 jQuery Mobile按钮 如需添加图标到您的按钮,请使用data-icon属性 <a href=#anylink data-role="button data-icon=search">Search</a> 提小:您也可以在<butn>或<inpu>元素上使用data-icon属性 下面我们列出一些 jQuery Mobile提供的可用图标 属性值 描述 图标 实例 data-icon="arw-"左箭头 data-icon="aroi-r"‖右箭头 data-icon=" delete"‖删除 data-icon= info 信息 data-icon= home 首页 data-icon=back 后退 data-con=" search"‖搜索 data-icon=" grid 网格 如需查看所有 jQuery Mobile按钍图标的完整参考手册,请访问我们的 jQuery Mobile图标参考手册。 定位图标 您也可以规定图标定位在按钮的什么部位:顶部(top)、右侧( right)、底部( bottom)、左侧 (|eft)。 请使用 data-iconpos属性来指定位置: 图标的位置: <a href="#link" data-role"button"data-icon="search" data-iconpos=top">n1 Eks</a> ka href=#link"data- role="button"data-icon"search"data-iconpos="right >h/a> <a href=#link"data-role="button"data-icon=search"data- iconpos=bottom">E</a> <a href=#link" data-role="button"data-icon="search"data-iconpos="left">Eg/a> 默认情况下,所有的按钮图标被放置到左侧。 只显示图标 首页 欢迎来到我的主页 搜索 该按钮仅用于演示,不会有任何效果。 在 Facebook上关注我 在 Twitter上关注我 在 Instagram上关注我 头部栏 头部栏一般包含页面标题/ogo或一两个按钮(通常是首页、选项或搜索)。 您可以添加按钮到头部的左侧或右侧。 下面的代码,将添加一个按钮到头部标题文本的左侧,添加一个按钮到头部标题文本的右侧: 实例 <diy data-role= header> < a href="#"data-ro1e=" button">首页</a> <h1>欢迎来到我的主页</h1 < a href="#"data-role=" button">搜索</a </div> 下面的代码,将添加一个按钮到头部标题文木的左侧 <diy data-role= header < a href="#"data-ro1e=" button">首页</a> <h1>欢迎来到我的主页</h1> </div> 但是,如果您把按钮链接放置在≮h1>元素之后,将无法显示右侧的文本。要添加一个按钮到头部标题 的右侧,请指定 class为" ui-btn- right" 实例

...展开详情
立即下载 低至0.43元/次 身份认证VIP会员低至7折
一个资源只可评论一次,评论内容不能少于5个字
sincerejerry 整理的不错,只是有些图标没有显示出来,也没有“亲自试一试”的源代码
2016-11-29
回复
dulang1 真不错,非常好的教程
2015-10-29
回复
jackey2046 这个教程讲的还是比较详细的,
2015-04-13
回复
swanrat_rr pdf版的,辛苦楼主
2015-03-25
回复
  • GitHub

    绑定GitHub第三方账户获取
  • 脉脉勋章

    绑定脉脉第三方账户获得
  • 技术圈认证(专家版)

    博客专家完成年度认证,即可获得
  • 至尊王者

    成功上传501个资源即可获取
关注 私信 TA的资源
上传资源赚积分or赚钱
最新推荐