Javascript สำหรับ Bootstrap

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

Modals

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

ดรอปดาวน์

เพิ่มเมนูดรอปดาวน์ให้กับเกือบทุกอย่างใน Bootstrap ด้วยปลั๊กอินง่ายๆ นี้ Bootstrap รองรับเมนูดรอปดาวน์เต็มรูปแบบในแถบนำทาง แท็บ และยาเม็ด

Scrollspy

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

แท็บสลับได้

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

เคล็ดลับเครื่องมือ

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

ป๊อปโอเวอร์ *

เพิ่มเนื้อหาซ้อนทับขนาดเล็ก เช่น บน iPad ลงในองค์ประกอบใดๆ เพื่อใช้เป็นข้อมูลรอง

*ต้องรวมคำแนะนำเครื่องมือ

ข้อความแจ้งเตือน

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

ปุ่ม

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

ทรุด

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

ม้าหมุน

สร้างความสนุกสนานให้กับเนื้อหาใดๆ ที่คุณต้องการนำเสนอสไลด์โชว์เนื้อหาแบบโต้ตอบ

พิมพ์ล่วงหน้า

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

การเปลี่ยน*

สำหรับเอฟเฟกต์การเปลี่ยนอย่างง่าย ให้ใส่ bootstrap-transition.js หนึ่งครั้งเพื่อเลื่อนเป็นโมดอลหรือลบการแจ้งเตือน

*จำเป็นสำหรับแอนิเมชั่นในปลั๊กอิน

หัวขึ้น! ปลั๊กอินจาวาสคริปต์ทั้งหมดต้องการ jQuery เวอร์ชันล่าสุด

เกี่ยวกับ modals

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

ดาวน์โหลดไฟล์

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

ด้านล่างนี้เป็นโมดอลที่แสดงผลแบบคงที่

สาธิตสด

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

เปิดตัวโมดอลสาธิต

ใช้ bootstrap-modal

เรียก modal ผ่าน javascript:

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

ตัวเลือก

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

มาร์กอัป

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

นอกจากนี้ หากต้องการเพิ่มตัวเลือกให้กับอินสแตนซ์โมดอลของคุณ ให้รวมไว้เป็นแอตทริบิวต์ข้อมูลเพิ่มเติมบนองค์ประกอบควบคุมหรือมาร์กอัปโมดอล

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > เปิด Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. < ประเภท ปุ่ม = "ปุ่ม" คลาส= "ปิด" data-dismiss = "โมดอล" > × </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" data-dismiss = "modal" > ปิด</a>
  11. <a href = "#" class = "btn btn-primary" > บันทึกการเปลี่ยนแปลง</a>
  12. </div>
  13. </div>
หัวขึ้น! หากคุณต้องการให้โมดอลของคุณเคลื่อนไหวเข้าและออก เพียงเพิ่ม .fadeคลาสให้กับ .modalองค์ประกอบ (ดูการสาธิตเพื่อดูการทำงานจริง) และรวม bootstrap-transition.js

วิธีการ

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

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

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

.modal('toggle')

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

  1. $ ( '#myModal' ) โมดอล( 'สลับ' )

.modal('แสดง')

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

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

.modal('ซ่อน')

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

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

เหตุการณ์

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

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

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

ดาวน์โหลดไฟล์

ตัวอย่างแถบนำทางที่มี 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 คาร์ลส์ไม่ใช่การออกกำลังกายเพื่อความงาม บรู๊คลิน 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 แชมเบรย์ ลาบอริส เทมปอร์ เวเนียม แอนิม มอลลิต มินิม คอมโมโด อุลแลมโก้ ธันเดอร์แคทส์


ใช้ bootstrap-scrollspy.js

เรียก scrollspy ผ่านจาวาสคริปต์:

  1. $ ( '#navbar' ). scrollspy ()

มาร์กอัป

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

  1. <body data-spy = "เลื่อน" > ... </body>
หัวขึ้น! ลิงก์ 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. });

ตัวเลือก

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
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.


ใช้ bootstrap-tab.js

เปิดใช้งานแท็บแบบแท็บได้ผ่านจาวาสคริปต์ (ต้องเปิดใช้งานแต่ละแท็บแยกกัน):

  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)

มาร์กอัป

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

  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 สำหรับภาพเคลื่อนไหว และแอตทริบิวต์ข้อมูลสำหรับการจัดเก็บชื่อในเครื่อง

