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

Blocs pliables jQuery Mobile


Blocs de contenu pliables

Les blocs pliables vous permettent de masquer ou d'afficher du contenu - utile pour stocker des informations partielles.

Pour créer un bloc de contenu pliable, vous devez ajouter l'attribut data-role="collapsible" au conteneur. À l'intérieur du conteneur (div), ajoutez un élément de titre (H1-H6), suivi de la balise HTML que vous souhaitez développer :

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="collapsible">
      <h1>点击我 - 我可以折叠！</h1>
      <p>我是可折叠的内容。</p>
    </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

Par défaut, le contenu est réduit. Pour développer le contenu lors du chargement de la page, utilisez data-collapsed="false":

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="collapsible" data-collapsed="false">
      <h1>点击我 - 我可以折叠！</h1>
      <p>我是可折叠的内容。</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>页脚文本</h1>
  </div>
</div> 

</body>
</html>

Exécuter l'instance»

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

Blocs pliables imbriqués

Les blocs de contenu pliables peuvent être imbriqués les uns dans les autres :

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="collapsible">
      <h1>点击我 - 我可以折叠！</h1>
      <p>我是可折叠的内容。</p>
      <div data-role="collapsible">
        <h1>点击我 - 我是嵌套的可折叠块！</h1>
        <p>我是嵌套的可折叠块中被展开的内容。</p>
      </div>
    </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



可折叠的内容块可以根据您的需要进行多次嵌套。
 Pliable les blocs de contenu peuvent être imbriqués autant de fois que nécessaire.

Collections pliables

Les collections pliables sont des blocs pliables regroupés (comme un accordéon). Lorsqu'un nouveau bloc est développé, tous les autres blocs sont réduits.

Créez plusieurs blocs de contenu pliables, puis entourez les blocs de contenu pliables avec de nouveaux conteneurs avec data-role="collapsible-set":

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="collapsibleset">
      <div data-role="collapsible">
        <h3>点击我 - 我可以折叠！</h3>
        <p>我是可折叠的内容。</p>
      </div>
      <div data-role="collapsible">
        <h3>点击我 - 我可以折叠！</h3>
        <p>我是可折叠的内容。</p>
      </div>
      <div data-role="collapsible">
        <h3>点击我 - 我可以折叠！</h3>
        <p>我是可折叠的内容。</p>
      </div>
      <div data-role="collapsible">
        <h3>点击我 - 我可以折叠！</h3>
        <p>我是可折叠的内容。</p>
      </div>
    </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

Plus d'exemple

Annulez les coins et les marges arrondis via l'attribut data-inset

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>可折叠的 data-inset</h1>
  </div>

  <div data-role="main" class="ui-content">
    <h2>带有圆角的可折叠内容块:</h2>
    <div data-role="collapsible">
      <h1>这是有圆角的可折叠内容块。</h1>
      <p>默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉外边距与圆角。</p>
    </div>

    <h2>没有圆角的可折叠内容块：</h2>
    <div data-role="collapsible" data-inset="false">
      <h1>这是没有圆角的可折叠内容块。</h1>
      <p>默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉外边距与圆角。</p>
    </div>
    <br>

    <h2>没有圆角的可折叠集合:</h2>
    <div data-role="collapsibleset">
      <div data-role="collapsible" data-inset="false">
        <h3>点击我 - 我可以折叠！</h3>
        <p>我是可折叠的内容。</p>
      </div>
      <div data-role="collapsible" data-inset="false">
        <h3>点击我 - 我可以折叠！</h3>
        <p>我是可折叠的内容。</p>
      </div>
      <div data-role="collapsible" data-inset="false">
        <h3>点击我 - 我可以折叠！</h3>
        <p>我是可折叠的内容。</p>
      </div>
      <div data-role="collapsible" data-inset="false">
        <h3>点击我 - 我可以折叠！</h3>
        <p>我是可折叠的内容。</p>
      </div>
    </div>
  </div>
   
  <div data-role="footer">
    <h1>底部文本</h1>
  </div>  
</div> 

</body>
</html>

Exécuter l'exemple »

Cliquez sur le bouton « Exécuter l'exemple » pour voir l'exemple en ligne

Comment annuler les coins arrondis et les marges du bloc pliable.

Mini bloc pliable via l'attribut data-mini

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="collapsible" data-mini="true">
      <h1>点击我 - 我是可折叠的！</h1>
      <p>我是可折叠的内容。</p>
    </div>
  </div>

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

</body>
</html>

Exécuter l'instance»

Cliquez le bouton "Exécuter l'exemple" pour voir l'exemple en ligne

Comment réduire la taille du bloc pliable.

Changer l'icône via l'icône data-collapsed et l'icône data-expanded

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="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
      <h1>data-collapsed-icon 规定按钮的图标。</h1>
      <p>data-expanded-icon 规定内容被展开时按钮的图标。</p>
    </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 voir l'exemple en ligne

Comment changer l'icône du bloc pliable (la valeur par défaut est + et -).

Utilisez le pliage dans la fenêtre pop-up
Créez des éléments pliants dans la fenêtre pop-up.

Modifier la position de l'icône
Comment modifier la position de l'icône dans l'élément plié (la valeur par défaut est à gauche).

←
→
soumettre

Site Web PHP chinois

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