HTML5 经量级框架 jQuery Mobile (Button,Icon,分组功能button,具有内联样式的button) - 7.4
| 1.button data-role="button"2.icon data-icon="arrow-l"3.icon 图标位置 data-iconpos="right" left right top bottom 4.自定义ICON ui-icon-myicon-name... |
1.button data-role="button"
2.icon data-icon="arrow-l"
3.icon 图标位置 data-iconpos="right" left right top bottom
4.自定义ICON ui-icon-myicon-name
5具有内联样式的button data-inline="true"
6.分组功能button
<div data-role="controlgroup"><a href="#" data-role="button" data-theme="a">返回</a>
<a href="#" data-role="button" data-theme="b">首页</a>
<a href="#" data-role="button" data-theme="c">前进</a>
</div>
HTML5
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="jquery.mobile-1.3.1.css">
<script type="text/javascript" charset="utf-8" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<section data-role="page" id="firstview" data-title="第一个视图" data-theme="a">
<header data-role="header" data-theme="b"><h1>第一个视图</h1></header>
<article data-role="content">
<div data-role="controlgroup">
<a href="#" data-role="button" data-theme="a">返回</a>
<a href="#" data-role="button" data-theme="b">首页</a>
<a href="#" data-role="button" data-theme="c">前进</a>
</div>
<a href="#secondview" data-rel="dialog" data-transition="pop" data-role="button">切换到第二个View</a>
<input type="button" name="button 类型 input"/>
<input type="submit" name="submit 类型 input"/>
<input type="reset" name="reset 类型 input"/>
<input type="image" name="image 类型 input"/>
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="right">左箭头 arrow-l</a>
<a href="#" data-role="button" data-icon="arrow-r" data-inline="true">右箭头 arrow-r</a>
<a href="#" data-role="button" data-icon="arrow-u">上箭头 arrow-u</a>
<a href="#" data-role="button" data-icon="arrow-d">下箭头 arrow-d</a>
<a href="#" data-role="button" data-icon="delete">icon arrow-l</a>
<a href="#" data-role="button" data-icon="plus">icon plus</a>
<a href="#" data-role="button" data-icon="minus">icon minus</a>
<a href="#" data-role="button" data-icon="check">icon check</a>
<a href="#" data-role="button" data-icon="gear">icon check</a>
<a href="#" data-role="button" data-icon="refresh">icon refresh</a>
<a href="#" data-role="button" data-icon="forward">icon forward</a>
<a href="#" data-role="button" data-icon="back">icon back</a>
<a href="#" data-role="button" data-icon="grid">icon grid</a>
<a href="#" data-role="button" data-icon="star">icon star</a>
<a href="#" data-role="button" data-icon="alert">icon alert</a>
<a href="#" data-role="button" data-icon="info">icon info</a>
<a href="#" data-role="button" data-icon="home">icon home</a>
<a href="#" data-role="button" data-icon="search">icon search</a>
</article>
<footer data-role="footer" data-theme="c"><h1>页脚</h1></footer>
</section>
<section data-role="page" id="secondview" data-title="第二个视图">
<header data-role="header">第二个视图</header>
<article data-role="content"><a href="#firstview" data-transition="flip">切换到第一个View</a></article>
<footer data-role="footer">页脚</footer>
</section>
</body>
</html>
(转发请注明转自:学PHP)
- 驴途网-技术小结1 (2013-05-24 23:48:12)
- 移动平台前端开发总结（针对iphone，Android等手机） (2013-05-24 23:48:13)
- 一款响应式的（电子报）Newsletter 模板 – Antwort (2013-05-24 23:48:13)
- IE下CSS问题及解决 (2013-05-24 23:48:13)
- CSS中#testid.testclass与#testid .testclass的区别 (2013-05-24 23:48:13)
- 图片分屏加载插件 (2013-05-24 12:48:15)
- 不刷新页面改变验证码的两种方法 (2013-05-24 12:48:15)
- 40 Bootstrap Tools and Generators for Web Developers (2013-05-24 12:48:14)
- aspx 页面根据不同的文本框按下的 回车 执行 不同按钮的服务器端 click事件(浏览器兼容,火狐浏览器) (2013-05-24 12:48:14)
- Unity3d学习之脚本工程及脚本断点调试 (2013-05-24 12:48:14)
- 1楼 学phper说： 2015-12-27 05:41:33
-
1
- 2楼 -1'说： 2015-12-27 05:41:34
-
1
