码迷,mamicode.com
首页 > Web开发 > 详细

jQuery mobile 学习10 布局的设置

时间:2015-02-27 13:34:25      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:jquery mobile   布局   

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <link rel="stylesheet" href="./css/jquery.mobile-1.3.0.css"/>
        
    <script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="./js/jquery.mobile-1.3.0.js"></script>

	<style type="text/css">
		.colorout{background:red;}
		.colorin{background:lightblue;}
	</style>
</head>

<body>
   <div data-role="page" id="a">
   	<div data-role="header" data-position="fixed" data-theme="b">
   		<h2>
   			a页面的标题
   		</h2>
   	</div>
   	
   	
   	<!-- 
   	class="ui-grid-a" 添加了这个属性,JQM就可以识别出,这个div中的布局是2列的
   	class="ui-block-a" 和 class="ui-block-b"  
   	这两个属性添加上就可以让JQM知道,哪个是左边的,哪个是右边的,这个两个属性的顺序不能乱
   	里面的两个区块是没有间距的
   	
   	JQM一般的布局需求控制在五列之内,如果需要更多的布局,可以试着使用嵌套
   	 -->
   	<div data-role="content">
   		<h2>JQM的布局</h2>
   		<br>
   		<h3>两列布局</h3>
		<div class="ui-grid-a colorout">
			<div class="ui-block-a colorin">a</div>
			<div class="ui-block-b colorin">b</div>
		</div>
		
		<br>
		
   		<h3>三列布局</h3>
		<div class="ui-grid-b colorout">
			<div class="ui-block-a colorin">left</div>
			<div class="ui-block-b colorin">middle</div>
			<div class="ui-block-c colorin">right</div>
		</div>
		
		<h3>四列布局</h3>
		<div class="ui-grid-c colorout">
			<div class="ui-block-a colorin">A</div>
			<div class="ui-block-b colorin">B</div>
			<div class="ui-block-c colorin">C</div>
			<div class="ui-block-d colorin">D</div>
		</div>
		
		<br>
		
		<h3>五列布局</h3>
		<div class="ui-grid-d colorout">
			<div class="ui-block-a colorin">A</div>
			<div class="ui-block-b colorin">B</div>
			<div class="ui-block-c colorin">C</div>
			<div class="ui-block-d colorin">D</div>
			<div class="ui-block-e colorin">E</div>
		</div>
		
		
		<br>
		
		<h3>嵌套列布局</h3>
		
		<div class="ui-grid-a colorout">
			<div class="ui-block-a colorin">
				<div class="ui-grid-d colorout">
					<div class="ui-block-a colorin">A</div>
					<div class="ui-block-b colorin">B</div>
					<div class="ui-block-c colorin">C</div>
					<div class="ui-block-d colorin">D</div>
					<div class="ui-block-e colorin">E</div>
				</div>			
			</div>
			<div class="ui-block-b colorin">
				<div class="ui-grid-b colorout">
					<div class="ui-block-a colorin">left</div>
					<div class="ui-block-b colorin">middle</div>
					<div class="ui-block-c colorin">right</div>
				</div>
			</div>
		</div>
		
		
		
		
   	</div>
   	<div data-role="footer" data-theme="a" data-position="fixed">
   		<h2>a页面的底部</h2>
   	</div>
   </div>

</body>
</html>

jQuery mobile 学习10 布局的设置

标签:jquery mobile   布局   

原文地址:http://blog.csdn.net/responsecool/article/details/43966715

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!