Panel mudah alih jQuery

Panel dalam jQuery Mobile terbentang dari kiri ke kanan skrin.

Buat panel dengan menambahkan atribut data-role="panel" pada elemen <div>

Tambah teg HTML dalam <div> untuk memaparkan kandungan panel anda:

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

Nota: teg panel mesti diletakkan di antara pengepala, kandungan dan bahagian bawah sebelum atau selepas halaman.

Untuk mengakses panel, anda perlu membuat pautan ke panel<div> Klik pautan untuk membuka panel:

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

Contoh panel mudah

<. 🎜 >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>

Run instance»Klik butang "Run instance" untuk melihat instance dalam talian

Tutup panel

Anda boleh menutup panel dengan mengklik di luar panel atau dengan menekan kekunci Esc atau meleret. Anda boleh melumpuhkan gelongsor dan mengklik untuk menutup panel dengan menggunakan atribut data-*:

Harta

Nilai

Perihalan

Instance

data-dismissible

true

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

| false

Menentukan sama ada panel boleh ditutup dengan mengklik di luar kawasan panel.

Cubalah

data-swipe-close

true

| >Nyatakan sama ada ia boleh ditutup dengan meleret.

Cubalah

Anda boleh menggunakan butang untuk menutup panel: cuma tambah data-rel dalam <div> daripada atribut panel ="close". Atas sebab prestasi, kami memerlukan atribut href bagi kunci untuk menutup pautan untuk menghala ke ID halaman.

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>

Run Instance»

Klik "Run Instance" butang Lihat contoh dalam talian

Paparan panel

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

Anda boleh mengawal cara panel dipaparkan dengan menggunakan atribut paparan data:<🎜><🎜>

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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Kedudukan Panel

Secara lalai, panel akan dipaparkan di sebelah kiri skrin. Jika anda mahu panel muncul di sebelah kanan skrin, anda boleh menentukan atribut 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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Anda boleh menentukan bahawa tatal kandungan panel berdasarkan tatal halaman. Secara lalai panel menatal dengan halaman (tetapi kandungan panel kekal di bahagian atas halaman). Jika anda perlu membetulkan kandungan panel dan tidak menatal dengan menatal halaman, anda boleh menambah atribut data-position-fixed="true" pada panel:

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>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Panel mudah alih jQuery

Instance

Kedudukan Panel

Instance

Instance

Laman web PHP Cina