Panneau jQuery Mobile

Les panneaux de jQuery Mobile s'étendent de gauche à droite de l'écran.

Créez un panneau en ajoutant l'attribut data-role="panel" à l'élément <div> avec l'identifiant spécifié.

Ajoutez des balises HTML dans <div> pour afficher le contenu de votre panneau :

<div data-role="panel" id="myPanel">
  <h2>面板标题..</h2>
  <p>文本内容..</p>
</div>

Remarque : les balises de panneau doivent être placées entre l'en-tête, le contenu et le bas avant ou après la page.

Pour accéder au panneau, vous devez créer un lien vers le panneau<div> Cliquez sur le lien pour ouvrir le panneau :

<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>

Exemple de panneau simple

<. 🎜 >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="panel" id="myPanel"> 
    <h2>面板头部</h2>
    <p>你可以通过点击面板外部区域或按下 Esc 键或滑动来关闭面板。</p>
  </div> 

  <div data-role="header">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>点击下面按钮打开面板。</p>
    <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">打开面板</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

Fermez le panneau

Vous pouvez fermer le panneau en cliquant à l'extérieur du panneau ou en appuyant sur la touche Échap ou en faisant glisser votre doigt. Vous pouvez désactiver le glissement et le clic pour fermer le panneau en utilisant les attributs data-* :

Propriété

Valeur

Description

Instance

data-dismissible

true

属性	值	描述	实例
data-dismissible	true \| false	指定面板是否可以通过点击面板外部区域来关闭。	尝试一下
data-swipe-close	true \| false	指定是否可以通过滑动来关闭。	尝试一下

false

Spécifie si le panneau peut être fermé en cliquant à l'extérieur la zone du panneau.

Essayez-le

data-swipe-close

true

false

Précisez s'il peut être fermé en glissant.

Essayez-le

Vous pouvez utiliser le bouton pour fermer le panneau : ajoutez simplement data-rel dans le fichier <div> de l'attribut panel ="close". Pour des raisons de performances, nous avons besoin de l'attribut href de la clé pour fermer le lien afin de pointer vers l'ID de la page.

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="panel" id="myPanel"> 
    <h2>面板头部</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板：</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 

  <div data-role="header">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>点击下面按钮打开面板。</p>
    <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">打开面板</a>
  </div>

  <div data-role="footer">
    <h1>页面底部</h1>
  </div> 
</div> 

</body>
</html>

Exécuter l'instance»

Cliquez sur "Exécuter l'instance" bouton Afficher des exemples en ligne

Affichage du panneau

属性值	描述
data-display="overlay"	在内容上显示面板
data-display="push"	是同时"推动"面板和页面。
data-display="reveal"	默认值，将页面像幻灯片一样从屏幕划出，将面板显示出来

Vous pouvez contrôler la façon dont le panneau est affiché en utilisant l'attribut data-display :<🎜><🎜>

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="panel" id="overlayPanel" data-display="overlay"> 
    <h2>覆盖面板</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板：</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 
  <div data-role="panel" id="revealPanel" data-display="reveal"> 
    <h2>滑出面板</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板：</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 
   <div data-role="panel" id="pushPanel" data-display="push"> 
    <h2>推动面板</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板：</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 

  <div data-role="header">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>点击以下按钮查看面板的不同展示方式。</p>
    <a href="#overlayPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">覆盖面板</a>
     <a href="#revealPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">滑出面板</a>
      <a href="#pushPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">推动面板</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

Positionnement du panneau

Par défaut, le panneau sera affiché sur le côté gauche de l'écran. Si vous souhaitez que le panneau apparaisse sur le côté droit de l'écran, vous pouvez spécifier l'attribut data-position="right".

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="panel" id="myPanel" data-position="right"> 
    <h2>面板头部</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板:</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 

  <div data-role="header">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>打开下面按钮显示面板</p>
    <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">打开面板</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

Vous pouvez spécifier que le contenu du panneau défile en fonction du défilement des pages. Par défaut le panneau défile avec la page (mais le contenu du panneau reste en haut de la page). Si vous devez corriger le contenu du panneau et ne pas faire défiler avec le défilement de la page, vous pouvez ajouter l'attribut data-position-fixed="true" au panneau :

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="panel" id="myPanelDefault"> 
    <h2>面板头部</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板:</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 

  <div data-role="panel" id="myPanelFixed" data-position-fixed="true"> 
    <h2>Panel Header</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板:</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 

  <div data-role="header">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>点击两个按钮并滚动查看效果。</p>
    <a href="#myPanelDefault" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">打开默认面板</a>
    <a href="#myPanelFixed" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">打开面板使用 data-position-fixed="true"</a>

    <p><b>提示:</b>要查看 data-position-fixed="true" 属性的效果，如果未出现滚动条可以重置窗口大小。</p>
  
    <p>用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。</p><br>
  </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

Panneau jQuery Mobile

Instance

Positionnement du panneau

Instance

Instance

Site Web PHP chinois