`
流浪鱼
  • 浏览: 1637308 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery Mobile 网格布局

 
阅读更多

外部div使用class="ui-grid-a",而内部使用 class="ui-block-a"

  <div data-role="page">
<div data-role="header">
    <h1>头部栏标题</h1></div>
    <div class="ui-grid-a"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-b h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-b h60">B</div>
	  </div>
	</div> 
	<div class="ui-grid-b"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-c h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-c h60">B</div>
	  </div>
	  <div class="ui-block-c">
		<div class="ui-bar ui-bar-c h60">C</div>
	  </div>
	</div> 
	<div class="ui-grid-c"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-d h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-d h60">B</div>
	  </div>
	  <div class="ui-block-c">
		<div class="ui-bar ui-bar-d h60">C</div>
	  </div>
	  <div class="ui-block-d">
		<div class="ui-bar ui-bar-d h60">D</div>
	  </div>
	</div> 
	<div class="ui-grid-d"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-e h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-e h60">B</div>
	  </div>
	  <div class="ui-block-c">
		<div class="ui-bar ui-bar-e h60">C</div>
	  </div>
	  <div class="ui-block-d">
		<div class="ui-bar ui-bar-e h60">D</div>
	  </div>
	  <div class="ui-block-e">
		<div class="ui-bar ui-bar-e h60">E</div>
	  </div>
	</div> 
  <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>

 

 

 

分享到:
评论

相关推荐

    jQuery Mobile即学即用

    从应用结构和导航开始,分门别类地介绍了jQueryMobile为开发人员准备好的各种界面部件,包括列表视图、工具条、按钮、表单、网格布局等,还介绍了界面主题和配色,以及为jQueryMobile编程准备的事件、配置及响应式...

    jQuery Mobile即学即用,完整扫描版

    从应用结构和导航开始,分门别类地介绍了jQueryMobile为开发人员准备好的各种界面部件,包括列表视图、工具条、按钮、表单、网格布局等,还介绍了界面主题和配色,以及为jQueryMobile编程准备的事件、配置及响应式...

    jQueryMobile即学即用

    《jQueryMobile即学即用》着眼于移动Web应用开发实战,从应用结构和导航开始,分门别类地介绍了jQueryMobile为开发人员准备好的各种界面部件,包括列表视图、工具条、按钮、表单、网格布局等,还介绍了界面主题和...

    Bootstrap与jQuery UI框架设计(前端开发工程师系列)

    操作案例1:制作jQuery Mobile基本页面 1.3.4 jQuery Mobile对话框 1.4 与电话整合 操作案例2:制作商家信息展示页面 2 jQuery Mobile UI组件 2.1 网格系统 2.2 格式化内容 2.3 可折叠的内容 2.4 工具栏 操作案例3:...

    详解jQuery移动页面开发中的ui-grid网格布局使用

    Jquery Mobile 框架提供了一种简单的方法构建基于css 的分栏布局,叫做ui-grid Jquery Mobile 提供有四个预设的布局,可以在任何情况下都需要列 两列(使用ui-grid-a类) 三列(使用ui-grid-b类) 四列(使用ui-...

    简要了解jQuery移动web开发的响应式布局设计

    该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现自己的响应式设计。对不同屏幕分辨率的反应方式。 没有自定义样式,我们的电网将3列的布局在所有的屏幕宽度: 在我们的自定义样式,我们...

    front-Onlineresume:前端项目 2 - 在线简历 (jQuery)

    为 index.html 使用 Bootstrap 的网格系统、导航栏和其他默认布局样式功能。 使用 JSON 创建对象和变量。 例如: var bio = { "name" : "Yonglin Zhong", "role" : "Web Developer", "contacts" :{ "mobile...

    Bootstrap用户手册

    作为源自Twitter的一个开源框架,而且可以从GitHub上自由下载,Bootstrap推崇“移动优先”(Mobile First)的设计理念,还支持动态调整网页布局、创建响应式网站。只要稍微懂一些HTML、CSS和JavaScript,就可以创建...

    PHP 代码自动生成工具 e-World Tech PHPMaker 2020.0.3 英文特别免费版.rar

    jQuery更新(jQuery Mobile已删除) jQuery文件上传已更新 JsRender更新了 tinyMCE和CKEditor扩展(仅限注册用户)使用最新版本更新(不再提供FCKEditor扩展) DOMPDF扩展已更新 mobile_detect.php已更新 PHPExcel...

Global site tag (gtag.js) - Google Analytics