jQuery Mobile
2015-06-19 11:56
746 查看
引用 jQuery Mobile,可以
jQuery Mobile CDN:
也可以下载下来
实现一个最简单的页面
HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。
在 jQuery Mobile,您可以在单一 HTML 文件中创建多个页面。
请通过唯一的 id 来分隔每张页面,并使用 href 属性来连接彼此:
每个都是一个page
在 jQuery Mobile 中创建按钮
jQuery Mobile 中的按钮可通过三种方法创建:
使用 元素
使用 元素
使用 data-role=”button” 的 元素
在页脚设置了浮动后,若是设置了按钮的类,就没有效果了。
头部若是设置成浮动和全屏,那么点击空白处能够隐藏标题
jQuery Mobile CDN:
[code]<head> <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> </head>
也可以下载下来
[code]<head> <link rel=stylesheet href=jquery.mobile-1.3.2.css> <script src=jquery.js></script> <script src=jquery.mobile-1.3.2.js></script> </head>
实现一个最简单的页面
[code]<!DOCTYPE html> <html> <head> <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> </head> <body> <div data-role="page"> <div data-role="header"> <h1>标题</h1> </div> <div data-role="content"> <p>内容</p> </div> <div data-role="footer"> <h1>页脚</h1> </div> </div> </body> </html>
HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。
在 jQuery Mobile,您可以在单一 HTML 文件中创建多个页面。
请通过唯一的 id 来分隔每张页面,并使用 href 属性来连接彼此:
每个都是一个page
[code]<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>
在 jQuery Mobile 中创建按钮
jQuery Mobile 中的按钮可通过三种方法创建:
使用 元素
使用 元素
使用 data-role=”button” 的 元素
在页脚设置了浮动后,若是设置了按钮的类,就没有效果了。
头部若是设置成浮动和全屏,那么点击空白处能够隐藏标题
[code]<div data-role="header" data-position="fixed" data-fullscreen="true">
相关文章推荐
- 使用jquery-qrcode生成二维码
- jQuery滚动条回到顶部或指定位置
- 对比Angular/jQueryUI/Extjs:没有一个框架是万能的
- JQuery操作CheckBox和Radio
- jquery.cityselect.js基于jQuery+JSON的省市-自定义联动效果
- js中的table中需要获取勾选行的值(jquery)
- Jquery 城市三级联动 插件
- 模拟jquery的javascript自定义可扩展插件
- 基于jQuery+Cookie实现的防止刷新的在线考试倒计时
- jquery ajax timeout含义是设置请求超时时间,不涉及服务器响应时间
- JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
- JavaScript和JQuery的鼠标mouse事件冒泡处理
- jquery 页面滚动到底部自动加载插件集合
- jquery对url中的中文解码
- JavaScript和JQuery的鼠标mouse事件冒泡处理
- JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
- 基于jQuery+Cookie实现的防止刷新的在线考试倒计时
- JQuery实现的图文自动轮播效果插件
- jquery实现的代替传统checkbox样式插件
- jquery gridster 拖拽功能 中文文档