![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
jQuery Mobile
文章平均质量分 66
游可
好好学习 天天记录
展开
-
jQueryMobile的(十三) 全屏视图
在开发的过程中我们开发的页面可能会非常的长,我们在页面的两端放置了header和footer。这样的页面当我们滚动的时候,header和footer会随着滚动而滚到屏幕外,这时候我们如果想操做header和footer必须再滚动回去。 jquerymobile为我们考虑了这种情况,在这种情况下我们可以点击屏幕,然后消失的header和footer就会出现,再次点击的时候就又会消失。如果我们原创 2013-11-02 14:53:50 · 2575 阅读 · 1 评论 -
jQueryMobile的(十四) 表单 、文本输入、拖动滑动、切换开关
jQuery Mobile会自动替换标准的HTML表单元素,例如文本框,复选框,列表框。以这种自定义的样式工作在触摸设备上的表单元素,易用性更强:文本输入 表单 Login Username: Password: 点击这里原创 2013-11-02 15:36:04 · 3376 阅读 · 0 评论 -
jQueryMobile的(十七) 菜单
1、菜单由按钮和菜单两部分组成,当用户单击按钮选择其中一项后,菜单自动关闭,被单击按钮的值将自动更新为菜单中用户所选的值。将菜单的类型设置为自定义,只需在元素中,将data-native-menu属性值设为false即可。示例代码: Forms Custom Select原创 2013-11-02 16:14:14 · 949 阅读 · 0 评论 -
jQueryMobile的(十五) 日期、时间 插件
很多时候填写表单的时候可能会让你填一下 日期 时间 等 参数 直接上代码 : Forms HTML5 Dates Time: Datetime local: Da原创 2013-11-02 15:53:54 · 5968 阅读 · 0 评论 -
jQueryMobile的(十) 可折叠内容块
要创建内容折叠块。首先,创建一个容器,并添加 data-role="collapsible" 属性。并且给此容器使用 data-content-theme 属性,为可折叠的内容块,进行主题样式设计。其次,在容器中,添加任何头部区域的标题(h1-h6)或图例元素(egend element)。JQuery Mobile框架将样式化头部,使其看起来像一个可点击的按钮,并添加一个“+”图标左边表原创 2013-11-01 16:58:48 · 2609 阅读 · 0 评论 -
jQueryMobile的(十六)单选框、复选框
radio(单选按钮)单选按钮组和复选按钮组都是用标准的 input/label 标记书写的,但是都被样式化得更容易触摸式点击。你所看见的控件,其实是覆盖在 input 上的 label 元素, 所以如果图片没有正确加载,你仍然可以正常使用控件。 Forms .ui-controlgroup-horizontal .ui-radio l原创 2013-11-02 16:08:01 · 5895 阅读 · 0 评论 -
jQueryMobile的(十八) 触摸事件(touch)
在 jQuery Mobile 中有一些触摸事件是可定制的。然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用。当这些事件可用时,您可以触发任何自定义java script 作为对五种不同的事件的响应tap、taphold、swipe、swipeleft 和 swiperight。tap(轻击):一次快速完整的轻击后触发原创 2013-11-04 09:50:26 · 5383 阅读 · 0 评论 -
jQueryMobile的(十九) 动画事件(animationComplete)
animationCompletejQuery Mobile 提供了 animationComplete 事件,在页面转场等 jQuery Mobile 动画结束时触发。可以利用该事件,配合增加或删除一个 class 来做出自定义的过场效果(为新页面增加一个 class ,添加自定义的 CSS3 动画,使用 pagehide 判断旧页面已隐藏后再使用 animationComplete 判原创 2013-11-04 10:39:17 · 2659 阅读 · 0 评论 -
jQueryMobile的(十九) 页面显示/隐藏事件(pagebeforeshow、pagebeforehide、pageshow、pagehide)
页面显示/隐藏事件(pagebeforeshow、pagebeforehide、pageshow、pagehide)在jQuery Mobile里,无论一个page在什么时候处于显示或者隐藏状态,这两个事件都会在这个page触发.事件的触发依赖于该page是否正在显示或者隐藏,所以,当一个page过渡发生,会有4个事件被触发:每个page触发2个:pagebefores原创 2013-11-04 10:40:50 · 3981 阅读 · 0 评论 -
jQueryMobile的(二十) 滚屏事件(scrollstart、scrollstop)
scrollstart:当屏幕滚动开始的时候触发。苹果的设备会在滚屏时冻结DOM的操作,当滚屏结束时按队列执行这些dom操作,我们现在正在研究方法让苹果的设备在滚屏开始前执行dom操作。$(document).ready(function(){ $('body').bind('scrollstart', function(event) { // Add scroll start原创 2013-11-04 10:43:40 · 3181 阅读 · 0 评论 -
jQueryMobile的(十一) 按钮
创建按钮 data-role="button"给HTML元素添加 data-role="button" 属性。jQuery Moble就会给此元素增强为按钮样式。 Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标,为了减少下载的大小,Jquery Mobile包含的是的白色的图标sprite图片,并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰原创 2013-11-01 17:29:35 · 1924 阅读 · 0 评论 -
jQueryMobile的(十八) 快捷标签插件 Action Sheet
示例代码 ; actionsheet 插件应用程序 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> Fixed Positioning Example原创 2013-11-02 16:36:03 · 2272 阅读 · 1 评论 -
jQuery Molibe (三) 多页面跳转 page title 设置
在一个供jQuery Mobile使用的HTML页面中,可以包含一个元素属性“data-role”值为“page”的容器,也允许包含多个,从而形成多容器页面结构。容器之间各自独立,拥有唯一的Id号属性。页面加载时,以堆栈的方式同时加载;容器访问时,以内部链接“#” 加对应“Id”的方式进行设置。单击该链接时,jQuery Mobile 将在页面文档寻找对应Id号的容器,以动画效果切换至该容器中原创 2013-11-01 12:26:59 · 1842 阅读 · 0 评论 -
jQuery Mobile (四) 跳转动画效果
页面中页面切换动画:jQuery Mobile可以实现页面的切换效果。在同一个Html文件里面,可以定义多个page,切换时直接使用超链接就可以了。 第一个动画页面 这是首页内容界面 详情页面 系统默认显示page的内容。通过“data-transition”实现动画定义。jQuery Mobile实现了上下左右滑动,淡出,弹出原创 2013-11-01 12:29:59 · 3823 阅读 · 1 评论 -
jQuery Mobile (五) 预加载与 页面缓存
在开发移动应用程序时,对需要链接的页面进行预加载是十分有必要的。因为当一个链接的页面设置成预加载方式时,在当前页面加载完成之后,目标页面也被自动加载到当前文档中,用户单击就可以马上打开,大大加快了页面访问的速度。在新建的HTML 页面中添加一个元素,将该元素的“href”属性值设置为“text.html”,并将“data-prefetch”属性值设置为“true”,表示预加载元原创 2013-11-01 12:38:22 · 4291 阅读 · 0 评论 -
jQuery Mobile (一)hello jquerymobile
最近因为要用到 Jquerymobile 这一类东西, 所以利用一些空闲的时间开始学习Jquerymobile, 然后自己也是一边记录一边学习 。学习每个技术都是先写hello world,所以我这次第一次写的是hello jquerymobile。代码如下 Hello World <meta name="viewport" content="width=devic原创 2013-11-01 08:00:11 · 1324 阅读 · 1 评论 -
jQuery Mobile (六) header
在jquerymobile页面中,一般都会有一个header,在header一般我们除了设置标题 之外, 可以还会设置左右两边的按钮 如下: Hello World <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, u原创 2013-11-01 14:38:06 · 1402 阅读 · 0 评论 -
jQuery Mobile (七) 上下导航栏
导航栏 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />原创 2013-11-01 15:07:22 · 1013 阅读 · 0 评论 -
jQuery Mobile(二) 基本的页面框架模型
在jQuery Mobile中,有一个基本的页面框架模型,就是在页面中通过将一个 标记的“data-role”属性设置为“page”,形成一个容器或视图;而在这个容器中最直接的子节点应该就是“data-role”属性为“header”、“content”、“footer”3个子容器,分别形成了“标题”、“内容”、“页脚”3个组成部分,用于容纳不同的页面内容。通过一个简单实例进行展示:原创 2013-11-01 12:24:26 · 1547 阅读 · 0 评论 -
jQueryMobile的主题(八)(theme)和调板(swatches)
jQueryMobile是用CSS来控制在屏幕中的显示效果的,而在CSS文档中又包含两个主要的部分: 结构:用于控制元素(如按钮、tab等)的在屏幕中显示的位置,内外边距等。 主题:用于控制可视元素的视觉效果,例如字体、颜色、渐变、阴影、圆角等。你可以通过修改主题来控制可视元素(如按钮)的效果。 jQueryMobile默认的CSS文件中包含五个调板(原创 2013-11-01 15:20:50 · 1458 阅读 · 0 评论 -
jQueryMobile的(九) 网格布局
jQuery Mobile提供的CSS样式“ui-grid”可以实现内容的网格布局。该样式有4种预设的配置布局:“ui-grid-a”、“ui-grid-b”、“ui-grid-c”、“ui-grid-d”,分别对应两列、三列、四列、五列的网格布局形式,可以最大范围满足页面多列的需求。使用网格布局时,整个宽度为100%,无任何“padding”和“margin”及背景色,因此不会影响到其他原创 2013-11-01 16:33:10 · 2283 阅读 · 0 评论 -
jQueryMobile的(十二) 列表
1..基本的带连接的列表 列表的代码为一个含 data-role="listview" 属性无序列表ul。Jquery Mobile会把所有必要的样式(列表项右出现一个向右箭头,并使列表与屏幕同宽等)应用在列表上: Acura Audi BMW2.数字排序的列表通过有序列表ol可以创建数字排序的列表用来表现顺序序列比如说搜索结果或者电影排行榜时非常有原创 2013-11-01 20:48:16 · 2166 阅读 · 0 评论 -
jQueryMobile的(二十一) 方向改变事件(orientationchange)
当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时,你的回调函数可以加入第二个参数,作用为描述设备横或纵向的属性,"portrait"或;landscape"。这些值也会作为class值加入到html的元素中,使你可以通过css中的选择器改变他们的样式。注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。手持设备方向改变时执行原创 2013-11-04 10:46:45 · 1837 阅读 · 0 评论