JavaScript

ทำให้ส่วนประกอบของ Bootstrap มีชีวิต—ตอนนี้ด้วยปลั๊กอิน jQuery แบบกำหนดเอง 13 ตัว

บุคคลหรือรวบรวม

ปลั๊กอินสามารถรวมเป็นรายบุคคลได้ (แม้ว่าบางปลั๊กอินจำเป็นต้องมีการพึ่งพา) หรือทั้งหมดในคราวเดียว ทั้งbootstrap.jsและbootstrap.min.jsมีปลั๊กอินทั้งหมดในไฟล์เดียว

แอตทริบิวต์ข้อมูล

คุณสามารถใช้ปลั๊กอิน Bootstrap ทั้งหมดผ่าน Markup API ได้โดยไม่ต้องเขียน JavaScript แม้แต่บรรทัดเดียว นี่คือ API ระดับเฟิร์สคลาสของ Bootstrap และควรพิจารณาเป็นอันดับแรกเมื่อใช้ปลั๊กอิน

ที่กล่าวว่า ในบางสถานการณ์ อาจเป็นการดีที่จะปิดฟังก์ชันนี้ ดังนั้นเราจึงให้ความสามารถในการปิดใช้งาน API ของแอตทริบิวต์ข้อมูลโดยยกเลิกการเชื่อมโยงเหตุการณ์ทั้งหมดบนเนมสเปซเนื้อหาที่มี `'data-api'' ดูเหมือนว่านี้:

  1. $ ( 'เนื้อหา' ). ปิด( '.data-api' )

อีกวิธีหนึ่งในการกำหนดเป้าหมายปลั๊กอินเฉพาะ ให้รวมชื่อของปลั๊กอินเป็นเนมสเปซพร้อมกับเนมสเปซ data-api ดังนี้:

  1. $ ( 'เนื้อหา' ). ปิด( '.alert.data-api' )

API แบบเป็นโปรแกรม

เรายังเชื่อว่าคุณควรจะสามารถใช้ปลั๊กอิน Bootstrap ทั้งหมดผ่าน JavaScript API ได้อย่างหมดจด API สาธารณะทั้งหมดเป็นเมธอดเดียวที่เชื่อมต่อได้ และส่งคืนคอลเล็กชันที่ดำเนินการ

  1. $ ( ".btn .อันตราย") ปุ่ม( "สลับ" ) addClass ( "อ้วน" )

เมธอดทั้งหมดควรยอมรับอ็อบเจ็กต์ตัวเลือกที่เป็นตัวเลือก สตริงที่กำหนดเป้าหมายเมธอดเฉพาะ หรือไม่มีเลย (ซึ่งเริ่มต้นปลั๊กอินด้วยการทำงานเริ่มต้น):

  1. $ ( "#myModal" ). modal () // เริ่มต้นด้วย defaults
  2. $ ( "#myModal" ). โมดอล({ แป้นพิมพ์: เท็จ}) // เริ่มต้นโดยไม่มีแป้นพิมพ์
  3. $ ( "#myModal" ). modal ( 'show' ) // เริ่มต้นและเรียกใช้ show ทันที

ปลั๊กอินแต่ละตัวยังเปิดเผยคอนสตรัคเตอร์ดิบในคุณสมบัติ 'ตัวสร้าง' $.fn.popover.Constructor: หากคุณต้องการรับอินสแตนซ์ปลั๊กอินบางตัว ให้ดึงข้อมูลโดยตรงจากองค์ประกอบ$('[rel=popover]').data('popover'):

ไม่มีความขัดแย้ง

บางครั้ง จำเป็นต้องใช้ปลั๊กอิน Bootstrap กับเฟรมเวิร์ก UI อื่นๆ ในสถานการณ์เหล่านี้ การชนกันของเนมสเปซอาจเกิดขึ้นในบางครั้ง หากเกิดเหตุการณ์นี้ขึ้น คุณสามารถเรียก.noConflictใช้ปลั๊กอินที่คุณต้องการคืนค่า

  1. var bootstrapButton = $ _ น. ปุ่ม. noConflict () // คืนค่า $.fn.button เป็นค่าที่กำหนดก่อนหน้านี้
  2. $ . น. bootstrapBtn = bootstrapButton // ให้ $().bootstrapBtn ฟังก์ชัน bootstrap

กิจกรรม

Bootstrap จัดเตรียมเหตุการณ์ที่กำหนดเองสำหรับการกระทำเฉพาะของปลั๊กอินส่วนใหญ่ โดยทั่วไป สิ่งเหล่านี้มาในรูปแบบกริยาแบบ infinitive และ past participle โดยที่ infinitive (เช่นshow) ถูกทริกเกอร์เมื่อเริ่มต้นเหตุการณ์ และรูปแบบกริยาที่ผ่านมา (ex. shown) จะถูกทริกเกอร์เมื่อการดำเนินการเสร็จสิ้น

เหตุการณ์ infinitive ทั้งหมดมีฟังก์ชันป้องกันdefault สิ่งนี้ทำให้สามารถหยุดการดำเนินการก่อนที่จะเริ่ม

  1. $ ( '#myModal' ) เปิด( 'แสดง' , ฟังก์ชัน( ) {
  2. ถ้า(! data ) ส่งกลับe ป้องกันค่า เริ่มต้น () // หยุดการแสดงกิริยา
  3. })

เกี่ยวกับการเปลี่ยนภาพ

สำหรับเอฟเฟกต์การเปลี่ยนอย่างง่าย ให้รวมbootstrap-transition.jsไว้ข้างไฟล์ JS อื่นๆ หากคุณกำลังใช้bootstrap.js ที่คอมไพล์แล้ว (หรือย่อขนาดให้เล็กสุด) คุณไม่จำเป็นต้องรวมข้อมูลนี้ เพราะมันมีอยู่แล้ว

กรณีการใช้งาน

ตัวอย่างบางส่วนของปลั๊กอินการเปลี่ยนแปลง:

  • เลื่อนหรือซีดจางเป็นกิริยาช่วย
  • จางหายไปแท็บ
  • จางหายไปการแจ้งเตือน
  • บานเลื่อนม้าหมุน

ตัวอย่าง

Modals มีความคล่องตัว แต่มีความยืดหยุ่น พร้อมข้อความโต้ตอบพร้อมฟังก์ชันขั้นต่ำที่จำเป็นและค่าเริ่มต้นที่ชาญฉลาด

ตัวอย่างคงที่

โมดอลที่แสดงผลพร้อมส่วนหัว เนื้อหา และชุดของการดำเนินการในส่วนท้าย

  1. <div class = "modal ซ่อนเฟด" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > &ครั้ง; </button>
  4. <h3> ส่วนหัวของโมดอล</h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> หุ่นดี… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > ปิด</a>
  11. <a href = "#" class = "btn btn-primary" > บันทึกการเปลี่ยนแปลง</a>
  12. </div>
  13. </div>

สาธิตสด

สลับโมดอลผ่าน JavaScript โดยคลิกที่ปุ่มด้านล่าง มันจะเลื่อนลงและจางลงจากด้านบนของหน้า

  1. <!-- ปุ่มเพื่อเรียกใช้ modal -->
  2. <a href = "#myModal" บทบาท= "ปุ่ม" class = "btn" data-toggle = "modal" > เปิดตัวโมดอลสาธิต</a>
  3.  
  4. <!-- โมดอล -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. < ประเภท ปุ่ม = "ปุ่ม" คลาส= "ปิด" data-dismiss = "modal" aria-hidden = "จริง" > × </button>
  8. <h3 id = "myModalLabel" > ส่วนหัว Modal </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> หุ่นดี… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > ปิด</button>
  15. <button class = "btn btn-primary" > บันทึกการเปลี่ยนแปลง</button>
  16. </div>
  17. </div>

การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

เปิดใช้งาน modal โดยไม่ต้องเขียน JavaScript ตั้งค่าdata-toggle="modal"บนองค์ประกอบตัวควบคุม เช่น ปุ่ม พร้อมกับ a data-target="#foo"หรือhref="#foo"เพื่อกำหนดเป้าหมายเป็นโมดอลเฉพาะเพื่อสลับ

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > เปิดโมดอล</button>

ผ่านจาวาสคริปต์

เรียก modal ด้วย id myModalด้วย JavaScript บรรทัดเดียว:

  1. $ ( '#myModal' ) โมดอล( ตัวเลือก)

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-backdrop="".

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
ฉากหลัง บูลีน จริง รวมถึงองค์ประกอบฉากหลังที่เป็นกิริยาช่วย หรือระบุstaticฉากหลังที่ไม่ปิดกิริยาเมื่อคลิก
แป้นพิมพ์ บูลีน จริง ปิดโมดอลเมื่อกดปุ่ม Escape
แสดง บูลีน จริง แสดงโมดอลเมื่อเริ่มต้น
ระยะไกล เส้นทาง เท็จ

หากมีการระบุ URL ระยะไกล เนื้อหาจะถูกโหลดผ่านloadเมธอดของ jQuery และแทรกลงในไฟล์.modal-body. หากคุณกำลังใช้ data api คุณสามารถใช้hrefแท็กเพื่อระบุแหล่งที่มาระยะไกลได้ ตัวอย่างนี้แสดงไว้ด้านล่าง:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

วิธีการ

.modal (ตัวเลือก)

เปิดใช้งานเนื้อหาของคุณเป็นกิริยาช่วย ยอมรับตัวเลือกobjectเสริม

  1. $ ( '#myModal' ) เป็นกิริยาช่วย({
  2. คีย์บอร์ด: false
  3. })

.modal('toggle')

สลับโมดอลด้วยตนเอง

  1. $ ( '#myModal' ) โมดอล( 'toggle' )

.modal('แสดง')

เปิดโมดอลด้วยตนเอง

  1. $ ( '#myModal' ) เป็นกิริยาช่วย( 'แสดง' )

.modal('ซ่อน')

ซ่อนโมดอลด้วยตนเอง

  1. $ ( '#myModal' ) เป็นกิริยาช่วย( 'ซ่อน' )

กิจกรรม

โมดอลคลาสของ Bootstrap เปิดเผยเหตุการณ์สองสามเหตุการณ์สำหรับการเชื่อมต่อกับฟังก์ชันโมดอล

เหตุการณ์ คำอธิบาย
แสดง เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีshowการเรียกเมธอดของอินสแตนซ์
แสดง เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้มองเห็นโมดอลได้ (จะรอให้การเปลี่ยน css เสร็จสิ้น)
ซ่อน เหตุการณ์นี้เริ่มทำงานทันทีเมื่อhideมีการเรียกเมธอดของอินสแตนซ์
ที่ซ่อนอยู่ เหตุการณ์นี้เริ่มทำงานเมื่อ modal ถูกซ่อนจากผู้ใช้เสร็จสิ้น (จะรอให้การเปลี่ยน css เสร็จสิ้น)
  1. $ ( '#myModal' ) เปิด( 'ซ่อน' ฟังก์ชัน( ) {
  2. // ทำอะไรสักอย่าง…
  3. })

ตัวอย่างในแถบนำทาง

ปลั๊กอิน ScrollSpy ใช้สำหรับอัปเดตเป้าหมายการนำทางโดยอัตโนมัติตามตำแหน่งการเลื่อน เลื่อนพื้นที่ด้านล่างแถบนำทางและดูการเปลี่ยนแปลงชั้นเรียนที่ใช้งานอยู่ รายการย่อยแบบเลื่อนลงจะถูกเน้นด้วย

@อ้วน

โฆษณากางเกงเลคกิ้ง, บรันช์ id art ปาร์ตี้สุดเหวี่ยง Pitchfork yr enim lo-fi ก่อนที่พวกเขาจะขายหมด qui Tumblr จักรยานจากฟาร์มสู่โต๊ะมีสิทธิ์อะไรก็ตาม เสื้อคาร์ดิแกน Anim keffiyeh บูธภาพถ่ายของ Velit seitan mcsweeney 3 wolf moon irure เสื้อกันหนาว Cosby กางเกงยีนส์ขาสั้น เสื้อกันหนาวมีฮู้ด williamsburg ที่คุณอาจไม่เคยได้ยินชื่อมาก่อน และกองทุนคาร์ดิแกน trust fund culpa biodiesel wes anderson aesthetic. Nihil สักข้อกล่าวหา, เครดิตประชดไบโอดีเซล keffiyeh ช่างฝีมือ ullamco ผลสืบเนื่อง.

@mdo

สเก็ตบอร์ดหนวด Veniam marfa, หนวดเครา adipisicing fugiat velit ฟรีแกนเครา aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. รถบรรทุกอาหารเสื้อสเวตเตอร์ลายสัก cosby, mcsweeney's quis non freegan vinyl Lo-fi เวส แอนเดอร์สัน +1 sartorial Carles ไม่ใช่การออกกำลังกายเพื่อความงาม บรู๊คลิน adipisicing เบียร์ฝีมือรอง keytar deserunt.

หนึ่ง

Occaecat commodo aliqua delectus. Fap craft beer deserunt สเก็ตบอร์ด ea. สิทธิจักรยาน Lomo adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. ไวนิล ID ชีวิตสูง echo park consequat quis aliquip banh mi pitchfork Vero VHS ดีที่สุดแล้ว Consectetur nisi DIY กระเป๋าสะพายข้าง minim Cred ex in แพ็ก iphone ที่ยั่งยืน deelectus consectetur

สอง

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

บล็อก Keytar twee, culpa messenger bag marfa ไม่ว่าจะรถบรรทุกอาหารอะไรก็ตาม Sapiente synth id สมมติ Locavore sed helvetica cliche ประชดประชัน, Thundercats ที่คุณอาจไม่เคยได้ยินเกี่ยวกับพวกเขาเป็นผลจาก hoodie ที่ปราศจากกลูเตน lo-fi fap aliquip ลองใช้สถานที่ก่อนที่พวกเขาจะขายหมด เทอร์รี่ ริชาร์ดสัน บรันช์ที่เชี่ยวชาญในบรันช์ nesciunt quis cosby เสื้อกันหนาว pariatur keffiyeh ut helvetica ช่างฝีมือ คาร์ดิแกน คราฟท์เบียร์ seitan ผ้ากำมะหยี่สำเร็จรูป VHS แชมเบรย์ ลาบอริส เทมปอร์ เวเนียม แอนิม มอลลิต มินิม คอมโมโด อุลแลมโก้ ธันเดอร์แคทส์


การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

หากต้องการเพิ่มลักษณะการทำงานของ scrollspy ให้กับการนำทางบนแถบด้านบนของคุณอย่างง่ายดาย เพียงเพิ่มdata-spy="scroll"องค์ประกอบที่คุณต้องการสอดแนม (โดยทั่วไปแล้วจะเป็นเนื้อหา) และdata-target=".navbar"เลือกว่าจะใช้การนำทางใด คุณจะต้องใช้ scrollspy กับ.navส่วนประกอบ

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

ผ่านจาวาสคริปต์

เรียก scrollspy ผ่าน JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
หัวขึ้น! ลิงก์ Navbar ต้องมีเป้าหมาย ID ที่แก้ไขได้ ตัวอย่างเช่น a <a href="#home">home</a>must สอดคล้องกับบางสิ่งบางอย่างใน dom like <div id="home"></div>.

วิธีการ

.scrollspy('รีเฟรช')

เมื่อใช้ scrollspy ร่วมกับการเพิ่มหรือลบองค์ประกอบออกจาก DOM คุณจะต้องเรียกวิธีการรีเฟรชดังนี้:

  1. $ ( '[data-spy="scroll"]' ) แต่ละ( ฟังก์ชัน() {
  2. var $spy = $ ( นี่) scrollspy ( 'รีเฟรช' )
  3. });

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-offset="".

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
offset ตัวเลข 10 พิกเซลจะชดเชยจากด้านบนเมื่อคำนวณตำแหน่งของการเลื่อน

กิจกรรม

เหตุการณ์ คำอธิบาย
เปิดใช้งาน เหตุการณ์นี้จะเริ่มทำงานเมื่อใดก็ตามที่รายการใหม่เปิดใช้งานโดย scrollspy

แท็บตัวอย่าง

เพิ่มฟังก์ชันแท็บแบบไดนามิกที่รวดเร็วเพื่อเปลี่ยนผ่านบานหน้าต่างเนื้อหาในเครื่อง แม้กระทั่งผ่านเมนูแบบเลื่อนลง

ผ้ายีนส์ดิบที่คุณอาจไม่เคยได้ยินชื่อกางเกงยีนส์ออสติน Nesciunt Tofu stumptown aliqua, น้ำยาทำความสะอาดซินธ์มาสเตอร์แบบย้อนยุค หนวด cliche ชั่วคราว วิลเลียมส์เบิร์ก คาร์ล วีแกน เฮลเวติกา Reprehenderit คนขายเนื้อ retro keffiyeh dreamcatcher synth เสื้อกันหนาว Cosby eu banh mi, qui irure terry richardson ex squid Aliquip placeat ซัลเวีย cillum iphone. Seitan aliquip quis คาร์ดิแกน American apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


การใช้งาน

เปิดใช้งานแท็บแบบแท็บได้ผ่าน JavaScript (ต้องเปิดใช้งานแต่ละแท็บแยกกัน):

  1. $ ( '#myTab a' ). คลิก( ฟังก์ชัน( ) {
  2. อี_ ป้องกันค่าเริ่มต้น ();
  3. $ ( นี่). แท็บ( 'แสดง' );
  4. })

คุณสามารถเปิดใช้งานแต่ละแท็บได้หลายวิธี:

  1. $ ( '#myTab a[href="#profile"]' ) แท็บ( 'แสดง' ); // เลือกแท็บตามชื่อ
  2. $ ( '#myTab a:first' ) แท็บ( 'แสดง' ); // เลือกแท็บแรก
  3. $ ( '#myTab a:last' ) แท็บ( 'แสดง' ); // เลือกแท็บสุดท้าย
  4. $ ( '#myTab li:eq(2) a' ) แท็บ( 'แสดง' ); // เลือกแท็บที่สาม (ดัชนี 0)

มาร์กอัป

คุณสามารถเปิดใช้งานการนำทางแท็บหรือยาเม็ดโดยไม่ต้องเขียน JavaScript ใด ๆ โดยเพียงแค่ระบุdata-toggle="tab"หรือdata-toggle="pill"บนองค์ประกอบ การเพิ่มnavและnav-tabsคลาสในแท็บulจะเป็นการใช้สไตล์แท็บ Bootstrap

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > หน้าแรก</a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > โปรไฟล์</a></li>
  4. <li><a href = "#ข้อความ" data-toggle = "แท็บ" > ข้อความ</a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > การตั้งค่า</a></li>
  6. </ul>

วิธีการ

$().tab

เปิดใช้งานองค์ประกอบแท็บและคอนเทนเนอร์เนื้อหา แท็บควรมี a data-targetหรือ การhrefกำหนดเป้าหมายโหนดคอนเทนเนอร์ใน DOM

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > หน้าแรก</a></li>
  3. <li><a href = "#โปรไฟล์" > โปรไฟล์</a></li>
  4. <li><a href = "#ข้อความ" > ข้อความ</a></li>
  5. <li><a href = "#settings" > การตั้งค่า</a></li>
  6. </ul>
  7.  
  8. <div class = "เนื้อหาแท็บ" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( ฟังก์ชัน() {
  17. $ ( '#myTab a:last' ) แท็บ( 'แสดง' );
  18. })
  19. </script>

กิจกรรม

เหตุการณ์ คำอธิบาย
แสดง เหตุการณ์นี้เริ่มทำงานในการแสดงแท็บ แต่ก่อนที่จะมีการแสดงแท็บใหม่ ใช้event.targetและevent.relatedTargetเพื่อกำหนดเป้าหมายแท็บที่ใช้งานอยู่และแท็บที่ใช้งานอยู่ก่อนหน้า (ถ้ามี) ตามลำดับ
แสดง เหตุการณ์นี้เริ่มทำงานในการแสดงแท็บหลังจากแสดงแท็บแล้ว ใช้event.targetและevent.relatedTargetเพื่อกำหนดเป้าหมายแท็บที่ใช้งานอยู่และแท็บที่ใช้งานอยู่ก่อนหน้า (ถ้ามี) ตามลำดับ
  1. $ ( 'a[data-toggle="tab"]' ) เปิด( 'แสดง' ฟังก์ชัน( ) {
  2. อี_ เป้าหมาย// เปิดใช้งานแท็บ
  3. อี_ relatedTarget // แท็บก่อนหน้า
  4. })

ตัวอย่าง

แรงบันดาลใจจากปลั๊กอิน jQuery.tipsy ที่ยอดเยี่ยมที่เขียนโดย Jason Frame; คำแนะนำเครื่องมือเป็นเวอร์ชันที่อัปเดตซึ่งไม่ต้องใช้รูปภาพ ใช้ CSS3 สำหรับภาพเคลื่อนไหว และแอตทริบิวต์ข้อมูลสำหรับพื้นที่จัดเก็บชื่อในเครื่อง

ด้วยเหตุผลด้านประสิทธิภาพ Tooltip และ popover data-apis จะถูกเลือกใช้ ซึ่งหมายความว่าคุณต้องเริ่มต้นด้วยตนเอง

วางเมาส์เหนือลิงก์ด้านล่างเพื่อดูคำแนะนำเครื่องมือ:

กางเกงรัดรูป ระดับต่อไป keffiyeh คุณอาจไม่เคยได้ยินเกี่ยวกับพวกเขา บูธภาพถ่ายเคราผ้ายีนส์ดิบ letterpress กระเป๋าถือวีแก้น stumptown เครื่องแต่งกายแบบอเมริกันแบบ 8 บิตของ mcsweeney fixie ที่ยั่งยืนจากฟาร์มสู่โต๊ะมีผ้าแชมเบรย์ไวนิลริชาร์ดสันเทอร์รี่ Beard stumptown, เสื้อสเวตเตอร์ถัก banh mi lomo Thundercats เต้าหู้ไบโอดีเซล วิลเลี่ยมส์เบิร์ก มาร์ฟา, แชมเบรย์วีแก้นคลีนส์สี่โลโค แมคสวีนีย์ ช่างฝีมือที่น่าขันจริงๆไม่ว่า จะเป็นคีย์ตาร์ใดก็ตาม ทวิตเตอร์ ของ Austin จากฟาร์มถึงโต๊ะซึ่งจัดการไวรัสกาแฟต้นกำเนิดเดียวจากแหล่งเดียวของ freegan cred ฟรีแกน

สี่ทิศ

คำแนะนำเครื่องมือในกลุ่มอินพุต

เมื่อใช้คำแนะนำเครื่องมือและป๊อปโอเวอร์กับกลุ่มอินพุต Bootstrap คุณจะต้องตั้งค่าcontainerตัวเลือก (ตามเอกสารด้านล่าง) เพื่อหลีกเลี่ยงผลข้างเคียงที่ไม่ต้องการ


การใช้งาน

ทริกเกอร์คำแนะนำเครื่องมือผ่าน JavaScript:

  1. $ ( '#example' ) เคล็ดลับเครื่องมือ( ตัวเลือก)

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-animation="".

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
แอนิเมชั่น บูลีน จริง ใช้การเปลี่ยน css fade กับคำแนะนำเครื่องมือ
html บูลีน เท็จ แทรก html ลงในคำแนะนำเครื่องมือ หากเป็นเท็จ เมธอดของ jquery textจะใช้ในการแทรกเนื้อหาลงใน dom ใช้ข้อความหากคุณกังวลเกี่ยวกับการโจมตี XSS
ตำแหน่ง สตริง | การทำงาน 'สูงสุด' วิธีวางตำแหน่งคำแนะนำเครื่องมือ - ด้านบน | ด้านล่าง | ซ้าย | ขวา
ตัวเลือก สตริง เท็จ หากมีตัวเลือก อ็อบเจ็กต์คำแนะนำเครื่องมือจะถูกส่งไปยังเป้าหมายที่ระบุ
ชื่อ สตริง | การทำงาน '' ค่าเริ่มต้นของชื่อหากไม่มีแท็ก `title`
สิ่งกระตุ้น สตริง 'เลื่อนโฟกัส' วิธีการเรียกคำแนะนำเครื่องมือ - คลิก | โฉบ | โฟกัส | คู่มือ. โปรดทราบว่ากรณีที่คุณส่งผ่านทริกเกอร์ mulliple, แยกช่องว่าง, ประเภททริกเกอร์
ล่าช้า หมายเลข | วัตถุ 0

แสดงและซ่อนคำแนะนำเครื่องมือล่าช้า (ms) - ใช้ไม่ได้กับประเภททริกเกอร์ด้วยตนเอง

หากมีการระบุตัวเลข การหน่วงเวลาจะใช้กับทั้งซ่อน/แสดง

โครงสร้างวัตถุคือ:delay: { show: 500, hide: 100 }

คอนเทนเนอร์ สตริง | เท็จ เท็จ

เพิ่มคำแนะนำเครื่องมือต่อท้ายองค์ประกอบเฉพาะcontainer: 'body'

หัวขึ้น! ตัวเลือกสำหรับคำแนะนำเครื่องมือแต่ละรายการสามารถระบุได้โดยใช้แอตทริบิวต์ข้อมูล

มาร์กอัป

  1. <a href = "#" data-toggle = "tooltip" title = "first tooltip" > วางเมาส์เหนือฉัน</a>

วิธีการ

$().คำแนะนำเครื่องมือ(ตัวเลือก)

แนบตัวจัดการคำแนะนำเครื่องมือกับคอลเล็กชันองค์ประกอบ

.tooltip('แสดง')

แสดงคำแนะนำเครื่องมือขององค์ประกอบ

  1. $ ( '#element' ) เคล็ดลับเครื่องมือ( 'แสดง' )

.tooltip('ซ่อน')

ซ่อนคำแนะนำเครื่องมือขององค์ประกอบ

  1. $ ( '#element' ) เคล็ดลับเครื่องมือ( 'ซ่อน' )

.tooltip('toggle')

สลับคำแนะนำเครื่องมือขององค์ประกอบ

  1. $ ( '#element' ) เคล็ดลับเครื่องมือ( 'toggle' )

.tooltip('ทำลาย')

ซ่อนและทำลายคำแนะนำขององค์ประกอบ

  1. $ ( '#element' ) คำแนะนำเครื่องมือ( 'ทำลาย' )

ตัวอย่าง

เพิ่มเนื้อหาซ้อนทับขนาดเล็ก เช่น บน iPad ลงในองค์ประกอบใดๆ เพื่อใช้เป็นข้อมูลรอง วางเมาส์เหนือปุ่มเพื่อเรียกป๊อปโอเวอร์ ต้องรวมคำแนะนำ เครื่องมือ

ป๊อปโอเวอร์แบบคงที่

มีสี่ตัวเลือก: จัดตำแหน่งบน ขวา ล่าง และซ้าย

ป๊อปโอเวอร์ ท็อป

Sed posuere consectetur est ที่ lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ขวา

Sed posuere consectetur est ที่ lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

ด้านล่างป๊อปโอเวอร์

Sed posuere consectetur est ที่ lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ซ้าย

Sed posuere consectetur est ที่ lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

ไม่มีมาร์กอัปที่แสดงเป็นป๊อปอัปที่สร้างขึ้นจาก JavaScript และเนื้อหาภายในdataแอตทริบิวต์

สาธิตสด

สี่ทิศ


การใช้งาน

เปิดใช้งานป๊อปโอเวอร์ผ่าน JavaScript:

  1. $ ( '#example' ) ป๊อปโอเวอร์( ตัวเลือก)

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-animation="".

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
แอนิเมชั่น บูลีน จริง ใช้การเปลี่ยน css fade กับคำแนะนำเครื่องมือ
html บูลีน เท็จ แทรก html ลงในป๊อปโอเวอร์ หากเป็นเท็จ เมธอดของ jquery textจะใช้ในการแทรกเนื้อหาลงใน dom ใช้ข้อความหากคุณกังวลเกี่ยวกับการโจมตี XSS
ตำแหน่ง สตริง | การทำงาน 'ขวา' วิธีวางตำแหน่งป๊อปโอเวอร์ - ด้านบน | ด้านล่าง | ซ้าย | ขวา
ตัวเลือก สตริง เท็จ หากมีตัวเลือก อ็อบเจ็กต์คำแนะนำเครื่องมือจะถูกส่งไปยังเป้าหมายที่ระบุ
สิ่งกระตุ้น สตริง 'คลิก' วิธีเรียกป๊อปโอเวอร์ - คลิก | โฉบ | โฟกัส | คู่มือ
ชื่อ สตริง | การทำงาน '' ค่าเริ่มต้นของชื่อหากไม่มีแอตทริบิวต์ "ชื่อ"
เนื้อหา สตริง | การทำงาน '' ค่าเนื้อหาเริ่มต้นหากไม่มีแอตทริบิวต์ "ข้อมูลเนื้อหา"
ล่าช้า หมายเลข | วัตถุ 0

ชะลอการแสดงและซ่อนป๊อปโอเวอร์ (ms) - ใช้ไม่ได้กับประเภททริกเกอร์ด้วยตนเอง

หากมีการระบุตัวเลข การหน่วงเวลาจะใช้กับทั้งซ่อน/แสดง

โครงสร้างวัตถุคือ:delay: { show: 500, hide: 100 }

คอนเทนเนอร์ สตริง | เท็จ เท็จ

ต่อท้ายป๊อปโอเวอร์กับองค์ประกอบเฉพาะcontainer: 'body'

หัวขึ้น! ตัวเลือกสำหรับป๊อปอัปแต่ละรายการสามารถระบุได้โดยใช้แอตทริบิวต์ข้อมูล

มาร์กอัป

ด้วยเหตุผลด้านประสิทธิภาพ Tooltip และ Popover data-apis จะถูกเลือกใช้ หากคุณต้องการใช้ เพียงระบุตัวเลือกตัวเลือก

วิธีการ

$().popover(ตัวเลือก)

เริ่มต้น popovers สำหรับคอลเล็กชันองค์ประกอบ

.popover('แสดง')

เผยองค์ประกอบป๊อปโอเวอร์

  1. $ ( '#element' ) ป๊อปโอเวอร์( 'แสดง' )

.popover('ซ่อน')

ซ่อนองค์ประกอบป๊อปโอเวอร์

  1. $ ( '#element' ) ป๊อปโอเวอร์( 'ซ่อน' )

.popover('toggle')

สลับองค์ประกอบป๊อปโอเวอร์

  1. $ ( '#element' ) ป๊อปโอเวอร์( 'สลับ' )

.popover('ทำลาย')

ซ่อนและทำลายป๊อปโอเวอร์ขององค์ประกอบ

  1. $ ( '#element' ) ป๊อปโอเวอร์( 'ทำลาย' )

ตัวอย่างการแจ้งเตือน

เพิ่มฟังก์ชันการยกเลิกให้กับข้อความแจ้งเตือนทั้งหมดด้วยปลั๊กอินนี้

กัวคาโมเล่ศักดิ์สิทธิ์! เช็คตัวเองให้ดีที่สุด คุณไม่ได้ดูดีเกินไป

อื้อหือ! คุณมีข้อผิดพลาด!

เปลี่ยนสิ่งนี้และสิ่งนั้นแล้วลองอีกครั้ง Duis mollis, est ไม่ใช่ commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Cras mattis consectetur purus นั่ง amet fermentum.

ลงมือทำสิ่งนี้ หรือทำสิ่งนี้


การใช้งาน

เปิดใช้งานการยกเลิกการแจ้งเตือนผ่าน JavaScript:

  1. $ ( ".alert" ) แจ้งเตือน()

มาร์กอัป

เพียงเพิ่มdata-dismiss="alert"ปุ่มปิดเพื่อให้ฟังก์ชันปิดการแจ้งเตือนโดยอัตโนมัติ

  1. <a class = "close" data-dismiss = "alert" href = "#" > × </a>

วิธีการ

$().alert()

ปิดการแจ้งเตือนทั้งหมดด้วยฟังก์ชันที่ปิดสนิท หากต้องการให้การแจ้งเตือนของคุณเคลื่อนไหวเมื่อปิด ตรวจสอบให้แน่ใจว่าได้ใช้ คลาส .fadeและ.inคลาสกับพวกเขาแล้ว

.alert('ปิด')

ปิดการแจ้งเตือน

  1. $ ( ".alert" ) แจ้งเตือน( 'ปิด' )

กิจกรรม

คลาสการแจ้งเตือนของ Bootstrap เปิดเผยเหตุการณ์บางอย่างสำหรับการเชื่อมต่อกับฟังก์ชันการแจ้งเตือน

เหตุการณ์ คำอธิบาย
ปิด เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีcloseการเรียกเมธอดของอินสแตนซ์
ปิด เหตุการณ์นี้เริ่มทำงานเมื่อมีการปิดการแจ้งเตือน (จะรอให้การเปลี่ยน css เสร็จสมบูรณ์)
  1. $ ( '#my-alert' ) ผูก( 'ปิด' ฟังก์ชัน( ) {
  2. // ทำอะไรสักอย่าง…
  3. })

ตัวอย่างการใช้งาน

ทำสิ่งต่างๆ ได้มากขึ้นด้วยปุ่มต่างๆ สถานะปุ่มควบคุมหรือสร้างกลุ่มปุ่มสำหรับส่วนประกอบเพิ่มเติม เช่น แถบเครื่องมือ

Stateful

เพิ่มdata-loading-text="Loading..."เพื่อใช้สถานะการโหลดบนปุ่ม

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > กำลังโหลดสถานะ</button>

สลับเดี่ยว

เพิ่มdata-toggle="button"เพื่อเปิดใช้งานการสลับบนปุ่มเดียว

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > สลับเดี่ยว</button>

ช่องทำเครื่องหมาย

เพิ่มdata-toggle="buttons-checkbox"สำหรับการสลับสไตล์ช่องทำเครื่องหมายบน btn-group

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > ซ้าย</button>
  3. <button type = "button" class = "btn btn-primary" > กลาง</button>
  4. <button type = "button" class = "btn btn-primary" > ขวา</button>
  5. </div>

วิทยุ

เพิ่มdata-toggle="buttons-radio"สำหรับการสลับรูปแบบวิทยุใน btn-group

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > ซ้าย</button>
  3. <button type = "button" class = "btn btn-primary" > กลาง</button>
  4. <button type = "button" class = "btn btn-primary" > ขวา</button>
  5. </div>

การใช้งาน

เปิดใช้งานปุ่มผ่าน JavaScript:

  1. $ ( '.nav-แท็บ' ) ปุ่ม()

มาร์กอัป

แอตทริบิวต์ข้อมูลเป็นส่วนสำคัญของปลั๊กอินปุ่ม ตรวจสอบโค้ดตัวอย่างด้านล่างสำหรับมาร์กอัปประเภทต่างๆ

ตัวเลือก

ไม่มี

วิธีการ

$().button('สลับ')

สลับสถานะการกด ให้ปุ่มมีลักษณะที่เปิดใช้งาน

หัวขึ้น! คุณสามารถเปิดใช้งานการสลับปุ่มอัตโนมัติโดยใช้ data-toggleแอตทริบิวต์
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

$().button('กำลังโหลด')

ตั้งค่าสถานะปุ่มเป็นการโหลด - ปิดใช้งานปุ่มและสลับข้อความเป็นข้อความโหลด การโหลดข้อความควรกำหนดไว้ที่องค์ประกอบปุ��มโดยใช้แอตทริบิวต์data-loading-textdata

  1. <button type = "button" class = "btn" data-loading-text = "กำลังโหลดสิ่งของ..." > ... </button>
หัวขึ้น! Firefox ยังคงมีสถานะปิดใช้งานในการโหลดหน้าเว็บ วิธีแก้ปัญหาสำหรับสิ่งนี้คือการใช้ autocomplete="off".

$().button('รีเซ็ต')

รีเซ็ตสถานะปุ่ม - สลับข้อความเป็นข้อความต้นฉบับ

$().button(สตริง)

รีเซ็ตสถานะปุ่ม - สลับข้อความเป็นสถานะข้อความที่กำหนดไว้ของข้อมูล

  1. <button type = "button" class = "btn" data-complete-text = "เสร็จสิ้น!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). ปุ่ม( 'สมบูรณ์' )
  4. </script>

เกี่ยวกับ

รับรูปแบบพื้นฐานและการสนับสนุนที่ยืดหยุ่นสำหรับส่วนประกอบที่ยุบได้ เช่น หีบเพลงและการนำทาง

*ต้องมีปลั๊กอิน Transitions รวมอยู่ด้วย

ตัวอย่างหีบเพลง

เมื่อใช้ปลั๊กอินยุบ เราได้สร้างวิดเจ็ตสไตล์หีบเพลงอย่างง่าย:

Anim pariatur cliche reprehenderit, enim eiusmod high life อัลบัมมัสเทอร์รี่ริชาร์ดสันโฆษณาปลาหมึก 3 wolf moon officia aute, non cupidat สเก็ตบอร์ด dolor บรันช์ รถบรรทุกอาหาร quinoa nesciunt laborum eiusmod. บรันช์ 3 หมาป่า มูน เทมพอร์ ซันท์ อะลิควา วางนกไว้บนนั้น ปลาหมึก กาแฟต้นกำเนิดเดียว Nihil anim keffiyeh helvetica, เบียร์ฝีมือแรงงาน wes anderson cred nesciunt sapiente ea proident. โฆษณา วีแกน ยกเว้น คนขายเนื้อ รอง lomo เลกกิ้ง occaecat คราฟท์เบียร์จากฟาร์มสู่โต๊ะ, ยีนส์สังเคราะห์ความงามแบบดิบๆ ที่คุณอาจไม่เคยได้ยินมาก่อนเกี่ยวกับการใช้ VHS ที่ยั่งยืน
Anim pariatur cliche reprehenderit, enim eiusmod high life อัลบัมมัสเทอร์รี่ริชาร์ดสันโฆษณาปลาหมึก 3 wolf moon officia aute, non cupidat สเก็ตบอร์ด dolor บรันช์ รถบรรทุกอาหาร quinoa nesciunt laborum eiusmod. บรันช์ 3 หมาป่า มูน เทมพอร์ ซันท์ อะลิควา วางนกไว้บนนั้น ปลาหมึก กาแฟต้นกำเนิดเดียว Nihil anim keffiyeh helvetica, เบียร์ฝีมือแรงงาน wes anderson cred nesciunt sapiente ea proident. โฆษณา วีแกน ยกเว้น คนขายเนื้อ รอง lomo เลกกิ้ง occaecat คราฟท์เบียร์จากฟาร์มสู่โต๊ะ, ยีนส์สังเคราะห์ความงามแบบดิบๆ ที่คุณอาจไม่เคยได้ยินมาก่อนเกี่ยวกับการใช้ VHS ที่ยั่งยืน
Anim pariatur cliche reprehenderit, enim eiusmod high life อัลบัมมัสเทอร์รี่ริชาร์ดสันโฆษณาปลาหมึก 3 wolf moon officia aute, non cupidat สเก็ตบอร์ด dolor บรันช์ รถบรรทุกอาหาร quinoa nesciunt laborum eiusmod. บรันช์ 3 หมาป่า มูน เทมพอร์ ซันท์ อะลิควา วางนกไว้บนนั้น ปลาหมึก กาแฟต้นกำเนิดเดียว Nihil anim keffiyeh helvetica, เบียร์ฝีมือแรงงาน wes anderson cred nesciunt sapiente ea proident. โฆษณา วีแกน ยกเว้น คนขายเนื้อ รอง lomo เลกกิ้ง occaecat คราฟท์เบียร์จากฟาร์มสู่โต๊ะ, ยีนส์สังเคราะห์ความงามแบบดิบๆ ที่คุณอาจไม่เคยได้ยินมาก่อนเกี่ยวกับการใช้ VHS ที่ยั่งยืน
  1. < คลาสdiv = "accordion" id = "accordion2" >
  2. <div class = "กลุ่มหีบเพลง" >
  3. <div class = "accordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "ยุบ" data-parent = "#accordion2" href = "#collapseOne" >
  5. สินค้ากลุ่มพับได้ #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "accordion-bodyยุบใน" >
  9. <div class = "accordion-inner" >
  10. แอนิม ปาริตูร์ คลีเช่...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "กลุ่มหีบเพลง" >
  15. <div class = "accordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "ยุบ" data-parent = "#accordion2" href = "#collapseTwo" >
  17. รายการกลุ่มพับ #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "หีบเพลงยุบตัว" >
  21. <div class = "accordion-inner" >
  22. แอนิม ปาริตูร์ คลีเช่...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

คุณยังสามารถใช้ปลั๊กอินได้โดยไม่ต้องใช้มาร์กอัปหีบเพลง สร้างปุ่มสลับการขยายและยุบองค์ประกอบอื่น

  1. <button type = "button" class = "btn btn-danger" data-toggle = "ยุบ" data-target = "#demo" >
  2. พับง่าย
  3. </button>
  4.  
  5. <div id = "demo" class = "ยุบใน" > </div>

การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

เพียงเพิ่มdata-toggle="collapse"และdata-targetไปยังองค์ประกอบเพื่อกำหนดการควบคุมองค์ประกอบที่ยุบได้โดยอัตโนมัติ แอตทริบิวต์data-targetยอมรับตัวเลือก css เพื่อปรับใช้การยุบ อย่าลืมเพิ่มคลาสcollapseลงในองค์ประกอบที่ยุบได้ หากคุณต้องการให้เปิดโดยค่าเริ่มต้น ให้เพิ่มคลาสinเพิ่มเติม

หากต้องการเพิ่มการจัดการกลุ่มที่เหมือนหีบเพลงให้กับตัวควบคุมที่ยุบได้ ให้เพิ่มแอตทริบิวต์data-parent="#selector"ข้อมูล อ้างถึงการสาธิตเพื่อดูการดำเนินการนี้

ผ่านจาวาสคริปต์

เปิดใช้งานด้วยตนเองด้วย:

  1. $ ( ".ยุบ" ) ยุบ()

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-parent="".

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
พ่อแม่ ตัวเลือก เท็จ หากตัวเลือก องค์ประกอบที่ยุบได้ทั้งหมดภายใต้พาเรนต์ที่ระบุจะถูกปิดเมื่อแสดงรายการที่ยุบได้นี้ (คล้ายกับพฤติกรรมหีบเพลงแบบดั้งเดิม)
สลับ บูลีน จริง สลับองค์ประกอบที่ยุบได้ในการเรียกใช้

วิธีการ

.ยุบ (ตัวเลือก)

เปิดใช้งานเนื้อหาของคุณเป็นองค์ประกอบที่ยุบได้ ยอมรับตัวเลือกobjectเสริม

  1. $ ( '#myCollapsible' ) ยุบ({
  2. สลับ: เท็จ
  3. })

.collapse('toggle')

สลับองค์ประกอบที่ยุบได้เพื่อแสดงหรือซ่อน

.collapse('แสดง')

แสดงองค์ประกอบที่ยุบได้

.collapse('ซ่อน')

ซ่อนองค์ประกอบที่ยุบได้

กิจกรรม

คลาสการยุบของ Bootstrap แสดงเหตุการณ์สองสามเหตุการณ์สำหรับการเชื่อมต่อกับฟังก์ชันการยุบ

เหตุการณ์ คำอธิบาย
แสดง เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีshowการเรียกเมธอดของอินสแตนซ์
แสดง เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้มองเห็นองค์ประกอบการยุบ (จะรอให้การเปลี่ยน css เสร็จสิ้น)
ซ่อน เหตุการณ์นี้เริ่มทำงานทันทีเมื่อhideมีการเรียกเมธอด
ที่ซ่อนอยู่ เหตุการณ์นี้เริ่มทำงานเมื่อองค์ประกอบการยุบถูกซ่อนจากผู้ใช้ (จะรอให้การเปลี่ยน css เสร็จสิ้น)
  1. $ ( '#myCollapsible' ) เปิด( 'ซ่อน' ฟังก์ชัน( ) {
  2. // ทำอะไรสักอย่าง…
  3. })

ตัวอย่าง

ปลั๊กอินพื้นฐานที่ขยายได้ง่ายสำหรับการสร้างหัวพิมพ์ที่สวยงามอย่างรวดเร็วด้วยการป้อนข้อความในแบบฟอร์มใดๆ

  1. <input type = "text" data-provide = "typeahead" >

คุณจะต้องตั้งค่าautocomplete="off"ให้ป้องกันไม่ให้เมนูเบราว์เซอร์เริ่มต้นปรากฏขึ้นเหนือเมนูแบบเลื่อนลง Bootstrap typeahead


การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

เพิ่มแอตทริบิวต์ข้อมูลเพื่อลงทะเบียนองค์ประกอบด้วยฟังก์ชันการพิมพ์ล่วงหน้าตามที่แสดงในตัวอย่างด้านบน

ผ่านจาวาสคริปต์

โทรพิมพ์ดีดด้วยตนเองด้วย:

  1. $ ( '.typeahead' ). พิมพ์ล่วงหน้า()

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-source="".

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
แหล่งที่มา อาร์เรย์ฟังก์ชัน [ ] แหล่งข้อมูลที่จะสอบถาม อาจเป็นอาร์เรย์ของสตริงหรือฟังก์ชัน ฟังก์ชันถูกส่งผ่านสองอาร์กิวเมนต์queryค่าในช่องป้อนข้อมูลและการprocessโทรกลับ ฟังก์ชันนี้อาจใช้แบบซิงโครนัสโดยการส่งคืนแหล่งข้อมูลโดยตรงหรือแบบอะซิงโครนัสผ่านprocessอาร์กิวเมนต์เดี่ยวของการเรียกกลับ
รายการ ตัวเลข 8 จำนวนรายการที่จะแสดงในรายการดรอปดาวน์สูงสุด
นาทีLength ตัวเลข 1 ความยาวอักขระขั้นต่ำที่จำเป็นก่อนที่จะเรียกใช้คำแนะนำการเติมข้อความอัตโนมัติ
จับคู่ การทำงาน ตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ เมธอดที่ใช้ในการพิจารณาว่าคิวรีตรงกับรายการหรือไม่ ยอมรับอาร์กิวเมนต์เดียวitemซึ่งจะใช้ทดสอบการสืบค้น เข้าถึงแบบสอบถามปัจจุบันด้วยthis.query. ส่งคืนบูลีนtrueหากข้อความค้นหาตรงกัน
เครื่องคัดแยก การทำงาน ตรงกันทุกประการ, ตรงตาม ตัว
พิมพ์ เล็กและ
ตัวพิมพ์ใหญ่
วิธีที่ใช้ในการจัดเรียงผลลัพธ์การเติมข้อความอัตโนมัติ ยอมรับอาร์กิวเมนต์เดียวitemsและมีขอบเขตของอินสแตนซ์แบบตัวพิมพ์ อ้างอิงการสืบค้นปัจจุบันด้วยthis.query.
ตัวอัปเดต การทำงาน คืนสินค้าที่เลือก วิธีที่ใช้ในการคืนสินค้าที่เลือก ยอมรับอาร์กิวเมนต์เดียว the itemและ มีขอบเขตของอินสแตนซ์แบบตัวพิมพ์
ปากกาเน้นข้อความ การทำงาน ไฮไลท์การแข่งขันเริ่มต้นทั้งหมด วิธีที่ใช้เพื่อเน้นผลลัพธ์การเติมข้อความอัตโนมัติ ยอมรับอาร์กิวเมนต์เดียวitemและมีขอบเขตของอินสแตนซ์แบบตัวพิมพ์ ควรส่งคืน html

วิธีการ

.typeahead (ตัวเลือก)

เริ่มต้นการป้อนข้อมูลด้วยการพิมพ์ล่วงหน้า

ตัวอย่าง

การนำทางย่อยทางด้านซ้ายเป็นการสาธิตสดของปลั๊กอินเสริม


การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

หากต้องการเพิ่มพฤติกรรมการติดไปยังองค์ประกอบใดๆ อย่างง่ายดาย เพียงเพิ่มdata-spy="affix"องค์ประกอบที่คุณต้องการสอดแนม จากนั้นใช้ออฟเซ็ตเพื่อกำหนดว่าเมื่อใดควรสลับการเปิดและปิดการตรึงองค์ประกอบ

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
หัวขึ้น! คุณต้องจัดการตำแหน่งขององค์ประกอบที่ตรึงไว้และพฤติกรรมขององค์ประกอบหลักที่อยู่ติดกัน ตำแหน่งถูกควบคุมโดย affix, , affix-topและ affix-bottomอย่าลืมตรวจสอบพาเรนต์ที่อาจยุบเมื่อส่วนต่อท้ายเริ่มเข้ามาในขณะที่กำลังลบเนื้อหาออกจากโฟลว์ปกติของหน้า

ผ่านจาวาสคริปต์

เรียกปลั๊กอินเสริมผ่าน JavaScript:

  1. $ ( '#navbar' ). ติด()

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-offset-top="200".

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
offset หมายเลข | ฟังก์ชั่น | วัตถุ 10 พิกเซลที่จะชดเชยจากหน้าจอเมื่อคำนวณตำแหน่งของการเลื่อน หากระบุหมายเลขเดียว ระบบจะใช้การชดเชยทั้งทางด้านบนและด้านซ้าย หากต้องการฟังทิศทางเดียวหรือออฟเซ็ตที่ไม่ซ้ำกันหลายรายการ เพียงแค่ระบุออบเจกoffset: { x: 10 }ต์ ใช้ฟังก์ชันเมื่อคุณต้องการให้ออฟเซ็ตแบบไดนามิก (มีประโยชน์สำหรับการออกแบบที่ตอบสนองบางอย่าง)