jQuery mobile 学习10 布局的设置

来源：互联网发布：电脑wifi热点软件编辑：程序博客网时间：2024/06/05 01:09
<%@ 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>
0 0