jQuery mobile 学习03 按钮基础

浏览数：23 / 时间：2015年06月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>
	<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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。