masyarakat

Belajar

Perpustakaan Alatan

Alat AI

Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > Bootstrap mesti mempelajari kemahiran pemantauan menatal setiap hari_javascript

Bootstrap mesti mempelajari kemahiran pemantauan menatal setiap hari_javascript

WBOY

Lepaskan： 2016-05-16 15:10:26

asal

1324 orang telah melayarinya

Artikel ini memperkenalkan pemantauan tatal Bootstrap untuk dipelajari oleh semua orang. Kandungan khusus adalah seperti berikut

1. Scrollspy pada masa ini memerlukan penggunaan komponen nav Bootstrap untuk menyerlahkan pautan aktif yang betul.

---- Jika anda menggunakan pemantauan tatal, bar navigasi mesti menggunakan komponen navigasi class="nav":

Berikut ialah bahagian kod sumber, bahagian yang bertanda merah boleh membuktikan ini:

Apabila menggunakan ScrollSpy, anda perlu menggunakan teg

Nota: Selain itu, kita perlu meletakkan teg

ke dalam bekas lain (seperti div) dan menambah id pada Hartanah bekas induk (ini diperkenalkan dalam Bahagian 4)

function ScrollSpy(element, options) {
  this.$body     = $(document.body)
  this.$scrollElement = $(element).is(document.body) &#63; $(window) : $(element)
  this.options    = $.extend({}, ScrollSpy.DEFAULTS, options)
  this.selector    = (this.options.target || '') + ' .nav li > a'
  this.offsets    = []
  this.targets    = []
  this.activeTarget  = null
  this.scrollHeight  = 0

  this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
  this.refresh()
  this.process()
 }

Salin selepas log masuk

2. Pautan Navbar mesti mempunyai sasaran id yang boleh diselesaikan Contohnya, home ;

--- Secara ringkasnya, teg di bawah

mesti mempunyai atribut href="#id" dan mesti ada teg sedemikian; apabila kandungan menatal ke teg ,

akan secara automatik dipilih.

--Sebenarnya, rakan-rakan yang telah melakukan pembangunan web mengetahui perkara ini Dalam versi HTML sebelumnya, tag anchor biasanya menggunakan , tetapi tag anchor dalam HTML5 telah ditinggalkan nama atribut, gunakan atribut id

 ScrollSpy.prototype.activate = function (target) {
  this.activeTarget = target

  this.clear()

  var selector = this.selector +
   '[data-target="' + target + '"],' +
   this.selector + '[href="' + target + '"]'

  var active = $(selector)
   .parents('li')
   .addClass('active')

  if (active.parent('.dropdown-menu').length) {
   active = active
    .closest('li.dropdown')
    .addClass('active')
  }

  active.trigger('activate.bs.scrollspy')
 }

Salin selepas log masuk

3. Tidak kira kaedah pelaksanaan, scrollspy memerlukan penggunaan kedudukan: relatif pada elemen yang anda intip ;, pastikan anda mempunyai set ketinggian dan limpahan-y: tatal digunakan.

--- Jika anda memantau tatal Badan, anda mesti menambah kedudukan:gaya relatif kepada badan

--- Jika yang dipantau bukan Badan, tetapi elemen lain [nampaknya kaedah ini biasa], maka anda perlu menambah tiga gaya: position:relative;height:500px;overflow -y :skrol;

ScrollSpy.prototype.refresh = function () {
  var that     = this
  var offsetMethod = 'offset'
  var offsetBase  = 0

  this.offsets   = []
  this.targets   = []
  this.scrollHeight = this.getScrollHeight()

  if (!$.isWindow(this.$scrollElement[0])) {
   offsetMethod = 'position'
   offsetBase  = this.$scrollElement.scrollTop()
  }

Salin selepas log masuk

4. Untuk menambah gelagat scrollspy dengan mudah pada navigasi bar atas anda, tambahkan data-spy="scroll" pada elemen yang anda ingin mengintip (kebiasaannya ini ialah ), kemudian tambahkan sasaran data atribut dengan ID atau kelas elemen induk bagi mana-mana Bootstrap .navcomponent.

--- Anda perlu menambah atribut data-spy="scroll" dan atribut data-target pada label kandungan menatal

Atribut pengintip data menentukan elemen untuk dipantau dan atribut sasaran data menentukan penyerlahan nav yang perlu dikawal semasa menatal

Lihat kod sumber permulaan di bawah sekali lagi Kedudukan yang ditandakan dengan warna merah, nilai this.options.target, adalah sama dengan nilai sasaran data bagi elemen kandungan menatal, anda mungkin terfikir bahawa sebelum mentakrifkan .nav Apabila membuat komponen, kita perlu meletakkan .nav dalam bekas lain (seperti div), dan bekas itu perlu mempunyai atribut id (nilai yang sama seperti sasaran data perlu ditetapkan di sini ).

function ScrollSpy(element, options) {
  this.$body     = $(document.body)
  this.$scrollElement = $(element).is(document.body) &#63; $(window) : $(element)
  this.options    = $.extend({}, ScrollSpy.DEFAULTS, options)
  this.selector    = (this.options.target || '') + ' .nav li > a'
  this.offsets    = []
  this.targets    = []
  this.activeTarget  = null
  this.scrollHeight  = 0

  this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
  this.refresh()
  this.process()
 }

Salin selepas log masuk

5. Selepas menambah kedudukan: relatif dalam CSS anda, hubungi scrollspy melalui JavaScript:

$('yourTag').scrollspy({ sasaran: 'nav-parent-div-id' })
-- yourTag ialah ID elemen untuk membawa kandungan skrol, nav-parent-div-id ialah id elemen induk elemen .nav (iaitu, nilai sasaran data )

Saya menulis banyak perkara rawak, berikut adalah ringkasan beberapa langkah mudah:

　1. Tambah tag

2. Tambahkan komponen .nav dalam teg dan tambahkan atribut href="#tag" pada li->a

　3. Tambah

;

　4. Tambahkan gaya #content{height:500px;overflow-y:scroll;option:relative;}

5. Tambah skrip $('#content').scrollspy({target:'scrollSpyID'});

Akhir sekali, sedikit berangan:

<style type="text/css">
    #body {
      position: relative;
      height: 500px;
      overflow-y: scroll;
    }
  </style>

Salin selepas log masuk

<div id="sc">
    <ul class="nav nav-pills">
      <li class="active">
        <a href="#A">第一段</a>
      </li>
      <li>
        <a href="#B">第二段</a>
      </li>
      <li>
        <a href="#C">第三段</a>
      </li>
    </ul>

  </div>

Salin selepas log masuk

<div id="body" class="container-fluid" data-spy="scroll" data-target="#sc">

　　<a id="A">第一段</a><br />

　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->

　　<a id="A">第二段</a><br />

　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->

　　<a id="A">第三段</a><br />

　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->

</div>

Salin selepas log masuk

$(function () {
  $('#body').scrollspy({ target: '#sc' });
});

Salin selepas log masuk

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

Label berkaitan：

bootstrap pendengar menatal

sumber：php.cn

Artikel sebelumnya：Fullpage.js kemahiran navigasi bar_javascript penetapan kedudukan tetap bar navigasi Artikel seterusnya：Melaksanakan sembang berbilang bilik berdasarkan socket.io+express_node.js

Kenyataan Laman Web ini

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 terbaru oleh pengarang