Tutorial Klasik...login
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Tutorial Klasik Mudah Alih jQuery
←
→
pengarang：php.cn  masa kemas kini：2022-04-11 13:58:34

bar navigasi mudah alih jQuery


Bar navigasi ialah satu set pautan yang disusun secara mendatar, biasanya terkandung dalam pengepala atau pengaki.

Secara lalai, pautan dalam bar navigasi akan menjadi butang secara automatik (data-role="button" tidak diperlukan).

Gunakan atribut data-role="navbar" untuk menentukan bar navigasi:

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>

Jalankan instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

lampu< /th> Secara lalai, butang adalah selebar kandungannya. Gunakan senarai tidak tertib untuk membahagikan lebar butang sama rata: 1 butang mengambil 100% lebar, 2 butang mengambil 50% lebar setiap satu, 3 butang mengambil 33.3% lebar setiap satu, dan seterusnya. Walau bagaimanapun, jika anda menentukan lebih daripada 5 butang dalam bar navigasi, ia akan dibahagikan kepada berbilang baris (lihat "Lagi Contoh").
lamp默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度：1 个按钮占 100% 宽度，2 个按钮则各占 50% 的宽度，3 个按钮则每个占 33,3% 的宽度，依此类推。然而，如果您在导航栏中指定了超过 5 个按钮，将会拆成多行（查看"更多实例"）。

Ikon butang navigasi

Kita boleh menggunakan atribut ikon data untuk menambah ikon pada butang navigasi :

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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Atribut ikon data menggunakan nilai yang sama seperti kelas CSS dalam bab ikon. Kelas penggunaan kelas CSS class="ui-icon-nilai", Atribut ikon data menggunakan kaedah data-icon="nilai".




属性值描述图标
data-icon="home"首页nyhome3.jpg
data-icon="arrow-r"右边箭头arrow-r.jpg
data-icon="search"搜索search.jpg
<🎜><🎜>
Nilai atributPeneranganIkon
data-icon="home"Halaman utamanyhome3.jpg
data-icon="arrow-r"Anak panah ke kanan< /td>arrow-r.jpg
data-icon="search"Carisearch.jpg

Untuk manual rujukan lengkap semua ikon butang jQuery Mudah Alih, lawati Manual Rujukan Ikon Mudah Alih jQuery kami.

Ikon kedudukan

Sama seperti kelas "ui-btn-icon-kedudukan" (huraian terperinci dalam bab ikon), anda boleh menetapkan ikon paparan Kedudukan: atas, kanan, bawah atau kiri.

Kedudukan ikon ditetapkan pada bekas bar navigasi, gunakan atribut data-iconpos untuk menentukan kedudukan:

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

Butang Aktifkan

Apabila pautan dalam bar navigasi diklik, ia akan kelihatan seperti dipilih (ditekan).

Jika anda ingin mendapatkan rupa ini apabila pautan tidak diklik, gunakan 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>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Untuk berbilang halaman, anda mungkin mahukan penampilan yang disemak bagi setiap butang untuk mewakili halaman semasa yang digunakan oleh pengguna. Untuk melakukan ini, tambahkan "ui-state-persist" dan "ui-btn-active" pada kelas yang dipautkan:

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>

Jalankan Instance»

Klik butang "Jalankan Instance" untuk melihat kejadian dalam talian

实例

Lagi Instance

Bar navigasi dalam kandungan

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>

Run Instance»

Klik butang "Run Instance" untuk melihat Contoh dalam talian

Cara menambah bar navigasi dalam data-role="content".

Bar navigasi di ekor

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>

Run Instance»

Klik "Run Instance Butang " " untuk melihat contoh dalam talian

Cara menambah bar navigasi dalam ekor.

Ikon lokasi dalam bar navigasi

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>

Run instance»

Klik "Run Butang " Contoh" untuk melihat contoh dalam talian

Cara meletakkan ikon dalam bar navigasi dalam bahagian ekor.

Lebih daripada 5 butang

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>

Run Instance»

Klik "Run Instance" Contoh Paparan Butang Dalam Talian

Demo 10 butang dalam bar navigasi.

←
→
serahkan

Laman web PHP Cina

RumahRumahKursusKursusArtikelArtikelSoal JawabSoal JawabKamusKamusManualManualMuat turunMuat turuncaricariAPPMuat turun APPMuat turun