jQuery mobile 学习03 按钮基础

来源：互联网发布：航空业未来知乎编辑：程序博客网时间：2024/06/16 03:40
<%@ 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>
0 0