เกี่ยวกับ modals

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

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

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

สาธิตสด

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

ใช้ bootstrap-modal

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

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

ตัวเลือก

มาร์กอัป

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

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

<a class = "btn" data-toggle = "modal" href = "#myModal" > เปิด Modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    < ประเภท ปุ่ม = "ปุ่ม" คลาส= "ปิด" data-dismiss = "โมดอล" > × </button>   
    <h3> ส่วนหัวของโมดอล</h3>
  </div>
  <div class = "modal-body" > 
    <p> หุ่นดี… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > ปิด</a>   
    <a href = "#" class = "btn btn-primary" > บันทึกการเปลี่ยนแปลง</a>  
  </div>
</div>

วิธีการ

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

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

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

.modal('toggle')

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

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

.modal('แสดง')

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

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

.modal('ซ่อน')

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

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

เหตุการณ์

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

$ ( '#myModal' ) เปิด( 'ซ่อน' , ฟังก์ชั่น() {   
  // ทำอะไรสักอย่าง…
})

เกี่ยวกับดรอปดาวน์

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

ตัวอย่าง

คลิกลิงก์การนำทางแบบเลื่อนลงในแถบนำทางและยาเม็ดด้านล่า��เพื่อทดสอบรายการแบบเลื่อนลง

• ลิงค์ปกติ
• หล่นลง
  • Action
  • Another action
  • Something else here
  • Separated link
• ดรอปดาวน์2
  • Action
  • Another action
  • Something else here
  • Separated link
• ดรอปดาวน์3
  • Action
  • Another action
  • Something else here
  • Separated link

ใช้ bootstrap-dropdown.js

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

$ ( '.dropdown-toggle' ) ดรอปดาวน์()

มาร์กอัป

หากต้องการเพิ่มฟังก์ชันดรอปดาวน์ให้กับองค์ประกอบใดๆ อย่างรวดเร็ว เพียงเพิ่มdata-toggle="dropdown"และรายการดรอปดาวน์ของบูตสแตรปที่ถูกต้องจะเปิดใช้งานโดยอัตโนมัติ

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > ลิงก์ปกติ</a></li>  
  <li class = "ดรอปดาวน์" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      หล่นลง
      <b class = "คาเร็ต" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > การกระทำ</a></li> 
      <li><a href = "#" > การดำเนินการอื่น</a></li> 
      <li><a href = "#" > อย่างอื่นที่นี่</a></li> 
      <li class = "ตัวแบ่ง" ></li> 
      <li><a href = "#" > ลิงก์แยก</a></li> 
    </ul>
  </li>
  ...
</ul>

หากต้องการคง URL ไว้ ให้ใช้data-targetแอตทริบิวต์แทนhref="#".

<ul class = "nav nav-pills" > 
  <li class = "ดรอปดาวน์" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      หล่นลง
      <b class = "คาเร็ต" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

วิธีการ

$().dropdown()

API แบบเป็นโปรแกรมสำหรับเปิดใช้งานเมนูสำหรับแถบนำทางที่กำหนดหรือการนำทางแบบแท็บ

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

ตัวอย่างแถบนำทางที่มี scrollspy

เลื่อนพื้นที่ด้านล่างและดูการอัปเดตการนำทาง รายการย่อยแบบเลื่อนลงจะถูกเน้นด้วย ลองมัน!

ใช้ bootstrap-scrollspy.js

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

$ ( '#navbar' ). scrollspy ()

มาร์กอัป

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

<body data-spy = "เลื่อน" > ... </body>  

วิธีการ

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

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

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

ตัวเลือก

เหตุการณ์

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

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

คลิกแท็บด้านล่างเพื่อสลับระหว่างบานหน้าต่างที่ซ่อนอยู่ แม้จะผ่านเมนูแบบเลื่อนลง

• บ้าน
• ประวัติโดยย่อ
• หล่นลง
  • @fat
  • @mdo

ใช้ bootstrap-tab.js

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

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

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

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

มาร์กอัป

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

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

วิธีการ

$().tab

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

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > หน้าแรก</a></li>  
  <li><a href = "#โปรไฟล์" > โปรไฟล์</a></li> 
  <li><a href = "#ข้อความ" > ข้อความ</a></li> 
  <li><a href = "#settings" > การตั้งค่า</a></li> 
</ul>
 
<div class = "เนื้อหาแท็บ" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( ฟังก์ชัน() {  
    $ ( '#myTab a:last' ) แท็บ( 'แสดง' );
  })
</script>

เหตุการณ์

$ ( 'a[data-toggle="tab"]' ) เปิด( 'แสดง' ฟังก์ชัน( จ) {   
  อี_ เป้าหมาย// เปิดใช้งานแท็บ
  อี_ relatedTarget // แท็บก่อนหน้า
})