ดาวน์โหลดไฟล์

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

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

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


ใช้ bootstrap-tooltip.js

ทริกเกอร์คำแนะนำเครื่องมือผ่านจาวาสคริปต์:

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

ตัวเลือก

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

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

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

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

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

มาร์กอัป

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

  1. <a href = "#" rel = "คำแนะนำเครื่องมือ" = "คำแนะนำเครื่องมือแรก" > วางเมาส์เหนือฉัน</a>

วิธีการ

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

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

.tooltip('แสดง')

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

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

.tooltip('ซ่อน')

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

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

.tooltip('toggle')

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

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

เกี่ยวกับป๊อปโอเวอร์

เพิ่มเนื้อหาซ้อนทับขนาดเล็ก เช่น บน iPad ลงในองค์ประกอบใดๆ เพื่อใช้เป็นข้อมูลรอง

*ต้องรวม คำแนะนำ เครื่องมือ

ดาวน์โหลดไฟล์

ตัวอย่างโฮเวอร์ป๊อปโอเวอร์

วางเมาส์เหนือปุ่มเพื่อเรียกป๊อปโอเวอร์


ใช้ bootstrap-popover.js

เปิดใช้งานป๊อปโอเวอร์ผ่านจาวาสคริปต์:

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

ตัวเลือก

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

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

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

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

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

มาร์กอัป

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

วิธีการ

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

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

.popover('แสดง')

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

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

.popover('ซ่อน')

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

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

.popover('toggle')

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

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

เกี่ยวกับ alerts

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

ดาวน์โหลด

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

ปลั๊กอินการแจ้งเตือนทำงานบนข้อความเตือนปกติและบล็อกข้อความ

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

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

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

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


ใช้ bootstrap-alert.js

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

  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
สลับเดี่ยว
ช่องทำเครื่องหมาย
วิทยุ

ใช้ bootstrap-button.js

เปิดใช้งานปุ่มผ่านจาวาสคริปต์:

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

มาร์กอัป

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

  1. <!-- เพิ่ม data-toggle="button" เพื่อเปิดใช้งานการสลับบนปุ่มเดียว -->
  2. <button class = "btn" data-toggle = "button" > สลับเดี่ยว</button>
  3.  
  4. <!-- เพิ่ม data-toggle="buttons-checkbox" สำหรับการสลับรูปแบบช่องทำเครื่องหมายบน btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > ซ้าย</button>
  7. <button class = "btn" > กลาง</button>
  8. <button class = "btn" > ขวา</button>
  9. </div>
  10.  
  11. <!-- เพิ่ม data-toggle="buttons-radio" สำหรับการสลับรูปแบบวิทยุใน btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > ซ้าย</button>
  14. <button class = "btn" > กลาง</button>
  15. <button class = "btn" > ขวา</button>
  16. </div>

วิธีการ

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

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

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

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

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

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

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

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

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

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

  1. <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 ที่ยั่งยืน

ใช้ bootstrap-collapse.js

เปิดใช้งานผ่านจาวาสคริปต์:

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

ตัวเลือก

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

มาร์กอัป

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

  1. <button class = "btn btn-danger" data-toggle = "ยุบ" data-target = "#demo" >
  2. พับง่าย
  3. </button>
  4.  
  5. <div id = "demo" class = "ยุบใน" > </div>
หัวขึ้น! หากต้องการเพิ่มการจัดการกลุ่มแบบหีบเพลงให้กับตัวควบคุมที่ยุบได้ ให้เพิ่มแอตทริบิวต์ data-parent="#selector"ข้อมูล อ้างถึงการสาธิตเพื่อดูการดำเนินการนี้

วิธีการ

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

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

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

.collapse('toggle')

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

.collapse('แสดง')

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

.collapse('ซ่อน')

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

เหตุการณ์

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

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

เกี่ยวกับ

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

ดาวน์โหลดไฟล์

ตัวอย่าง

เริ่มพิมพ์ในฟิลด์ด้านล่างเพื่อแสดงผลการพิมพ์ล่วงหน้า


ใช้ bootstrap-typeahead.js

โทรพิมพ์ล่วงหน้าผ่านจาวาสคริปต์:

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

ตัวเลือก

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

มาร์กอัป

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

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

วิธีการ

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

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