Komponen JS Bootstrap melaksanakan kemahiran kesan code_javascript menu lungsur-tutorial js-php.cn

Komponen JS Bootstrap melaksanakan kemahiran kesan code_javascript menu lungsur

WBOY

Lepaskan： 2016-05-16 15:03:39

asal

1595 orang telah melayarinya

Menu lungsur turun Bootstrap Bab ini menerangkan menu lungsur turun, tetapi tidak melibatkan bahagian interaksi Bab ini akan menerangkan interaksi menu lungsur turun secara terperinci. Menggunakan pemalam Dropdown, anda boleh menambah menu dropdown pada mana-mana komponen (seperti bar navigasi, halaman tab, menu navigasi kapsul, butang, dll.).

Jika anda ingin merujuk kefungsian pemalam ini secara berasingan, maka anda perlu merujuk dropdown.js. Sebagai alternatif, seperti yang dinyatakan dalam bab Gambaran Keseluruhan Plugin Bootstrap, anda boleh merujuk bootstrap.js atau versi mini bootstrap.min.js.

1
Anda boleh menogol kandungan tersembunyi pemalam Dropdown:

1. Melalui atribut data: tambah data-toggle="dropdown" pada pautan atau butang untuk menogol menu lungsur, seperti yang ditunjukkan di bawah:

<div class="dropdown">
 <a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
 </ul>
</div>

Salin selepas log masuk

Jika anda perlu memastikan pautan itu utuh (berguna apabila penyemak imbas tidak mendayakan JavaScript), gunakan atribut sasaran data dan bukannya href="#":

<div class="dropdown">
 <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
  下拉菜单（Dropdown） <span class="caret"></span>
 </a>
 
 
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
 </ul>
</div>

Salin selepas log masuk

2. Melalui JavaScript: Untuk memanggil menu lungsur beralih melalui JavaScript, sila gunakan kaedah berikut:

$('.dropdown-toggle').dropdown()

2. Contoh mudah menu lungsur
Dalam penggunaan biasa, kod adalah sama dengan kaedah komponen:

//声明式用法

<div class="dropdown">
  <button class="btn btn-primary" data-toggle="dropdown">
     下拉菜单
     <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
     <li><a href="#">首页</a></li>
     <li><a href="#">产品</a></li>
     <li><a href="#">资讯</a></li>
     <li><a href="#">关于</a></li>
  </ul>
</div>

Salin selepas log masuk

Teras utama penggunaan deklaratif:

1. Gunakan class="dropdown" untuk membungkus bekas periferi
2. Butang klik dalaman mengikat data-toggle="dropdown"
3. Gunakan class="dropdown-menu" untuk elemen menu.

//如果按钮在容器外部，可以通过 data-target 进行绑定。

<button class="btn btn-primary" id="btn" data-toggle="dropdown"
data-target="#dropdown">
在 JavaScript 调用中，没有属性，方法并不好用，下面介绍四个基本事件。
//下拉菜单方法，但仍然需要 data-*

$('#btn').dropdown();
$('#btn').dropdown('toggle');

Salin selepas log masuk

Menu lungsur turun menyokong 4 jenis acara, sepadan dengan sebelum pop timbul, selepas pop timbul, sebelum tutup dan selepas tutup.

//事件，其他雷同

$('#dropdown').on('show.bs.dropdown', function() {
  alert('在调用 show 方法时立即触发！');
});

Salin selepas log masuk

3. Cara menggunakan menu lungsur turun dalam halaman tab

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例 - 带有下拉菜单的标签页</title>
  <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <script src="/scripts/jquery.min.js"></script>
  <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 
<p>带有下拉菜单的标签页</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li class="dropdown">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#">
     Java <span class="caret"></span>
   </a>
   <ul class="dropdown-menu">
     <li><a href="#">Swing</a></li>
     <li><a href="#">jMeter</a></li>
     <li><a href="#">EJB</a></li>
     <li class="divider"></li>
     <li><a href="#">分离的链接</a></li>
   </ul>
  </li>
  <li><a href="#">PHP</a></li>
</ul>
 
</body>
</html>

Salin selepas log masuk

Rendering:

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.