jquery-mobile按钮

最新推荐文章于 2024-09-28 07:20:19 发布

youyo0u380

最新推荐文章于 2024-09-28 07:20:19 发布

阅读量305

点赞数

分类专栏： mobile jquery插件文章标签： jquery mobile jquery插件

本文链接：https://blog.csdn.net/youyo0u380/article/details/44143471

版权

mobile 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

jquery插件

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery-mobile/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.11.2.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.4.5.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>在此处插入标题</h1>
  </div>
  <div data-role="content"> 
    <a href="#" class="ui-btn">Anchor</a>
    <button class="ui-btn">Button</button>
    <input type="button" value="Button">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
  </div>
  <div data-role="footer">
    <h1>在此处插入页脚文本</h1>
  </div>
</div>
</body>
</html>

Basic markup基本标记

<a href="#" class="ui-btn">Anchor</a>
    <button class="ui-btn">Button</button>
    <input type="button" value="Button">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">

Basic markup基本标记

Corners边界

<a href="#" class="ui-btn ui-corner-all">Anchor</a>
<button class="ui-btn ui-corner-all">Button</button>

Corners边界
- Shadow阴影

<a href="#" class="ui-btn ui-shadow">Anchor</a>
<button class="ui-btn ui-shadow">Button</button>

Shadow阴影
- Inline内嵌

<a href="#" class="ui-btn ui-btn-inline">Anchor</a>
<button class="ui-btn ui-btn-inline">Button</button>

Inline内嵌

Theme主题

<a href="#" class="ui-btn">Anchor - Inherit</a>
<a href="#" class="ui-btn ui-btn-a">Anchor - Theme swatch A(主题样本A)</a>
<a href="#" class="ui-btn ui-btn-b">Anchor - Theme swatch B(主题样本B)</a>
<button class="ui-btn">Button - Inherit</button>
<button class="ui-btn ui-btn-a">Button - Theme swatch A</button>
<button class="ui-btn ui-btn-b">Button - Theme swatch B</button>

Theme主题

Icons图标
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Anchor</a> <button class="ui-btn ui-icon-delete ui-btn-icon-left">Button</button>