jQuery Mobile 按钮

作者: 蝴蝶结199007 | 来源:发表于2017-06-22 17:33 被阅读23次

jQuery Mobile 按钮
JQuery mobile
jQueryMobile总结
XDH_LESSON9
兄弟会精英班 - 学习笔记（九）
jquery常用cdn
jQuery Mobile初识
2016-08-16 jQuery Mobile
jQuery mobile
XDL_NO.9 jQuery Mobile

创建按钮

使用 <button> 元素
使用 <input> 元素
使用 data-role="button" 的 <a> 元素，<a href="#" data-role="button">按钮</a>

推荐使用 data-role="button" 的 <a> 元素来创建页面之间的链接，而 <input> 或 <button> 元素用于表单提交。

data-* | 描述

| :-: | -:
data-inline="true" | 使元素形成行内按钮，<a href="#" data-role="button" data-inline="true">按钮</a>
data-role="controlgroup 与 data-type="horizontal / vertical | 规定水平或垂直地组合按钮
data-rel="back" | 后退按钮
data-corners | true / false，规定按钮是否有圆角
data-mini | true / false，规定是否是小型按钮
data-shadow | true / false，规定按钮是否有阴影

组合按钮
data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合按钮；
默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角。

后退按钮
如需创建后退按钮，请使用 data-rel="back" 属性（会忽略锚的 href 值）

实践

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Resource-type" content="Document"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>button</title>
    <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
    <style>
        .line{height:0;border-top:1px solid #2ad;margin:20px 0;}
    </style>
</head>
<body>
    <button>button</button>
    <input type="button" value="input"/>
    <a href="#" data-role="button">a</a>
    <div class="line"></div>
    <!--行内按钮 data-inline="true"-->
    <a href="#" data-role="button" data-inline="true">行内按钮</a>
    <div class="line"></div>
    <!--组合按钮-->
    <!--水平组合按钮-->
    <div data-role="controlgroup" data-type="horizontal">
        <a href="#anylink" data-role="button">按钮 1</a>
        <a href="#anylink" data-role="button">按钮 2</a>
        <a href="#anylink" data-role="button">按钮 3</a>
    </div>
    <!--垂直组合按钮-->
    <div data-role="controlgroup" data-type="vertical">
        <a href="#anylink" data-role="button">按钮 1</a>
        <a href="#anylink" data-role="button">按钮 2</a>
        <a href="#anylink" data-role="button">按钮 3</a>
    </div>
    <div class="line"></div>
    <!--后退按钮-->
    <a href="#" data-role="button" data-rel="back">返回</a>
    <div class="line"></div>
    <!--data-* 属性-->
    <!--是否有圆角-->
    <a href="#" data-role="button" data-corners="false">没有圆角的按钮</a>
    <!--小型按钮-->
    <a href="#" data-role="button" data-mini="true">小型按钮</a>
    <!--没有阴影的按钮-->
    <a href="#" data-role="button" data-shadow="false">没有阴影的按钮</a>
</body>
</html>