文章分类 -  JQuery Mobile

摘要:列表用来展示数据,导航,结果列表以及数据条目,所以Jquery Mobile提供了多种的列表类型以适应大多数的设计模式。1、基本的带连接的列表 列表的代码为一个含 data-role="listview" 属性无序列表ul。Jquery Mobile会把所有必要的样式(列表项右出现一个向右箭头,并使列表与屏幕同宽等)应用在列表上,使其成为易于触摸的控件。当你点击列表项时,Jquery Mobile 会触发该列表项里的第一个链接,通过ajax请求链接的URL地址,在DOM中创建一个新的页面并产生页面转场效果。如:<ul data-role="listview& 阅读全文
posted @ 2013-05-06 17:27 丿暖。风? 阅读(479) 评论(0) 推荐(0)
摘要:在page的区域内,可以通过给链接加data-role="button"的属性样式化为按钮。Jquery Mobile会给链接加一些必要的class来把他表现为按钮。如:<a href="index.html" data-role="button">Link button</a>为了容易的样式化按钮,Jquery Mobile自动把type为submi,reset,button或image的按钮元素或输入元素样式化为按钮,所以没有必要增加data-role="button"的属性。给链接添加 阅读全文
posted @ 2013-05-06 17:27 丿暖。风? 阅读(247) 评论(0) 推荐(0)
摘要:因为屏幕通常都比较窄,所以使用多栏布局的方法在移动设备上不是推荐的方法。但是总有时候你会想要把一些小的元素并排放置(比如按钮,或导航标签),Jquery Mobile框架提供了一种简单的方法构建基于css的分栏布局,叫做ui-grid,Jquery Mobile提供了两种预设的配置布局:两栏布局(class 含有 ui-grid-a)和三栏布局 (class 含有 ui-grid-b)—几乎可满足需要栏布局的任何情况。网格是100%宽的,不可见(没有背景或边框),也没有padding和margin,所以它们不会影响内部元素的样式。 要构建两栏的布局(50/50%),先构建一个父容器,... 阅读全文
posted @ 2013-05-06 17:27 丿暖。风? 阅读(203) 评论(0) 推荐(0)
摘要:在Jquery Mobile中,有两种标准的工具栏:头部栏和尾部栏头部栏的作用为网站的标题,通常是移动网站页面的第一个元素,一般包括页面的标题文字和最多两个按钮。尾部栏通常是移动网站页面的最后一个元素,在内容和作用上比头部栏更自由一些,但一般也要包含文字和按钮。在头部栏或尾部栏里放置一个水平的导航栏或选项卡栏的做法是很普遍的,所以Jquery Mobile包含导航栏组件,即把无序列表ul转化成水平的按钮栏,使用也非常方便。工具栏定位的设置:默认情况下,工具栏的定位的属性为"inline",在这种模式下,头部栏和尾部栏通过html自动的文档流放置。固定的定位模式可以使工具条在 阅读全文
posted @ 2013-05-06 17:27 丿暖。风? 阅读(346) 评论(0) 推荐(0)
摘要:一个完整的独立页面实例: 在body标签内,移动设备上每一个视图或者"page"被一个带有 data-role="page"的容器(通常是div)所标示,在page容器内,任何有效的html标签都可以使用,但是对于Jquery Mobile的典型页面来说,page容器的直接子结点应该为使用"data-role"标记属性为"header""content"和"footer"的3个容器,集合在一起后,这就是一个标准的Jquery Mobile页面了。页面间的跳转: 主要是指在移动 阅读全文
posted @ 2013-05-06 17:26 丿暖。风? 阅读(227) 评论(0) 推荐(0)
摘要:因为JqueryMobile的页面是一个大的div框,不同于普通的页面,所以处理起来就比较特殊。譡给每个page绑定pageinit事件时,有如下方法:$('#aboutPage').live('pageinit', function (event) {alert("pageinit")});$('#aboutPage').bind('pageinit', function (event) {alert("pageinit")});$(document).bind('pageinit 阅读全文
posted @ 2012-12-07 11:00 丿暖。风? 阅读(172) 评论(0) 推荐(0)