jQuery mobile 学习03 按钮基础

<%@ 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>

含泪播种的人一定能含笑收获。

jQuery mobile 学习03 按钮基础

相关文章:

你感兴趣的文章:

标签云: