Bouton jQuery Mobile
Les applications mobiles sont construites sur de simples éléments pointer-cliquer que vous souhaitez afficher.
Création de boutons dans jQuery Mobile
Dans jQuery Mobile, les boutons peuvent être créés de trois manières :
À l'aide de l'élément <button> ;
utilise l'élément <input>
utilise l'élément <a>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>按钮</h1>
</div>
<div data-role="main" class="ui-content">
<button class="ui-btn">按钮</button>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>
Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>按钮</h1>
</div>
<div data-role="main" class="ui-content">
<input type="button" value="按钮">
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>
Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>按钮</h1>
</div>
<div data-role="main" class="ui-content">
<a href="#" class="ui-btn">按钮</a>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>
Exécuter l'instance»Cliquez sur « Exécuter l'instance " bouton pour voir l'exemple en ligne
Boutons de navigation
Pour créer un lien entre les pages via des boutons, utilisez l'élément <a> avec l'attribut data-role="button" :
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>按钮</h1> </div> <div data-role="main" class="ui-content"> <p>欢迎!</p> <a href="#pagetwo" class="ui-btn">访问第二个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>按钮</h1> </div> <div data-role="main" class="ui-content"> <p>再见!</p> <a href="#pageone" data-role="button">返回第一个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Boutons en ligne
Par défaut, les boutons occupent toute la largeur de l'écran. Si vous souhaitez un bouton aussi large que le contenu, ou si vous souhaitez afficher deux boutons ou plus côte à côte, ajoutez data-inline="true":
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>普通 / 默认按钮:</p> <a href="#pagetwo" class="ui-btn">访问第二个页面</a> <p>内联按钮:</p> <a href="#pagetwo" class="ui-btn ui-btn-inline">访问第二个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>内联按钮 (一个接一个显示):</p> <a href="#pageone" class="ui-btn ui-btn-inline">返回第一个页面</a> <a href="#pageone" class="ui-btn ui-btn-inline">返回第一个页面</a> <a href="#pageone" class="ui-btn ui-btn-inline">返回第一个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
combinaison bouton
jQuery Mobile fournit un moyen simple de regrouper des boutons.
Veuillez utiliser l'attribut data-role="controlgroup" et data-type="horizontal|vertical" ensemble pour spécifier s'il faut combiner les boutons horizontalement ou verticalement :
Exemple
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>组合按钮</h1> </div> <div data-role="main" class="ui-content"> <div data-role="controlgroup" data-type="horizontal"> <p>水平组合按钮:</p> <a href="#" class="ui-btn">按钮 1</a> <a href="#" class="ui-btn">按钮 2</a> <a href="#" class="ui-btn">按钮 3</a> </div><br> <div data-role="controlgroup" data-type="vertical"> <p>垂直组合按钮 (默认):</p> <a href="#" class="ui-btn">按钮 1</a> <a href="#" class="ui-btn">按钮 2</a> <a href="#" class="ui-btn">按钮 3</a> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
默认情况下,组合按钮是垂直组合,它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角,以便它们组合在一起的时候创建一个漂亮的外观。 |
Bouton Retour
Pour créer un bouton retour, utilisez l'attribut data-rel="back" (cela ignore la valeur href de l'ancre) :
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>访问第二个页面</h1> </div> <div data-role="main" class="ui-content"> <a href="#pagetwo" class="ui-btn">访问第二个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>返回按钮实例</h1> </div> <div data-role="main" class="ui-content"> <a href="#" class="ui-btn" data-rel="back">返回</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Bouton de lien Plus instances
类 | 描述 | 实例 |
---|---|---|
ui-btn-b | 修改按钮颜色为黑色,字体为白色(默认为灰色背景,黑色字体)。 | 尝试一下 |
ui-corner-all | 为按钮添加圆角 | 尝试一下 |
ui-mini | 制作小按钮 | 尝试一下 |
ui-shadow | 为按钮添加阴影 | 尝试一下 |
Si vous devez utiliser plus de styles, séparez chaque classe de style par un espace, tel que : class="ui- btn ui-btn-inline ui-btn-corner-all ui-shadow"
Par défaut, le bouton <input> a des coins arrondis et des effets d'ombre. <a> L'élément <button> |