<%@ 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 佈局的設置
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
jquerymobile圖表插件支持
很久沒寫博客了，終於有點時間來分享點東西。 最近在做一個移動設備上的產品，之中用到圖表，在移動設備上用的，所以要儘量小巧，還要做觸摸支持。 我們選用了jqflot然後我自己寫了觸摸支持，下面