w3schooljQueryMobile教程飞龙整理20141022-其它文档类资源-CSDN下载

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" 实例

...展开详情

w3school jQuery javascript jQueryMobile pdf

立即下载