您好,欢迎光临手机模板网! 微信游戏 时尚MJ原创女装

手机模板-57jrw网站模板

关注微信公众号
时尚MJ原创女装

jQuery Mobile教程-基础篇-网格篇

2014-4-13 15:47| 发布者: 57剑人网| 查看: 1678| 评论: 3

摘要: 本文主要看一下jQuery Mobile体系中的grid组件,我们采用"提问●回答"的方式来初步地了解一下:

本文主要看一下jQuery Mobile体系中的grid组件,我们采用"提问●回答"的方式来初步地了解一下:

1、如何设置2列布局?

示例:

<!-- grid container start -->
<div class="ui-grid-a">

	<!-- grid block start -->
	<div class="ui-block-a">
		我是左边的部分
	</div>
	<!-- grid block end -->

	<!-- grid block start -->
	<div class="ui-block-b">
		我是右边的部分
	</div>
	<!-- grid block end -->

</div>
<!-- grid container end -->

图示:

说明:
1、给grid container增加ui-grid-a标示2列布局

2、如何设置3列布局?

示例:

<!-- grid container start -->
<div class="ui-grid-b">

	<!-- grid block start -->
	<div class="ui-block-a">
		我是左边的部分
	</div>
	<!-- grid block end -->

	<!-- grid block start -->
	<div class="ui-block-b">
		我是中间的部分
	</div>
	<!-- grid block end -->

	<!-- grid block start -->
	<div class="ui-block-c">
		我是右边的部分
	</div>
	<!-- grid block end -->

</div>
<!-- grid container end -->

图示:

说明:
1、给grid container增加ui-grid-b标示3列布局

3、如何设置4列布局?

示例:

<!-- grid container start -->
<div class="ui-grid-c">

	<!-- grid block start -->
	<div class="ui-block-a">
		我是左边的部分
	</div>
	<!-- grid block end -->

	<!-- grid block start -->
	<div class="ui-block-b">
		我是中间1的部分
	</div>
	<!-- grid block end -->

	<!-- grid block start -->
	<div class="ui-block-c">
		我是中间2的部分
	</div>
	<!-- grid block end -->

	<!-- grid block start -->
	<div class="ui-block-d">
		我是右边的部分
	</div>
	<!-- grid block end -->

</div>
<!-- grid container end -->

图示:

说明:
1、给grid container增加ui-grid-c标示4列布局

很多同学看到这里面就问了,后面还能支持5列?6列?...还是更多?
其实jquery mobile有自身的一套体系,我们可以看看下面的图

grid container的className的配置如下:

grid block的className的配置如下:


小困惑

我想想

好笔记

学到啦

赶紧学
发表评论

最新评论

引用 客服小如 2015-7-29 16:22
学习了
引用 黄灿灿 2015-6-25 11:11
:lol很赞,值得看下
引用 hirosueryoko 2014-12-8 16:56
有用

查看全部评论(3)

关于本站 | 联系我们 | 广告服务 | 版权声明 | 申请友链 | 网站地图 | 金币规则 | 用户投稿    

本站非营利性为目的免费为大家提供最好最全的大量精品响应式网站模板、手机模板、DIV+CSS模板、html5网站模板等实用资源,

网站内容是站长从互联网收集整理而来(包括原创及网友提供),旨在为朋友们在工作或学习时提高效率、节省时间。

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

如有侵犯到你的版权,请邮件告知,我们会在三天内处理完成。客服QQ:点击这里给我发消息  Email:278910933@qq.com

Copyright   ©2014  版权所有  57jrw.com  粤ICP备14037672号  技术支持:【亮剑设计开发工作室】