เกี่ยวกับคำแนะนำเครื่องมือ

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

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

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

ใช้ bootstrap-tooltip.js

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

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

ตัวเลือก

มาร์กอัป

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

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

วิธีการ

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

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

.tooltip('แสดง')

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

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

.tooltip('ซ่อน')

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

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

.tooltip('toggle')

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

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

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

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

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

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

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

ใช้ bootstrap-popover.js

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

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

ตัวเลือก

มาร์กอัป

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

วิธีการ

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

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

.popover('แสดง')

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

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

.popover('ซ่อน')

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

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

.popover('toggle')

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

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

เกี่ยวกับ alerts

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

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

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

ใช้ bootstrap-alert.js

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

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

มาร์กอัป

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

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

วิธีการ

$().alert()

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

.alert('ปิด')

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

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

เหตุการณ์

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

$ ( '#my-alert' ) ผูก( 'ปิด' ฟังก์ชัน( ) {   
  // ทำอะไรสักอย่าง…
})

เกี่ยวกับ

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

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

ใช้ปลั๊กอินปุ่มสำหรับสถานะและการสลับ

ใช้ bootstrap-button.js

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

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

มาร์กอัป

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

<!-- เพิ่ม data-toggle="button" เพื่อเปิดใช้งานการสลับบนปุ่มเดียว -->
<button class = "btn" data-toggle = "button" > สลับเดี่ยว</button>  
 
<!-- เพิ่ม data-toggle="buttons-checkbox" สำหรับการสลับรูปแบบช่องทำเครื่องหมายบน btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > ซ้าย</button> 
  <button class = "btn" > กลาง</button> 
  <button class = "btn" > ขวา</button> 
</div>
 
<!-- เพิ่ม data-toggle="buttons-radio" สำหรับการสลับรูปแบบวิทยุใน btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > ซ้าย</button> 
  <button class = "btn" > กลาง</button> 
  <button class = "btn" > ขวา</button> 
</div>

วิธีการ

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

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

<button class = "btn" data-toggle = "button" > … </button>   

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

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

<button class = "btn" data-loading-text = "กำลังโหลดสิ่งของ..." > ... </button>   

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

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

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

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

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

เกี่ยวกับ

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

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

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

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

ใช้ bootstrap-collapse.js

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

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

ตัวเลือก

มาร์กอัป

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

<button class = "btn btn-danger" data-toggle = "ยุบ" data-target = "#demo" >   
  พับง่าย
</button>
 
<div id = "demo" class = "ยุบใน" > … </div>  

วิธีการ

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

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

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

.collapse('toggle')

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

.collapse('แสดง')

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

.collapse('ซ่อน')

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

เหตุการณ์

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

$ ( '#myCollapsible' ) เปิด( 'ซ่อน' , ฟังก์ชั่น() {   
  // ทำอะไรสักอย่าง…
})

เกี่ยวกับ

ปลั๊กอินทั่วไปสำหรับการวนรอบองค์ประกอบ ม้าหมุน.

ตัวอย่างม้าหมุน

ดูสไลด์โชว์ด้านล่าง

ป้ายรูปขนาดย่อแรก

Cras justo odio, dapibus ac facilisis ใน, egestas eget quam Donec id elit non mi porta gravida ที่ eget metus Nullam id dolor id nibh ultricies vehicula ut id elit

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

ใช้ bootstrap-carousel.js

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

$ ( '.carousel' ) ม้าหมุน()

ตัวเลือก

มาร์กอัป

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

<div id = "myCarousel" class = "สไลด์แบบหมุน" >  
  <!-- รายการม้าหมุน -->
  <div class = "carousel-inner" > 
    <div class = "รายการที่ใช้งานอยู่" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- การนำทางแบบหมุน -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

วิธีการ

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

เริ่มต้นวงล้อด้วยตัวเลือกเสริมobjectและเริ่มวนรอบรายการต่างๆ

$ ( '.carousel' ) ม้าหมุน({
  ช่วงเวลา: 2000 
})

.carousel('วงจร')

หมุนเวียนผ่านรายการแบบหมุนจากซ้ายไปขวา

.carousel('หยุดชั่วคราว')

หยุดม้าหมุนจากการปั่นจักรยานผ่านรายการ

.carousel(หมายเลข)

หมุนวงล้อไปที่เฟรมใดเฟรมหนึ่ง (อิงตาม 0 คล้ายกับอาร์เรย์)

.carousel('ก่อนหน้า')

วนไปยังรายการก่อนหน้า

.carousel('ถัดไป')

วนไปยังรายการถัดไป

เหตุการณ์

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

เกี่ยวกับ

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

ตัวอย่าง

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

ใช้ bootstrap-typeahead.js

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

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

ตัวเลือก

มาร์กอัป

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

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

วิธีการ

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

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