<%@ 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>
<title>JQM TITLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jqm/jquery.mobile-1.4.5.css" />
<script src="jqm/jquery-1.11.2.js"></script>
<script src="jqm/jquery.mobile-1.4.5.js"></script>
<style type="text/css">
.ui-icon-custom{background:;}
</style>
</head>
<body>
<div data-role="page" id="index" data-add-back-btn="true">
<div data-role="header" data-add-back-btn="false">
<h1>页面标题区域</h1>
</div>
<div data-role="content">
<p>页面内容区域</p>
<br/>
<br/>
<!-- 给按钮添加图标，及调整图标的显示位置 -->
<a data-role="button" data-icon="home" >按钮一</a>
<a data-role="button" data-icon="back" data-iconpos="right">按钮二</a>
<a data-role="button" data-icon="refresh" data-iconpos="top">按钮三</a>
<a data-role="button" data-icon="delete" data-iconpos="bottom">按钮四</a>
<a data-role="button" data-icon="plus" data-iconpos="notext">按钮五</a>
<br>
<!-- 按钮显示在一行上显示，如果数量比较多，就会折行 -->
<a data-role="button" data-icon="minus" data-inline="true">按钮六</a>
<a data-role="button" data-icon="search" data-inline="true">按钮七</a>
<a data-role="button" data-icon="alert" data-inline="true">按钮八</a>
<br>
<!-- 自定义一个图片样式 的按钮 注意head区域的自定义样式代码结合 -->
<a data-role="button" data-icon="custom">按钮九</a>
<br>
<!-- 设置分组按钮 -->
<!-- 默认垂直方向排列 -->
<div data-role="controlgroup">
<a data-role="button">组内按钮一</a>
<a data-role="button">组内按钮二</a>
<a data-role="button">组内按钮三</a>
<a data-role="button">组内按钮四</a>
</div>
<!-- 水平方向排列 屏幕宽度太小自动折行 按钮长度和文字长度有关系-->
<div data-role="controlgroup" data-type="horizontal">
<a data-role="button">一</a>
<a data-role="button">二</a>
<a data-role="button">三</a>
<a data-role="button">水平组内按钮四</a>
<a data-role="button">水平组内按钮五</a>
</div>
</div>
<div data-role="footer">
<h2>页面底部区域</h2>
</div>
</div>
</body>
</html>
时间： 2024-11-03 21:04:32