บูตปุ่ม (ปุ่ม) วิดเจ็ต
ปุ่ม (ปุ่ม) ใน ปุ่ม Bootstrap แนะนำในบท ปุ่ม (ปุ่ม) plug-in ที่คุณสามารถเพิ่มบางโต้ตอบเช่นปุ่มควบคุมสหรัฐอเมริกาหรือสร้างกลุ่มของปุ่มสำหรับส่วนประกอบอื่น ๆ (เช่นแถบเครื่องมือ)
หากคุณต้องการที่จะอ้างถึงบุคคล Plug-in คุณสมบัติที่คุณจะต้องอ้างอิงbutton.jsหรือเป็น เงินทุนปลั๊กอินภาพรวม บทที่กล่าวถึงคุณสามารถดูbootstrap.jsหรือเวอร์ชันบีบอัดbootstrap.min.js
สถานะกำลังโหลด
เพื่อเพิ่มความเร็วในการโหลดรัฐของปุ่มเพียงเพิ่มองค์ประกอบที่ปุ่มข้อมูลโหลดข้อความ = "กำลังโหลด ... " เป็นคุณสมบัติที่สามารถตามที่แสดงในตัวอย่างต่อไปนี้:
ตัวอย่าง
<ปุ่ม id = "ไขมัน btn" class = "BTN BTN หลัก" ข้อมูลโหลดข้อความ = "กำลังโหลด ... "
type = "ปุ่ม"> สถานะโหลด </ ปุ่ม>
<script> $ (ฟังก์ชั่น () {$ ( ". Btn"). คลิก (ฟังก์ชั่น () {$ (นี้) .button ( 'โหลด'). การหน่วงเวลา (1000) .queue (ฟังก์ชั่น () {// $ ( นี้) .button ( 'รีเซ็ต') ;});});}); </ script>
ผลมีดังนี้
สวิทช์เดี่ยว
เพื่อเปิดใช้งานสวิทช์ปุ่มเดียว (เช่นการเปลี่ยนแปลงสภาพปกติของปุ่มกดของรัฐและในทางกลับกัน)เพียงเพิ่มข้อมูลสลับ = "ปุ่ม" องค์ประกอบปุ่มเป็นคุณสมบัติที่สามารถตามที่แสดงในตัวอย่างต่อไปนี้:
ตัวอย่าง
<ปุ่ม type = "ปุ่ม" class = "BTN BTN หลัก"
ข้อมูลสลับ = "ปุ่ม"> สลับเดียว </ ปุ่ม>
ผลมีดังนี้
ช่องทำเครื่องหมาย (ช่องทำเครื่องหมาย)
คุณสามารถสร้างกลุ่มกล่องกาเครื่องหมายและโดยการเพิ่มข้อมูลแอตทริบิวต์ข้อมูลสลับไป BTN กลุ่ม= "ปุ่ม" เพื่อเพิ่มกลุ่มกล่องสวิทช์
ตัวอย่าง
<div class = "BTN กลุ่ม" ข้อมูลสลับ = "ปุ่ม">
<label class = "BTN BTN หลัก" >
<input type = "ช่องทำเครื่องหมาย"> ตัวเลือกที่ 1 </ label>
<label class = "BTN BTN หลัก" >
<input type = "ช่องทำเครื่องหมาย"> ตัวเลือกที่ 2 </ label>
<label class = "BTN BTN หลัก" >
<input type = "ช่องทำเครื่องหมาย"> ตัวเลือกที่ 3 </ label>
</ div>
ผลมีดังนี้
ปุ่มวิทยุ (Radio)
ในทำนองเดียวกันคุณสามารถสร้างกลุ่มวิทยุและโดยการเพิ่มข้อมูลแอตทริบิวต์ข้อมูลสลับ = "ปุ่ม" เพื่อเพิ่ม BTN กลุ่มเพื่อสลับกลุ่มปุ่ม
ตัวอย่าง
<div class = "BTN กลุ่ม" ข้อมูลสลับ = "ปุ่ม">
<label class = "BTN BTN หลัก" >
<input type = "วิทยุ" name = "ตัวเลือก" id = "OPTION1"> ตัวเลือกที่ 1 </ label>
<label class = "BTN BTN หลัก" >
<input type = "วิทยุ" name = "ตัวเลือก" id = "Option2"> ตัวเลือกที่ 2 </ label>
<label class = "BTN BTN หลัก" >
<input type = "วิทยุ" name = "ตัวเลือก" id = "option3"> ตัวเลือกที่ 3 </ label>
</ div>
ผลมีดังนี้
การใช้
คุณสามารถเปิดใช้ปุ่ม (ปุ่ม)เสียบผ่าน JavaScript ดังนี้
$ ( '. Btn'). ปุ่ม ()
ตัวเลือก
มีตัวเลือกไม่มี
ทาง
ต่อไปนี้คือบางส่วนของปุ่ม (ปุ่ม) plug-in วิธีที่มีประโยชน์:
| 方法 | 描述 | 实例 |
|---|
| button('toggle') | 切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。 |
$().button('toggle') |
| .button('loading') | 当加载时，按钮是禁用的，且文本变为 button 元素的data-loading-text属性的值。 |
$().button('loading') |
| .button('reset') | 重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。 |
$().button('reset') |
| .button(string) | 该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。 |
$().button(string) |
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้วิธีการดังกล่าวข้างต้นนี้
ตัวอย่าง
<h2> คลิกที่ปุ่มแต่ละปุ่มเพื่อดูผลของวิธีการ </ H2> The
<H4> สาธิตการ .button ( 'สลับ') วิธี </ h4>
<div id = "myButtons1" class = "BS-ตัวอย่างเช่น">
<ปุ่ม type = "ปุ่ม" class = "BTN BTN หลัก" > ต้นฉบับ </ ปุ่ม>
</ div>
<H4> สาธิตการ .button ( 'โหลด') วิธี </ h4>
<div id = "myButtons2" class = "BS-ตัวอย่างเช่น">
<ปุ่ม type = "ปุ่ม" class = "BTN BTN หลัก"
ข้อมูลโหลดข้อความ = "กำลังโหลด ... "> ต้นฉบับ </ ปุ่ม>
</ div>
<H4> สาธิตการ .button ( 'รีเซ็ต') วิธี </ h4>
<div id = "myButtons3" class = "BS-ตัวอย่างเช่น">
<ปุ่ม type = "ปุ่ม" class = "BTN BTN หลัก"
ข้อมูลโหลดข้อความ = "กำลังโหลด ... "> ต้นฉบับ </ ปุ่ม>
</ div>
<H4> สาธิตการ .button (String) วิธี </ h4>
<ปุ่ม type = "ปุ่ม" class = "BTN BTN หลัก" id = "myButton4"
ข้อมูลที่สมบูรณ์ข้อความ = "กำลังโหลด เสร็จ"> คลิกฉัน </ ปุ่ม>
<script>
$ (ฟังก์ชั่น () {$ ( "# MyButtons1 .btn" ) คลิก (ฟังก์ชั่น () {$ (นี้) ปุ่ม ( 'สลับ') ;. }) ;. }); $ (ฟังก์ชั่น () {$ ( "# .btn MyButtons2" ). คลิก (ฟังก์ชั่น () {$ (นี้). Button ( 'โหลด'). การหน่วงเวลา (1000). คิว (ฟังก์ชั่น () {
});});}) ; $ (ฟังก์ชั่น () {$ ( "# .btn MyButtons3" ). คลิก (ฟังก์ชั่น () {$ (นี้). Button ( 'โหลด'). การหน่วงเวลา (1000). คิว (ฟังก์ชั่น () {$ (นี้) ปุ่ม ( ' รีเซ็ต') ;. });});}); $ (ฟังก์ชั่น () {$ ( "# MyButton4") . คลิก (ฟังก์ชั่น () {$ (นี้). Button ( 'โหลด'). การหน่วงเวลา (1000). คิว (ฟังก์ชั่น () {$ (นี้) ปุ่ม (. 'สมบูรณ์');});});});
</ script>
ผลมีดังนี้
