-
Bootstrap หลักสูตร
Bootstrap CSS
- Bootstrap CSS ภาพรวม
- Bootstrap ระบบกริด
- Bootstrap การเรียงพิมพ์
- Bootstrap รหัส
- Bootstrap ตาราง
- Bootstrap ฟอร์ม
- Bootstrap ปุ่มกด
- Bootstrap ภาพ
- Bootstrap ชั้นเสริม
- Bootstrap ยูทิลิตี้ที่ตอบสนองต่อ
Bootstrap ส่วนประกอบเค้าโครง
- Bootstrap ไอคอนแบบอักษร
- Bootstrap เมนูแบบเลื่อนลง
- Bootstrap กลุ่มปุ่ม
- Bootstrap ปุ่มเมนูแบบเลื่อนลง
- Bootstrap กลุ่มกล่องใส่
- Bootstrap องค์ประกอบนำร่อง
- Bootstrap ป้าย
- Bootstrap สวดมนต์
- Bootstrap เพจจิ้ง
- Bootstrap ฉลาก
- Bootstrap สัญลักษณ์
- Bootstrap หน้าจอขนาดใหญ่
- Bootstrap ชื่อหน้า
- Bootstrap รูปขนาดย่อ
- Bootstrap การเตือน
- Bootstrap แถบความคืบหน้า
- Bootstrap วัตถุมัลติมีเดีย
- Bootstrap กลุ่มรายการ
- Bootstrap แผงหน้าปัด
- Bootstrap Wells
Bootstrap วิดเจ็ต
- Bootstrap Plug-สรุป
- Bootstrap ผลการเปลี่ยนแปลง
- Bootstrap กล่อง Modal
- Bootstrap เมนูแบบเลื่อนลง
- Bootstrap จอภาพเลื่อน
- Bootstrap แถบ
- Bootstrap เคล็ดลับเครื่องมือ
- Bootstrap กล่องป๊อปอัพ
- Bootstrap กล่องเตือน
- Bootstrap ปุ่มกด
- Bootstrap พับ
- Bootstrap ม้าหมุน
- Bootstrap นำทางเพิ่มเติม
Bootstrap อื่น ๆ
บทช่วยสอน บูตคำแนะนำเครื่องมือ (เคล็ดลับ) วิดเจ็ต ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ การใช้,ตัวอย่าง,ตัวเลือก,ทาง,ตัวอย่าง,เหตุการณ์,ตัวอย่าง,
บูตคำแนะนำเครื่องมือ (เคล็ดลับ) วิดเจ็ต
เมื่อคุณต้องการที่จะอธิบายการเชื่อมโยงและเคล็ดลับเครื่องมือ (เคล็ดลับ) จะมีประโยชน์มาก เคล็ดลับ (เคล็ดลับ) plug-inที่เป็นแรงบันดาลใจเจสันกรอบเขียนjQuery.tipsy เรื่อง เคล็ดลับ (เคล็ดลับ) plug-in ที่ได้ทำมากเพื่อปรับปรุงเช่นไม่ได้ขึ้นอยู่กับภาพแทนใช้ CSS เพื่อให้บรรลุผลภาพเคลื่อนไหวโดยใช้ข้อมูลแอตทริบิวต์ข้อมูลที่เก็บไว้ชื่อ
หากคุณต้องการที่จะอ้างถึงบุคคล Plug-in คุณสมบัติที่คุณจะต้องอ้างอิงtooltip.jsหรือเป็น เงินทุนปลั๊กอินภาพรวม บทที่กล่าวถึงคุณสามารถดูbootstrap.jsหรือเวอร์ชันบีบอัดbootstrap.min.js
การใช้
เคล็ดลับ (เคล็ดลับ) เนื้อหาปลั๊กอินสร้างและแท็กที่ต้องการเป็นคำแนะนำเครื่องมือเริ่มต้น (เคล็ดลับ) ที่ด้านหลังขององค์ประกอบงานของพวกเขา มีสองวิธีที่คุณสามารถเพิ่มคำแนะนำเครื่องมือ (เคล็ดลับ) มีดังนี้:
- ผ่านข้อมูลแอตทริบิวต์: การเพิ่มเคล็ดลับเครื่องมือ (เคล็ดลับ) เพียงเพิ่มข้อมูลสลับ = "คำแนะนำเครื่องมือ"ที่จะเป็นแท็กสมอ ชื่อเป็นสมอคำแนะนำเครื่องมือ (เคล็ดลับ) ข้อความ โดยค่าเริ่มต้น plug-in เคล็ดลับเครื่องมือ (เคล็ดลับ) ตั้งไว้ที่ด้านบน
<a href="#" data-toggle="tooltip" title="Example tooltip"> โปรดเลื่อนไปฉัน </a>
- โดย javascript: JavaScript ถูกเรียกโดยคำแนะนำเครื่องมือ (เคล็ดลับ):
$ ( '# ตัวบ่งชี้'). เคล็ดลับ (ตัวเลือก)
$ (ฟังก์ชั่น () {$ ( "[ข้อมูลสลับ = 'เคล็ดลับเครื่องมือ']") คำแนะนำเครื่องมือ () ;. });
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้เครื่องมือเคล็ดลับ (เคล็ดลับ) เครื่องมือโดยข้อมูลแอตทริบิวต์การใช้งาน
ตัวอย่าง
<H4> เครื่องมือพรอมต์ (เคล็ดลับ) เสียบ - สมอ </ H4> นี่คือ <a href = "#" class = "คำแนะนำเครื่องมือการทดสอบ" ข้อมูลสลับ = "คำแนะนำเครื่องมือ"
title = "เริ่มต้นเคล็ดลับ"> เริ่มต้นเคล็ดลับ </ A>. นี้เป็น <a href = "#" class = "คำแนะนำเครื่องมือการทดสอบ" ข้อมูลสลับ = "คำแนะนำเครื่องมือ"
ข้อมูลตำแหน่ง = "ซ้าย" เคล็ดลับ title = "เคล็ดลับที่ด้านซ้าย"> บนด้านซ้าย </ A>. นี้เป็น <a href = "#" ข้อมูลสลับ = "คำแนะนำเครื่องมือ" ข้อมูลตำแหน่ง = "top"
title = "เคล็ดลับด้านบน"> เคล็ดลับด้านบน </ A>. นี้เป็น <a href = "#" ข้อมูลสลับ = "คำแนะนำเครื่องมือ" ข้อมูลตำแหน่ง = "ด้านล่าง"
title = "เคล็ดลับด้านล่าง"> เคล็ดลับด้านล่าง </ A>. นี้เป็น <a href = "#" ข้อมูลสลับ = "คำแนะนำเครื่องมือ" ข้อมูลตำแหน่ง = "สิทธิ"
title = "เคล็ดลับด้านขวา"> ในเคล็ดลับด้านขวา </ a>
<Br>
<H4> เครื่องมือพรอมต์ (เคล็ดลับ) Widget - ปุ่ม </ h4>
<ปุ่ม type = "ปุ่ม" class = "btn BTN เริ่มต้น" ข้อมูลสลับ = "คำแนะนำเครื่องมือ"
title = "เริ่มต้นเคล็ดลับ"> เริ่มต้นเคล็ดลับ </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" class = "btn BTN เริ่มต้น" ข้อมูลสลับ = "คำแนะนำเครื่องมือ"
ข้อมูลตำแหน่ง = "ซ้าย" title = "เคล็ดลับเครื่องมือทางด้านซ้าย"> ในเคล็ดลับเครื่องมือด้านซ้าย </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" class = "btn BTN เริ่มต้น" ข้อมูลสลับ = "คำแนะนำเครื่องมือ"
ข้อมูลตำแหน่ง = "top" title = "ด้านบนเคล็ดลับ"> เคล็ดลับด้านบน </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" class = "btn BTN เริ่มต้น" ข้อมูลสลับ = "คำแนะนำเครื่องมือ"
ข้อมูลตำแหน่ง = "ด้านล่าง" title = "เคล็ดลับด้านล่าง"> ที่เคล็ดลับด้านล่าง </ ปุ่ม>
<ปุ่ม type = "ปุ่ม" class = "btn BTN เริ่มต้น" ข้อมูลสลับ = "คำแนะนำเครื่องมือ"
ข้อมูลตำแหน่ง = "สิทธิ" title = "เคล็ดลับด้านขวา"> ในเคล็ดลับด้านขวา </ ปุ่ม>
<script> $ (ฟังก์ชั่น () {$ ( "[ข้อมูลสลับ = 'เคล็ดลับเครื่องมือ']") คำแนะนำเครื่องมือ () ;. }); </ script>
ลอง»
ผลมีดังนี้
ตัวเลือก
มีตัวเลือกบางอย่างผ่าน Bootstrap API ข้อมูล (Data API เงินทุน) หรือโดยการเพิ่มการเรียก JavaScript เป็น ตารางต่อไปนี้แสดงรายการตัวเลือกเหล่านี้:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| animation | boolean 默认值：true | data-animation | 提示工具使用 CSS 渐变滤镜效果。 |
| html | boolean 默认值：false | data-html | 向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。 |
| placement | string|function 默认值：top | data-placement | 规定如何定位提示工具（即 top|bottom|left|right|auto）。 当指定为auto时，会动态调整提示工具。例如，如果 placement 是 "auto left"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。 |
| selector | string 默认值：false | data-selector | 如果提供了一个选择器，提示工具对象将被委派到指定的目标。 |
| title | string | function 默认值：'' | data-title | 如果未指定title属性，则 title 选项是默认的 title 值。 |
| trigger | string 默认值：'hover focus' | data-trigger | 定义如何触发提示工具： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。 |
| content | string | function 默认值：'' | data-content | 如果未指定data-content属性，则使用默认的 content 值。 |
| delay | number | object 默认值：0 | data-delay | 延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：
delay:
{ show: 500, hide: 100 } |
| container | string | false 默认值：false | data-container | 向指定元素追加提示工具。 实例： container: 'body' |
ทาง
นี่คือบางส่วนเคล็ดลับเครื่องมือ (เคล็ดลับ) plug-in วิธีที่มีประโยชน์:
| 方法 | 描述 | 实例 |
|---|---|---|
| Options:.tooltip(options) | 向元素集合附加提示工具句柄。 |
$().tooltip(options) |
| Toggle:.tooltip('toggle') | 切换显示/隐藏元素的提示工具。 |
$('#element').tooltip('toggle')
|
| Show:.tooltip('show') | 显示元素的提示工具。 |
$('#element').tooltip('show')
|
| Hide:.tooltip('hide') | 隐藏元素的提示工具。 |
$('#element').tooltip('hide')
|
| Destroy:.tooltip('destroy') | 隐藏并销毁元素的提示工具。 |
$('#element').tooltip('destroy')
|
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงเคล็ดลับเครื่องมือ (เคล็ดลับ) plug-in วิธีการใช้งาน
ตัวอย่าง
<div style = "padding: 100px 100px 10px ;"> นี่คือ <a href = "#" class = "เคล็ดลับเครื่องมือแสดง" ข้อมูลสลับ = "คำแนะนำเครื่องมือ"
title = "แสดง"> วิธีเคล็ดลับการแสดง </ A>. นี้เป็น <a href = "#" class = "เคล็ดลับเครื่องมือซ่อน" ข้อมูลสลับ = "คำแนะนำเครื่องมือ"
ข้อมูลตำแหน่ง = "ซ้าย" title = "ซ่อน"> วิธีเคล็ดลับซ่อน </ A>. นี้เป็น <a href = "#" class = "เคล็ดลับเครื่องมือทำลาย" ข้อมูลสลับ = "คำแนะนำเครื่องมือ"
ข้อมูลตำแหน่ง = "top" title = "ทำลาย"> วิธีเคล็ดลับเครื่องมือทำลาย </ A>. นี้เป็น <a href = "#" class = "เคล็ดลับเครื่องมือ-สลับ" ข้อมูลสลับ = "คำแนะนำเครื่องมือ"
ข้อมูลตำแหน่ง = "ด้านล่าง" title = "สลับ"> วิธีเคล็ดลับสลับ </ A>. <br> | <br> ฟรี
<p class = "เคล็ดลับเครื่องมือตัวเลือก" > นี่คือ <a href = "#" ข้อมูลสลับ = "คำแนะนำเครื่องมือ" title = "<H2> 'am Header2 </ h2>"> เคล็ดลับเครื่องมือ ตัวเลือกวิธี </ A>. </ p>
<script>
$ (ฟังก์ชั่น () {$ ( '.tooltip-Show' ) คำแนะนำเครื่องมือ ( 'แสดง') ;. }); $ (ฟังก์ชั่น () {$ ( '.tooltip ซ่อน' ) คำแนะนำเครื่องมือ ( 'ซ่อน') ;. }); $ (ฟังก์ชั่น () {$ ( '.tooltip ทำลาย' ) คำแนะนำเครื่องมือ ( 'ทำลาย') ;. }); $ (ฟังก์ชั่น () {$ ( '.tooltip-สลับ' ) คำแนะนำเครื่องมือ ( 'สลับ') ;. }); $ (ฟังก์ชั่น () . {$ ( ".tooltip ตัวเลือก เป็น") คำแนะนำเครื่องมือ ({HTML: จริง });});
</ script>
<div>
ลอง»
ผลมีดังนี้
เหตุการณ์
ตารางต่อไปนี้แสดงคำแนะนำเครื่องมือ (เคล็ดลับ) plug-in ที่จะใช้ในกรณีที่ เหตุการณ์เหล่านี้สามารถนำมาใช้เมื่อฟังก์ชั่นเบ็ด
| 事件 | 描述 | 实例 |
|---|---|---|
| show.bs.tooltip | 当调用 show 实例方法时立即触发该事件。 |
$('#myTooltip').on('show.bs.tooltip', function () {
// 执行一些动作th.
})
|
| shown.bs.tooltip | 当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 |
$('#myTooltip').on('shown.bs.tooltip', function () {
// 执行一些动作th.
})
|
| hide.bs.tooltip | 当调用 hide 实例方法时立即触发该事件。 |
$('#myTooltip').on('hide.bs.tooltip', function () {
// 执行一些动作th.
})
|
| hidden.bs.tooltip | 当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。 |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// 执行一些动作th.
})
|
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงเคล็ดลับเครื่องมือ (เคล็ดลับ) plug-in ที่ใช้เหตุการณ์
ตัวอย่าง
<H4> เครื่องมือพรอมต์ (เคล็ดลับ) เสียบ - สมอ </ H4> นี่คือ <a href = "#" class = "เคล็ดลับเครื่องมือแสดง" ข้อมูลสลับ = "คำแนะนำเครื่องมือ"
title = "เริ่มต้นเคล็ดลับ"> เริ่มต้นเคล็ดลับ </ A>. <script >
$ (ฟังก์ชั่น () {$ ( '.tooltip-Show' ) คำแนะนำเครื่องมือ ( 'แสดง') ;. }); $ (ฟังก์ชั่น () {$ ( '.tooltip-Show' ). เมื่อวันที่ ( 'show.bs.tooltip' ฟังก์ชั่น () {
การแจ้งเตือน ( "ข้อความแจ้งเตือนเกี่ยวกับการแสดง" );})
});
</ script>
ลอง»
ผลมีดังนี้
