Bar Alat Mudah Alih jQuery

Elemen bar alat biasanya terletak dalam pengepala dan pengaki - menjadikan navigasi mudah diakses:

Bar Pengepala

Bar pengepala biasanya mengandungi tajuk halaman /logo atau satu atau dua butang (biasanya Laman Utama, Pilihan atau Carian).

Anda boleh menambah butang di sebelah kiri atau kanan pengepala.

Kod berikut akan menambah butang di sebelah kiri teks tajuk pengepala dan butang di sebelah kanan teks tajuk pengepala:

Contoh

rreee

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Kod berikut akan menambah butang pada tajuk pengepala Di sebelah kiri teks:

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">
  <div data-role="header">
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
    <h1>欢迎访问我的主页</h1>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a>
  </div>

   <div data-role="main" class="ui-content">
    <p>注意我们在头部按钮上添加了  "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
  </div>
</div>

</body>
</html>

Run Instance»

Klik " Run Instance" "Contoh Paparan Butang Dalam Talian

Walau bagaimanapun, jika anda meletakkan pautan butang selepas elemen <h1>, teks di sebelah kanan tidak akan dipaparkan. Untuk menambah butang di sebelah kanan tajuk pengepala, nyatakan kelas "ui-btn-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="header">
  <a href="#" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
  <h1>欢迎访问我的主页</h1>
</div>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

< tbody>

	头部可以包含一个或两个按钮，而尾部没有限制。

Kepala boleh mengandungi satu atau dua butang, manakala ekor tidak mempunyai had.

Bar Ekor

Bar ekor lebih fleksibel daripada bar pengepala - ia lebih berfungsi dan boleh diubah di seluruh halaman, jadi boleh mengandungi seberapa banyak butang yang mungkin:

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="header">
  <h1>欢迎访问我的主页</h1>
  <a href="#" class="ui-btn ui-btn-right ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">搜索</a>
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Nota: Ekor digayakan berbeza daripada kepala (tiada pelapik dan ruang, dan butang tidak ditengah). Kita boleh menyelesaikan masalah ini menggunakan gaya 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">
  <div data-role="header">
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left ">主页</a>
    <h1>欢迎访问我的主页</h1>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left ">搜索</a>
  </div>

  <div data-role="main" class="ui-content">
    <p>该按钮仅用于演示，不会有任何效果。</p>
    <p>注意我们在头部按钮上添加了 "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
  </div>

  <div data-role="footer">
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a>
  </div>
</div>

</body>
</html>

Run Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Anda juga boleh menggabungkan butang dalam ekor secara mendatar atau menegak:

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">
  <div data-role="header">
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
    <h1>欢迎访问我的主页</h1>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a>
  </div>

  <div data-role="main" class="ui-content">
    <p>该按钮仅用于演示，不会有任何效果。</p>
  </div>

  <div data-role="footer" style="text-align:center;">
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook关注我</a>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter关注我</a>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram关注我</a>
  </div>
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Kedudukan Pengepala dan Bar Treler

Pengepala dan Treler boleh diletakkan dalam tiga cara:

Sebaris - Lalai. Lajur pengepala dan pengaki adalah sejajar dengan kandungan halaman.
Tetap - Bar pengepala dan pengaki ditetapkan di bahagian atas dan bawah halaman.
Skrin Penuh - Pada asasnya sama seperti mod Kedudukan tetap, bar pengepala dan pengaki ditetapkan di bahagian atas dan bawah halaman. Walau bagaimanapun, apabila bar alat menatal keluar dari skrin, ia tidak akan muncul semula secara automatik melainkan skrin diklik Ini sangat berguna untuk aplikasi seperti gambar atau video yang meningkatkan rasa penggantian. Ambil perhatian bahawa dalam mod ini bar alat akan meliputi kandungan halaman, jadi ia paling sesuai digunakan dalam situasi khas.

Gunakan atribut kedudukan data untuk meletakkan lajur pengepala dan pengaki:

Kedudukan sebaris (lalai)

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">
  <div data-role="header">
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
    <h1>欢迎访问我的主页</h1>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a>
  </div>

  <div data-role="main" class="ui-content">
    <p>该按钮仅用于演示，不会有任何效果。</p>
  </div>

  <div data-role="footer" style="text-align:center;">
    <div data-role="controlgroup" data-type="horizontal">
      <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a>
      <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a>
      <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a>
    </div>
  </div>
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat instance dalam talian

Kedudukan Tetap

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">
  <div data-role="header" data-position="inline">
    <h1>行内页眉</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p><b>提示：</b> 如果要看到效果，则需要调整窗口大小使滚动条可用。</p>
  
    <p>可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.</p>

  </div>

  <div data-role="footer" data-position="inline">
     <h1>行内页脚</h1>
  </div>
</div>

</body>
</html>

Run Instance»

Klik " Run Instance" Butang untuk melihat contoh dalam talian

Untuk mendayakan kedudukan skrin penuh, gunakan data-position="fixed" dan tambahkan atribut skrin penuh data pada elemen:

Kedudukan skrin penuh

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">
  <div data-role="header" data-position="fixed">
    <h1>Fixed 页眉</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p><b>提示：</b>如果要看到效果，则需要调整窗口大小使滚动条可用。</p>

    <p><b>提示：</b> 如果滚动条可用，那么敲击屏幕将隐藏或显示页眉/页脚。效果会根据您在页面上的位置而变化。</p>
    
    <p>可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.</p>

  </div>

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

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Petua: Kedudukan skrin penuh berfungsi dengan foto, imej dan video.

Petua: Dalam kedudukan tetap dan kedudukan skrin penuh, bar pengepala dan bar ekor akan disembunyikan dan dipaparkan dengan mengklik pada skrin.

Lagi contoh

Hanya paparkan ikon pada bar alat
Untuk memaparkan hanya ikon pada bar alat anda boleh menggunakan ikon ui-btn- -kelas notext.

Bar Alat Mudah Alih jQuery

Bar Pengepala

Contoh

Instance

Instance

Bar Ekor

Instance

Instance

Instance

Kedudukan Pengepala dan Bar Treler

Kedudukan sebaris (lalai)

Instance

Kedudukan Tetap

Instance

Kedudukan skrin penuh

Instance

Lagi contoh

Laman web PHP Cina