Tutoriel jQuery...login
简体中文（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

Barre de navigation jQuery Mobile


Une barre de navigation est un ensemble de liens disposés horizontalement, généralement contenus dans un en-tête ou un pied de page.

Par défaut, les liens dans la barre de navigation deviendront automatiquement des boutons (data-role="button" n'est pas obligatoire).

Utilisez l'attribut data-role="navbar" pour définir la barre de navigation :

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 data-role="navbar">
      <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">第二页</a></li>
        <li><a href="#">搜索</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>我的内容..</p>
  </div>

  <div data-role="footer">
    <h1>我的底部</h1>
  </div>
</div> 


</body>
</html>

Exécutez le instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

lampe>< /th> Par défaut, un bouton est aussi large que son contenu. Utilisez une liste non ordonnée pour diviser uniformément la largeur des boutons : 1 bouton prend 100 % de la largeur, 2 boutons prennent 50 % de la largeur chacun, 3 boutons prennent 33,3 % de la largeur chacun, et ainsi de suite. Cependant, si vous spécifiez plus de 5 boutons dans la barre de navigation, celle-ci sera divisée en plusieurs lignes (voir « Plus d'exemples »).
lamp默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度：1 个按钮占 100% 宽度，2 个按钮则各占 50% 的宽度，3 个按钮则每个占 33,3% 的宽度，依此类推。然而，如果您在导航栏中指定了超过 5 个按钮，将会拆成多行（查看"更多实例"）。

Icône du bouton de navigation

Nous pouvons utiliser l'attribut data-icon pour ajouter une icône au bouton de navigation :

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 data-role="navbar">
      <ul>
        <li><a href="#" data-icon="home">主页</a></li>
        <li><a href="#" data-icon="arrow-r">第二页</a></li>
        <li><a href="#" data-icon="search">搜索</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>我的内容..</p>
  </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

L'attribut data-icon utilise les mêmes valeurs que les classes CSS du chapitre sur les icônes. Utilisation de la classe CSS class="ui-icon-value", L'attribut data-icon utilise la méthode data-icon="value".




属性值描述图标
data-icon="home"首页nyhome3.jpg
data-icon="arrow-r"右边箭头arrow-r.jpg
data-icon="search"搜索search.jpg
<🎜><🎜>
Valeur de l'attributDescriptionIcône
data-icon="home"Page d'accueilnyhome3.jpg
data-icon="arrow-r"Flèche droite< /td>arrow-r.jpg
data-icon="search"Recherchesearch.jpg

Pour un manuel de référence complet de toutes les icônes de boutons jQuery Mobile, visitez notre manuel de référence des icônes jQuery Mobile.

Icône de position

Tout comme la classe "ui-btn-icon-position" (description détaillée dans le chapitre icône), vous pouvez définir l'icône Position de l'affichage : en haut, à droite, en bas ou à gauche.

La position de l'icône est définie sur le conteneur de la barre de navigation, utilisez l'attribut data-iconpos pour spécifier la position :

属性值描述实例
data-iconpos="top"图标顶部对齐尝试一下
data-iconpos="right"图标右侧对齐尝试一下
data-iconpos="bottom"图标底部对齐尝试一下
data-iconpos="left"图标左侧对齐尝试一下
 默认情况， 导航按钮的图标位于文本之上 (data-iconpos="top")。

Bouton d'activation

Lorsqu'un lien dans la barre de navigation est cliqué, il aura l'apparence d'être sélectionné (appuyé).

Si vous souhaitez obtenir cet aspect lorsque le lien n'est pas cliqué, utilisez class="ui-btn-active":

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 data-role="navbar">
      <ul>
        <li><a href="#" class="ui-btn-active" data-icon="home">首页</a></li>
        <li><a href="#pagetwo" data-icon="arrow-r">页面二</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>本例设有 ui-btn-active 类，请注意首页按钮时突出显示的（已选）。</p>
    <p>如果点击页面二，您会注意到按钮不会突出显示。</p>
  </div>

  <div data-role="footer">
    <h1>我的页脚</h1>
  </div> 
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#pageone" data-icon="home">首页</a></li>
        <li><a href="#" data-icon="arrow-r">页面二</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>本页中没有被预选的按钮（突出显示）。</p> 
    <p>如需让按钮被选的外观表示当前正在访问页面，请返回导航栏教程，继续向下阅读。</p>
  </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

Pour plusieurs pages, vous souhaiterez peut-être l'apparence cochée de chaque bouton pour représenter la page actuelle sur laquelle se trouve l'utilisateur. Pour ce faire, ajoutez "ui-state-persist" et "ui-btn-active" à la classe liée :

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 data-role="navbar">
      <ul>
        <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="home">首页</a></li>
        <li><a href="#pagetwo" data-icon="arrow-r">页面二</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>本例设有 ui-btn-active 类，请注意首页按钮时突出显示的（已选）。</p>
    <p>请点击页面二按钮，看看会发生什么。</p>
  </div>

  <div data-role="footer">
    <h1>我的页脚</h1>
  </div> 
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#pageone" data-icon="home">首页</a></li>
        <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="arrow-r">页面二</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>该页面的按钮也会被突出显示，归功于 ui-btn-active 类。</p> 
    <p>如果返回首页，您会发现页面将保持状态，归功于 ui-state-persist 类。</p>
  </div>

  <div data-role="footer">
    <h1>我的页脚</h1>
  </div>
</div> 

</body>
</html>

Exécuter des instances»

Cliquez sur le bouton « Exécuter des instances » pour afficher les instances en ligne

实例

Plus d'instances

Barre de navigation dans le contenu

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">
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="plus">更多</a></li>
        <li><a href="#" data-icon="minus">更少</a></li>
        <li><a href="#" data-icon="delete">删除</a></li>
        <li><a href="#" data-icon="check">喜爱</a></li>
        <li><a href="#" data-icon="info">信息</a></li>
      </ul>
    </div>
     <p>该例演示内容中的导航栏。</p>
  </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 un exemple en ligne

Comment ajouter une barre de navigation dans data-role="content".

Barre de navigation dans la queue

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">
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="plus">更多</a></li>
        <li><a href="#" data-icon="minus">更少</a></li>
        <li><a href="#" data-icon="delete">删除</a></li>
        <li><a href="#" data-icon="check">喜爱</a></li>
        <li><a href="#" data-icon="info">信息</a></li>
      </ul>
    </div>
    <p>该例演示页脚中的导航栏。</p>
  </div>

  <div data-role="footer">
    <h1>我的页脚</h1>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur « Exécuter l'instance Bouton " " pour voir des exemples en ligne

Comment ajouter une barre de navigation dans la queue.

Icône d'emplacement dans la barre de navigation

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">
    <div data-role="navbar" data-iconpos="left">
      <ul>
        <li><a href="#" data-icon="plus">更多</a></li>
        <li><a href="#" data-icon="minus">更少</a></li>
        <li><a href="#" data-icon="delete">删除</a></li>
        <li><a href="#" data-icon="check">喜爱</a></li>
        <li><a href="#" data-icon="info">信息</a></li>
      </ul>
    </div>
    <p>该例演示页脚中的导航栏中的图标定位。</p>
    <p>data-iconpos="left" 将把图标定位到按钮的左侧。</p>
  </div>

  <div data-role="footer">
    <h1>我的底部</h1>
  </div>
</div> 

</body>
</html>

Exécuter l'instance»

Cliquez sur « Exécuter Bouton "Exemple" pour visualiser des exemples en ligne

Comment positionner l'icône dans la barre de navigation au sein de la queue.

Plus de 5 boutons

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">
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="plus">更多</a></li>
        <li><a href="#" data-icon="minus">更少</a></li>
        <li><a href="#" data-icon="delete">删除</a></li>
        <li><a href="#" data-icon="check">喜爱</a></li>
        <li><a href="#" data-icon="info">信息</a></li>
        <li><a href="#" data-icon="forward">向前</a></li>
        <li><a href="#" data-icon="back">向后</a></li>
        <li><a href="#" data-icon="star">星形</a></li>
        <li><a href="#" data-icon="gear">选项</a></li>
        <li><a href="#" data-icon="search">搜索</a></li>
      </ul>
    </div>
  <p>该例演示当导航栏包含超过五个按钮时的情况。</p>
  </div>

  <div data-role="footer">
    <h1>我的底部</h1>
  </div>
</div> 

</body>
</html>

Exécuter l'instance»

Cliquez sur "Exécuter l'instance" Exemple de visualisation de boutons en ligne

Démo de 10 boutons dans la barre de navigation.

←
→
soumettre

Site Web PHP chinois

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