Tutoriel jQuery...SE CONNECTER
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Tutoriel jQuery Mobile Classique
←
→
auteur：php.cn  temps de mise à jour：2022-04-11 13:58:34

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>

<bouton>

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">
    <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

<input>

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">
    <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

<a>

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="#" 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

lamp默认情况下，组合按钮是垂直组合，它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角，以便它们组合在一起的时候创建一个漂亮的外观。

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为按钮添加阴影尝试一下

NoteSi 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"
Note如果你需要使用更多的样式，每个样式类使用空格隔开，如： class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"

默认情况下 <input> 按钮有圆角及阴影效果。 <a> 和 <button> 元素没有。

Par défaut, le bouton <input> a des coins arrondis et des effets d'ombre. <a> L'élément <button>

Pour un ensemble plus complet de classes CSS, consultez notre manuel de référence des classes CSS jQuery Mobile.

Le chapitre suivant montre comment ajouter une icône à un bouton.
<🎜>
←
→
soumettre

Site Web PHP chinois

MaisonMaisonCoursCoursArticleArticleQuestions et réponsesQuestions et réponsesDictionnaireDictionnaireManuelManuelTéléchargerTéléchargerrechercherechercheAPPTélécharger APPTélécharger