จอภาพเลื่อนบูต (Scrollspy) วิดเจ็ต
เลื่อนจอภาพ (Scrollspy) plug-in ซึ่งจะปรับปรุงวิดเจ็ตลูกศรปรับปรุงเป้าหมายนำทางที่สอดคล้องกันขึ้นอยู่กับตำแหน่งของแถบเลื่อนอัตโนมัติการดำเนินงานพื้นฐานคือขณะที่คุณเลื่อนตำแหน่งแถบเลื่อนตามระดับ .active เพิ่มไปยังแถบนำทาง
หากคุณต้องการที่จะอ้างถึงบุคคล Plug-in คุณสมบัติที่คุณจะต้องอ้างอิงscrollspy.jsหรือเป็น เงินทุนปลั๊กอินภาพรวม บทที่กล่าวถึงคุณสามารถดูbootstrap.jsหรือเวอร์ชันบีบอัดbootstrap.min.js
การใช้
คุณสามารถเพิ่มเลื่อนไปด้านบนของจอภาพพฤติกรรมนำทาง:
- ผ่านแอตทริบิวต์ข้อมูล: คุณต้องการที่จะรับฟังเป็นองค์ประกอบ (โดยปกติร่างกาย) เพื่อเพิ่มข้อมูลสายลับ = "เลื่อน"แล้วเพิ่ม IDหรือระดับชั้นขององค์ประกอบหลักที่มีเงินทุน .nav แอตทริบิวต์ข้อมูลส่วนประกอบเป้าหมายเพื่อให้การทำงานอย่างถูกต้องคุณต้องให้แน่ใจว่ามีการแข่งขันในร่างกายของหน้าเว็บที่คุณต้องการที่จะเชื่อมโยงองค์ประกอบการตรวจสอบบัตรประจำตัวที่มีอยู่
<body ข้อมูลสายลับ = "เลื่อน" data-target = ". Navbar-ตัวอย่างเช่น"> ... <ระดับ Div = "navbar-ตัวอย่างเช่น"> <ul class = "NAV NAV-แท็บ"> ... </ ul> </ div> ... </ body>
- โดย javascript: คุณสามารถเลื่อนการเรียกใช้ JavaScript ฟังเพื่อฟังการเลือกองค์ประกอบแล้วโทร .scrollspy ()ฟังก์ชัน:
. $ ( 'ร่างกาย') scrollspy ({เป้าหมาย: '.navbar-ตัวอย่าง'})
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้เลื่อนผ่านข้อมูลแอตทริบิวต์การตรวจสอบ (Scrollspy) เสียบอิน:
ตัวอย่าง
<Nav id = "Navbar-เช่น" class = "Navbar Navbar Navbar เริ่มต้น -static" บทบาท = "นำทาง">
<div class = "ภาชนะบรรจุของเหลว">
<div class = "Navbar หัว">
<ปุ่ม class = "Navbar-สลับ" type = "ปุ่ม" ข้อมูลสลับ = "ล่มสลาย"
ข้อมูล target = ".bs-JS -navbar-scrollspy">
<span class = "SR-เท่านั้น"> Switching นำทาง </ span>
<span class = "ไอคอนบาร์"> </ span>
<span class = "ไอคอนบาร์"> </ span>
<span class = "ไอคอนบาร์"> </ span>
</ ปุ่ม>
<a class = "Navbar แบรนด์" href = "#"> กวดวิชาชื่อ </ a>
</ div>
<div class = "การล่มสลาย Navbar ยุบ BS -js-Navbar-scrollspy">
<ul class = "NAV Navbar-NAV" >
<li> <a href = "#ios"> iOS < / a> </ li>
<li> <a href = "#svn"> SVN < / a> </ li>
<li class = "เลื่อนลง">
<a href = "#" id = "navbarDrop1" class = "แบบเลื่อนลง-สลับ"
ข้อมูลสลับ = "เลื่อนลง"> Java <b class = "ลูกศร"> </ b>
</ A>
<ul class = "แบบเลื่อนลงเมนู" บทบาท = "เมนู"
Aria-labelledby = "navbarDrop1">
<li> <a href = "#jmeter" TabIndex = "1"> JMeter < / a> </ li>
<li> <a href = "#ejb" TabIndex = "1"> EJB < / a> </ li>
<li class = "แบ่ง"> </ li>
<li> <a href = "#spring" TabIndex = "1"> ฤดูใบไม้ผลิ < / a> </ li>
</ ul>
</ li>
</ ul>
</ div>
</ div>
</ Nav>
<div ข้อมูลสายลับ = "เลื่อน" ข้อมูล target = "# navbar- เช่น" ข้อมูลชดเชย = "0"
style = "height: 200px; ล้น : อัตโนมัติตำแหน่ง: ญาติ;">
<H4 id = "iOS"> iOS < / h4>
<p> iOS ของคุณคือการพัฒนาและเผยแพร่โดยระบบปฏิบัติการแอปเปิ้ลโทรศัพท์มือถือ แต่เดิมการปล่อยเป็นครั้งแรก iPhone, iPod Touch และแอปเปิ้ลทีวีในปี 2007 iOS ของคุณมาจาก OS X พวกเขาร่วมมูลนิธิดาร์วิน OS X ระบบปฏิบัติการที่ใช้บน Mac, iOS ของคุณเป็นรุ่นมือถือแอปเปิ้ล </ p>
<H4 id = "SVN"> SVN < / h4>
<p> Apache โค่นล้มมักจะสั้น SVN เป็นโอเพนซอร์สซอฟต์แวร์ระบบการควบคุมเวอร์ชัน CollabNet โค่นล้มสร้างขึ้นโดย บริษัท ฯ ในปี 2000 แต่ตอนนี้ก็มีการพัฒนาเป็นโครงการของมูลนิธิซอฟต์แวร์อาปาเช่ แต่ก็มีนักพัฒนาที่อุดมไปด้วยและชุมชนผู้ใช้ </ p>
<H4 id = "JMeter"> JMeter < / h4>
<p> JMeter เป็นซอฟต์แวร์ทดสอบโอเพนซอร์ส มันเป็น 100% โปรแกรม Java บริสุทธิ์สำหรับการโหลดและการทดสอบประสิทธิภาพ </ p>
<H4 id = "EJB"> EJB < / h4>
<p> องค์กร Java ถั่ว (EJB ) เป็นกรอบการพัฒนาในการสร้างสูงที่ปรับขนาดได้และมีประสิทธิภาพการใช้งานขององค์กรที่นำไปใช้ในแอพพลิเคชันเซิร์ฟเวอร์ที่เข้ากันได้ (เช่น JBOSS เว็บลอจิก, ฯลฯ ) ของ J2EE </ p>
<H4 id = "ฤดูใบไม้ผลิ"> ฤดูใบไม้ผลิ < / h4>
<p> กรอบฤดูใบไม้ผลิเป็นแหล่งเปิดแพลตฟอร์ม Java สำหรับการพัฒนาอย่างรวดเร็วของโปรแกรม Java ที่มีประสิทธิภาพมีการสนับสนุนโครงสร้างพื้นฐานที่สมบูรณ์ </ p>
<p> กรอบฤดูใบไม้ผลิเขียนโดยร็อดจอห์นสันในเดือนมิถุนายน 2003 เปิดตัวครั้งแรกภายใต้ใบอนุญาต Apache 2.0 </ p>
</ div>
ลอง»
ผลมีดังนี้
ตัวเลือก
ผ่านคุณลักษณะข้อมูลหรือ JavaScript ตารางต่อไปนี้แสดงรายการตัวเลือกเหล่านี้:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| offset | number 默认值：10 | data-offset | 当计算滚动位置时，距离顶部的偏移像素。 |
ทาง
.scrollspy (รีเฟรช): เมื่อโทร scrollspy โดยวิธี JavaScript, คุณจะต้องเรียก .refreshวิธีการในการปรับปรุง DOM นี้จะเป็นประโยชน์ในการเปลี่ยนแปลง (นั่นคือคุณเพิ่มหรือลบองค์ประกอบบางอย่าง) เกิดขึ้นในช่วงเวลาขององค์ประกอบ DOM ใด ๆ นี่คือไวยากรณ์ของวิธีการนี้
$ ( '[ข้อมูลสายลับ = "เลื่อน"]'). แต่ละคน (ฟังก์ชั่น () {
var $ = $ Spy (นี้) .scrollspy (รีเฟรช)
})
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึง.scrollspy ( 'รีเฟรช') วิธีการ:
ตัวอย่าง
<Nav id = "myScrollspy" class = "Navbar Navbar Navbar เริ่มต้น -static" บทบาท = "นำทาง">
<div class = "ภาชนะบรรจุของเหลว">
<div class = "Navbar หัว">
<ปุ่ม class = "Navbar-สลับ" type = "ปุ่ม" ข้อมูลสลับ = "ล่มสลาย"
ข้อมูล target = ".bs-JS -navbar-scrollspy">
<span class = "SR-เท่านั้น"> Switching นำทาง </ span>
<span class = "ไอคอนบาร์"> </ span>
<span class = "ไอคอนบาร์"> </ span>
<span class = "ไอคอนบาร์"> </ span>
</ ปุ่ม>
<a class = "Navbar แบรนด์" href = "#"> กวดวิชาชื่อ </ a>
</ div>
<div class = "การล่มสลาย Navbar ยุบ BS -js-Navbar-scrollspy">
<ul class = "NAV Navbar-NAV" >
<li class = "ใช้งาน"> <a href = "#ios"> iOS < / a> </ li>
<li> <a href = "#svn"> SVN < / a> </ li>
<li class = "เลื่อนลง">
<a href = "#" id = "navbarDrop1" class = "แบบเลื่อนลง-สลับ"
ข้อมูลสลับ = "เลื่อนลง"> Java <b class = "ลูกศร"> </ b>
</ A>
<ul class = "แบบเลื่อนลงเมนู" บทบาท = "เมนู"
Aria-labelledby = "navbarDrop1">
<li> <a href = "#jmeter" TabIndex = "1"> JMeter < / a> </ li>
<li> <a href = "#ejb" TabIndex = "1"> EJB < / a> </ li>
<li class = "แบ่ง"> </ li>
<li> <a href = "#spring" TabIndex = "1"> ฤดูใบไม้ผลิ < / a> </ li>
</ ul>
</ li>
</ ul>
</ div>
</ div>
</ Nav>
<div ข้อมูลสายลับ = "เลื่อน" ข้อมูล target = "#myScrollspy" ข้อมูลชดเชย = "0"
style = "height: 200px; ล้น : อัตโนมัติตำแหน่ง: ญาติ;">
<div class = "ส่วน">
<H4 id = "iOS"> iOS < small> <a href = "#" onclick = "removeSection (นี้); ">
และครั้ง; ลบส่วน </ a> </ small>
</ H4>
<p> iOS ของคุณคือการพัฒนาและเผยแพร่โดยระบบปฏิบัติการแอปเปิ้ลโทรศัพท์มือถือ แต่เดิมการปล่อยเป็นครั้งแรก iPhone, iPod Touch และแอปเปิ้ลทีวีในปี 2007 iOS ของคุณมาจาก OS X พวกเขาร่วมมูลนิธิดาร์วิน OS X ระบบปฏิบัติการที่ใช้บน Mac, iOS ของคุณเป็นรุ่นมือถือแอปเปิ้ล </ p>
</ div>
<div class = "ส่วน">
<H4 id = "SVN"> SVN < small> </ small> </ h4>
<p> Apache โค่นล้มมักจะสั้น SVN เป็นโอเพนซอร์สซอฟต์แวร์ระบบการควบคุมเวอร์ชัน CollabNet โค่นล้มสร้างขึ้นโดย บริษัท ฯ ในปี 2000 แต่ตอนนี้ก็มีการพัฒนาเป็นโครงการของมูลนิธิซอฟต์แวร์อาปาเช่ แต่ก็มีนักพัฒนาที่อุดมไปด้วยและชุมชนผู้ใช้ </ p>
</ div>
<div class = "ส่วน">
<H4 id = "JMeter"> JMeter < small> <a href = "#" onclick = "removeSection (นี้); ">
และครั้ง; ลบส่วน </ a> </ small>
</ H4>
<p> JMeter เป็นซอฟต์แวร์ทดสอบโอเพนซอร์ส มันเป็น 100% โปรแกรม Java บริสุทธิ์สำหรับการโหลดและการทดสอบประสิทธิภาพ </ p>
</ div>
<div class = "ส่วน">
<H4 id = "EJB"> EJB < / h4>
<p> องค์กร Java ถั่ว (EJB ) เป็นกรอบการพัฒนาในการสร้างสูงที่ปรับขนาดได้และมีประสิทธิภาพการใช้งานขององค์กรที่นำไปใช้ในแอพพลิเคชันเซิร์ฟเวอร์ที่เข้ากันได้ (เช่น JBOSS เว็บลอจิก, ฯลฯ ) ของ J2EE </ p>
</ div>
<div class = "ส่วน">
<H4 id = "ฤดูใบไม้ผลิ"> ฤดูใบไม้ผลิ < / h4>
<p> กรอบฤดูใบไม้ผลิเป็นแหล่งเปิดแพลตฟอร์ม Java สำหรับการพัฒนาอย่างรวดเร็วของโปรแกรม Java ที่มีประสิทธิภาพมีการสนับสนุนโครงสร้างพื้นฐานที่สมบูรณ์ </ p>
<p> กรอบฤดูใบไม้ผลิเขียนโดยร็อดจอห์นสันในเดือนมิถุนายน 2003 เปิดตัวครั้งแรกภายใต้ใบอนุญาต Apache 2.0 </ p>
</ div>
</ div>
. <script> $ (ฟังก์ชั่น ( ) {removeSection = ฟังก์ชั่น (E) {$ (E) .parents ( ". มาตรา") ลบ () ;. $ ( '[ข้อมูลสายลับ = "เลื่อน"]') แต่ละ ( ฟังก์ชั่น () {var $ สายลับ = $ (นี้) .scrollspy ( 'รีเฟรช')});} $ ( "# myScrollspy") scrollspy () ;. }); </ script>
ลอง»
ผลมีดังนี้
เหตุการณ์
ตารางต่อไปนี้แสดงการตรวจสอบเพื่อใช้ในการเลื่อนเหตุการณ์ เหตุการณ์เหล่านี้สามารถนำมาใช้เมื่อฟังก์ชั่นเบ็ด
| 事件 | 描述 | 实例 |
|---|---|---|
| activate.bs.scrollspy | 每当一个新项目被滚动监听激活时，触发该事件。 |
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// 执行一些动作...
})
|
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานของเหตุการณ์activate.bs.scrollspy นี้:
ตัวอย่าง
<Nav id = "myScrollspy" class = "Navbar Navbar Navbar เริ่มต้น -static" บทบาท = "นำทาง">
<div class = "ภาชนะบรรจุของเหลว">
<div class = "Navbar หัว">
<ปุ่ม class = "Navbar-สลับ" type = "ปุ่ม" ข้อมูลสลับ = "ล่มสลาย"
ข้อมูล target = ".bs-JS -navbar-scrollspy">
<span class = "SR-เท่านั้น"> Switching นำทาง </ span>
<span class = "ไอคอนบาร์"> </ span>
<span class = "ไอคอนบาร์"> </ span>
<span class = "ไอคอนบาร์"> </ span>
</ ปุ่ม>
<a class = "Navbar แบรนด์" href = "#"> กวดวิชาชื่อ </ a>
</ div>
<div class = "การล่มสลาย Navbar ยุบ BS -js-Navbar-scrollspy">
<ul class = "NAV Navbar-NAV" >
<li class = "ใช้งาน"> <a href = "#ios"> iOS < / a> </ li>
<li> <a href = "#svn"> SVN < / a> </ li>
<li class = "เลื่อนลง">
<a href = "#" id = "navbarDrop1" class = "แบบเลื่อนลง-สลับ"
ข้อมูลสลับ = "เลื่อนลง"> Java <b class = "ลูกศร"> </ b>
</ A>
<ul class = "แบบเลื่อนลงเมนู" บทบาท = "เมนู"
Aria-labelledby = "navbarDrop1">
<li> <a href = "#jmeter" TabIndex = "1"> JMeter < / a> </ li>
<li> <a href = "#ejb" TabIndex = "1"> EJB < / a> </ li>
<li class = "แบ่ง"> </ li>
<li> <a href = "#spring" TabIndex = "1"> ฤดูใบไม้ผลิ < / a> </ li>
</ ul>
</ li>
</ ul>
</ div>
</ div>
</ Nav>
<div ข้อมูลสายลับ = "เลื่อน" ข้อมูล target = "#myScrollspy" ข้อมูลชดเชย = "0"
style = "height: 200px; ล้น : อัตโนมัติตำแหน่ง: ญาติ;">
<div class = "ส่วน">
<H4 id = "iOS"> iOS < small> <a href = "#" onclick = "removeSection (นี้); ">
และครั้ง; ลบส่วน </ a> </ small>
</ H4>
<p> iOS ของคุณคือการพัฒนาและเผยแพร่โดยระบบปฏิบัติการแอปเปิ้ลโทรศัพท์มือถือ แต่เดิมการปล่อยเป็นครั้งแรก iPhone, iPod Touch และแอปเปิ้ลทีวีในปี 2007 iOS ของคุณมาจาก OS X พวกเขาร่วมมูลนิธิดาร์วิน OS X ระบบปฏิบัติการที่ใช้บน Mac, iOS ของคุณเป็นรุ่นมือถือแอปเปิ้ล </ p>
</ div>
<div class = "ส่วน">
<H4 id = "SVN"> SVN < small> </ small> </ h4>
<p> Apache โค่นล้มมักจะสั้น SVN เป็นโอเพนซอร์สซอฟต์แวร์ระบบการควบคุมเวอร์ชัน CollabNet โค่นล้มสร้างขึ้นโดย บริษัท ฯ ในปี 2000 แต่ตอนนี้ก็มีการพัฒนาเป็นโครงการของมูลนิธิซอฟต์แวร์อาปาเช่ แต่ก็มีนักพัฒนาที่อุดมไปด้วยและชุมชนผู้ใช้ </ p>
</ div>
<div class = "ส่วน">
<H4 id = "JMeter"> JMeter < small> <a href = "#" onclick = "removeSection (นี้); ">
และครั้ง; ลบส่วน </ a> </ small>
</ H4>
<p> JMeter เป็นซอฟต์แวร์ทดสอบโอเพนซอร์ส มันเป็น 100% โปรแกรม Java บริสุทธิ์สำหรับการโหลดและการทดสอบประสิทธิภาพ </ p>
</ div>
<div class = "ส่วน">
<H4 id = "EJB"> EJB < / h4>
<p> องค์กร Java ถั่ว (EJB ) เป็นกรอบการพัฒนาในการสร้างสูงที่ปรับขนาดได้และมีประสิทธิภาพการใช้งานขององค์กรที่นำไปใช้ในแอพพลิเคชันเซิร์ฟเวอร์ที่เข้ากันได้ (เช่น JBOSS เว็บลอจิก, ฯลฯ ) ของ J2EE </ p>
</ div>
<div class = "ส่วน">
<H4 id = "ฤดูใบไม้ผลิ"> ฤดูใบไม้ผลิ < / h4>
<p> กรอบฤดูใบไม้ผลิเป็นแหล่งเปิดแพลตฟอร์ม Java สำหรับการพัฒนาอย่างรวดเร็วของโปรแกรม Java ที่มีประสิทธิภาพมีการสนับสนุนโครงสร้างพื้นฐานที่สมบูรณ์ </ p>
<p> กรอบฤดูใบไม้ผลิเขียนโดยร็อดจอห์นสันในเดือนมิถุนายน 2003 เปิดตัวครั้งแรกภายใต้ใบอนุญาต Apache 2.0 </ p>
</ div>
</ div>
<span id = "activeitem" style = "สี: สีแดง;" > </ span>
. <script> $ (ฟังก์ชั่น ( ) {removeSection = ฟังก์ชั่น (E) {$ (E) .parents ( ". มาตรา") ลบ () ;. $ ( '[ข้อมูลสายลับ = "เลื่อน"]') แต่ละ ( ฟังก์ชั่น () {var $ สายลับ = $ (นี้) .scrollspy ( 'รีเฟรช')});} $ ( "# myScrollspy") scrollspy (); .. $ ( '# myScrollspy') บน ( 'activate.bs scrollspy 'ฟังก์ชั่น () {var currentItem = $ ( "NAV li.active> a.") ข้อความ (); $ ( "# activeitem") HTML ( " คุณกำลังดู -" + currentItem); .. }) }); </ script>
ลอง»
ผลมีดังนี้
ตัวอย่างเพิ่มเติม
สร้างฟังเลื่อนแนวนอน
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการสร้างฟังเลื่อนแนวนอน:
ตัวอย่าง
<- แถบนำทาง :! ใช้เพื่อ ข้ามไปยังส่วนในพื้นที่เลื่อน - การ>
<Nav class = "Navbar navbar- ผกผัน Navbar คงที่ด้านบน">
...
<ระดับ Ul = "NAV navbar- NAV">
<li> <a href = "# section1"> ส่วนที่ 1 </ a> </ li>
...
</ Nav>
<! - พื้นที่เลื่อน ->
<div ข้อมูลสายลับ = "เลื่อน " data-target = ".navbar" data-ชดเชย = "12">
<! - ส่วนที่ 1 ->
<div id = "section1">
<h1> ส่วนที่ 1 </ h1 >
<p> พยายามที่จะเลื่อนหน้านี้ และมองไปที่แถบนำทางขณะที่เลื่อน! </ p>
</ div>
...
</ div>
<Nav class = "Navbar navbar- ผกผัน Navbar คงที่ด้านบน">
...
<ระดับ Ul = "NAV navbar- NAV">
<li> <a href = "# section1"> ส่วนที่ 1 </ a> </ li>
...
</ Nav>
<! - พื้นที่เลื่อน ->
<div ข้อมูลสายลับ = "เลื่อน " data-target = ".navbar" data-ชดเชย = "12">
<! - ส่วนที่ 1 ->
<div id = "section1">
<h1> ส่วนที่ 1 </ h1 >
<p> พยายามที่จะเลื่อนหน้านี้ และมองไปที่แถบนำทางขณะที่เลื่อน! </ p>
</ div>
...
</ div>
ลอง»
วิธีการสร้างฟังเลื่อนแนวตั้ง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการสร้างฟังเลื่อนแนวตั้ง:
ตัวอย่าง
<body ข้อมูลสายลับ = "เลื่อน " data-target = "#myScrollspy" data-ชดเชย = "20">
<ระดับ Div = "ภาชนะ">
<ระดับ Div = "แถว">
<ระดับ Nav = "Col-SM -3" id = "myScrollspy">
<ul class = "NAV nav- ยา NAV-ซ้อน">
<li> <a href = "# section1"> ส่วนที่ 1 </ a> </ li>
...
</ ul>
</ Nav>
<div class = "Col-SM -9">
<div id = "section1">
<h1> ส่วนที่ 1 </ h1 >
<p> พยายามที่จะเลื่อนหน้านี้ และมองไปที่รายการนำทางขณะที่เลื่อน! </ p>
</ div>
...
</ div>
</ div>
</ div>
</ body>
<ระดับ Div = "ภาชนะ">
<ระดับ Div = "แถว">
<ระดับ Nav = "Col-SM -3" id = "myScrollspy">
<ul class = "NAV nav- ยา NAV-ซ้อน">
<li> <a href = "# section1"> ส่วนที่ 1 </ a> </ li>
...
</ ul>
</ Nav>
<div class = "Col-SM -9">
<div id = "section1">
<h1> ส่วนที่ 1 </ h1 >
<p> พยายามที่จะเลื่อนหน้านี้ และมองไปที่รายการนำทางขณะที่เลื่อน! </ p>
</ div>
...
</ div>
</ div>
</ div>
</ body>
ลอง»