มูลนิธิแมกเจลแลน (Magellan) นำทาง
วิธีการสร้างการนำเจลลัน
Magellan นำร่องดัชนีนำทางถูกสร้างขึ้นดังต่อไปนี้:
ตัวอย่าง
<Dl class = "ย่อย nav ">
<Dd ข้อมูล MAGELLAN เดินทางมาถึง = "หน้า 1"> <a href = "# page1"> หน้า 1 </ a> </ dd> ขึ้น
<Dd ข้อมูล MAGELLAN เดินทางมาถึง = "Page2"> <a href = "# page2"> หน้า 2 </ a> </ dd> ขึ้น
</ ดล>
</ div>
<H3 ข้อมูล MAGELLAN ปลายทาง = "หน้า 1"> Page1 </ h3>
ชื่อ <A = "page1"> </ a>
...
<H3 ข้อมูล MAGELLAN ปลายทาง = "Page2"> หน้า 2 </ h3>
ชื่อ <A = "page2"> </ a>
...
<! - เตรียมมูลนิธิ JS ->
<script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>
ลอง»
ตัวอย่างของการวิเคราะห์
ในองค์ประกอบ <div> เพื่อเพิ่ม data-magellan-expedition="fixed" " คุณสมบัติในการสร้าง Magellan นำร่อง
แล้ว <dd> หรือ <li> เพิ่ม data-magellan-arrival=" value " " แอตทริบิวต์และเพิ่มการเชื่อมโยงกลับเป็นค่าแอตทริบิวต์ (หน้า 1)
โดยใช้ data-magellan-destination="value" " แอตทริบิวต์การควบคุมเป้าหมายนำทาง Magellan ตามด้วย <a> องค์ประกอบเพิ่ม name=" value " แอตทริบิวต์ ค่าสองของทรัพย์สินที่จะต้องเป็น data-magellan-arrival ค่าที่สอดคล้องกัน (หน้า 1)
สุดท้ายมูลนิธิเริ่มต้น JS นำทางผู้ใช้ขณะที่เลื่อนหน้าจะเปลี่ยนโดยอัตโนมัติตามเนื้อหาที่ปรากฏในปัจจุบัน
หัว Magellan แถบเครื่องมือนำทาง
หัว Magellan แถบเครื่องมือนำทางโดยใช้ตัวอย่าง:
ตัวอย่าง
<Nav class = "บนแถบ " data-topbar>
...
<ระดับมาตรา = "บนแถบ -section">
<ระดับ Ul = "ซ้าย">
<li ข้อมูล MAGELLAN เดินทางมาถึง = "หน้า 1"> <a href = "# page1"> หน้า 1 </ a> </ li>
<li ข้อมูล MAGELLAN เดินทางมาถึง = "Page2"> <a href = "# page2"> หน้า 2 </ a> </ li>
</ ul>
</ มาตรา>
</ Nav>
</ div>
<H3 ข้อมูล MAGELLAN ปลายทาง = "หน้า 1"> Page1 </ h3>
ชื่อ <A = "page1"> </ a>
...
<H3 ข้อมูล MAGELLAN ปลายทาง = "Page2"> หน้า 2 </ h3>
ชื่อ <A = "page2"> </ a>
...
ลอง»
Magellan นำร่อง Padding
โดยค่าเริ่มต้น Magellan นำทาง <div> องค์ประกอบมีช่องว่างของ 10px CSS สามารถใช้ในการลบออก:
ตัวเลือกการนำเจลลัน
โดยใช้ข้อมูลตัวเลือกแก้ไขแอตทริบิวต์ Magellan การตั้งค่านำทางเช่น <div data-magellan-expedition="fixed" data-options="destination_threshold:60"> :
| ชื่อ | ชนิด | ผิดนัด | ลักษณะ | ตัวอย่าง |
|---|---|---|---|---|
| active_class | เชือก | กระตือรือร้น | คลาสระบุการเชื่อมโยงการเปิดใช้งาน | ความพยายาม |
| ธรณีประตู | จำนวน | 0 | ระบุสิ่งที่เวลาลูกศรความต้องการตำแหน่งคงที่ จะมีการคำนวณตามแถบเลื่อนเริ่มต้นคือ 0 (อัตโนมัติ) | ความพยายาม |
| destination_threshold | จำนวน | 20 | ค่าที่ตั้งไว้ถูกตั้งค่าให้แสดงค่าของการเชื่อมโยงลูกศรเพื่อนำทางจากด้านบนของรายการมีการใช้งาน (พื้นหลังสีฟ้า) เมื่อ | ความพยายาม |
| fixed_top | จำนวน | 0 | ระบุค่าพิกเซลจากหัวแถบนำทาง | ความพยายาม |