cari

Rumah  >  Artikel  >  hujung hadapan web  >  Komponen JS Bootstrap melaksanakan kemahiran kesan code_javascript menu lungsur

Komponen JS Bootstrap melaksanakan kemahiran kesan code_javascript menu lungsur

WBOY
WBOYasal
2016-05-16 15:03:391578semak imbas

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>
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>
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>
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');
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 方法时立即触发！');
});

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>
Rendering:

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci kemahiran pemantauan tatal Bootstrap (Scrollspy) plug-in_javascriptArtikel seterusnya：Penjelasan terperinci kemahiran pemantauan tatal Bootstrap (Scrollspy) plug-in_javascript

Artikel berkaitan

Lihat lagi