บทช่วยสอน ตัวอย่างเช่น jQuery UI - กล่องคำแนะนำเครื่องมือ (เคล็ดลับ) ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ฟังก์ชั่นเริ่มต้น,ลักษณะที่กำหนดเอง,เคลื่อนไหวแบบกำหนดเอง,เนื้อหาที่กำหนดเอง,ฟอร์ม,เมาส์ติดตาม,เครื่องเล่นวีดีโอ,
ปรับแต่งกล่องคำแนะนำเครื่องมือ themable แทนที่พื้นเมืองกล่องคำแนะนำเครื่องมือ
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับสมาชิกในคำแนะนำเครื่องมือ, ดูเอกสาร API สมาชิกกล่องคำแนะนำเครื่องมือ (เคล็ดลับเครื่องมือที่)
วางเมาส์ที่ลิงค์หรือใช้คีย์แท็บเพื่อวงจรผ่านมุ่งเน้นในแต่ละองค์ประกอบ
<! Doctype html> <html lang = "th"> <head> <Meta charset = "UTF-8"> <title> jQuery UI กล่องคำแนะนำเครื่องมือ (เคล็ดลับ) - ฟังก์ชั่นเริ่มต้น </ title> <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css"> <script> $ (ฟังก์ชั่น () { $ (เอกสาร) .tooltip (); }); </ script> <style> ป้าย { จอแสดงผล: อินไลน์บล็อก ความกว้าง: 5em; } </ style> </ head> <body> <p> <a href="#" title="部件的名称">คำแนะนำเครื่องมือ </a> มันสามารถจะผูกพันกับองค์ประกอบใด ๆ เมื่อคุณเลื่อนเมาส์ไปที่องค์ประกอบคุณสมบัติชื่อจะถูกแสดงในกล่องเล็ก ๆ ติดกับองค์ประกอบที่เป็นพื้นเมืองเป็นเครื่องมือในกล่องปลาย </ p> <p> แต่เพราะมันไม่ได้เป็นกล่องคำแนะนำเครื่องมือพื้นเมืองเพื่อที่จะสามารถกำหนดรูปแบบ ธีมโดย <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> สร้างขึ้นนอกจากนี้ยังสามารถกำหนดรูปแบบกล่องตามคำแนะนำเครื่องมือ </ p> <p> คำแนะนำเครื่องมือกล่องนอกจากนี้ยังสามารถนำมาใช้ในรูปแบบองค์ประกอบที่จะแสดงในแต่ละภูมิภาคบางข้อมูลเพิ่มเติม </ p> <p> <ฉลาก = "อายุ"> อายุของคุณ: </ label> <input id = "อายุ" title = ". อายุจะใช้สำหรับสถิติ"> </ p> <p> โฉบเหนือพื้นที่ที่สอดคล้องกันเพื่อดูเครื่องมือที่กล่องปลาย </ p> </ body> </ html>
วางเมาส์ที่ลิงค์หรือใช้คีย์แท็บเพื่อวงจรผ่านมุ่งเน้นในแต่ละองค์ประกอบ
<! Doctype html> <html lang = "th"> <head> <Meta charset = "UTF-8"> <title> jQuery UI กล่องคำแนะนำเครื่องมือ (เคล็ดลับ) - รูปแบบที่กำหนดเอง </ title> <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css"> <script> $ (ฟังก์ชั่น () { $ (เอกสาร) .tooltip ({ ตำแหน่ง: { ฉัน: "กลางด้านล่าง-20" ที่: "ด้านบนตรงกลาง" โดยใช้ฟังก์ชั่น (ตำแหน่งความคิดเห็น) { $ (นี้) .css (ตำแหน่ง); $ ( "<div>") .addClass ( "ลูกศร") .addClass (feedback.vertical) .addClass (feedback.horizontal) .appendTo (นี้); } } }); }); </ script> <style> .ui-คำแนะนำ, .arrow: หลังจาก { พื้นหลัง: สีดำ; ชายแดน: 2px ของแข็งสีขาว; } .ui-คำแนะนำเครื่องมือ { padding: 10px 20px; สี: สีขาว; border-radius: 20px; ตัวอักษร: 14px กล้า "Helvetica Neue" Sans-Serif; ข้อความเปลี่ยน: พิมพ์ใหญ่; กล่องเงา: 0 0 7PX สีดำ } .arrow { ความกว้าง: 70px; ความสูง: 16px; ล้น: ซ่อน; position: absolute; ซ้าย: 50%; ขอบซ้าย: -35px; ด้านล่าง: -16px; } .arrow.top { ด้านบน: -16px; ด้านล่าง: อัตโนมัติ } .arrow.left { ซ้าย: 20%; } .arrow: หลังจาก { เนื้อหา: ""; position: absolute; ซ้าย: 20px; ด้านบน: -20px; ความกว้าง: 25 พิกเซล; ความสูง: 25 พิกเซล; กล่องเงา: 6px 5px 9px -9px สีดำ -webkit-เปลี่ยน: หมุน (45deg); -moz-เปลี่ยน: หมุน (45deg); -ms-เปลี่ยน: หมุน (45deg); -o-เปลี่ยน: หมุน (45deg); tranform: หมุน (45deg); } .arrow.top: หลังจาก { ด้านล่าง: -20px; ด้านบน: อัตโนมัติ } </ style> </ head> <body> <p> <a href="#" title="部件的名称">คำแนะนำเครื่องมือ </a> มันสามารถจะผูกพันกับองค์ประกอบใด ๆ เมื่อคุณเลื่อนเมาส์ไปที่องค์ประกอบคุณสมบัติชื่อจะถูกแสดงในกล่องเล็ก ๆ ติดกับองค์ประกอบที่เป็นพื้นเมืองเป็นเครื่องมือในกล่องปลาย </ p> <p> แต่เพราะมันไม่ได้เป็นกล่องคำแนะนำเครื่องมือพื้นเมืองเพื่อที่จะสามารถกำหนดรูปแบบ ธีมโดย <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> สร้างขึ้นนอกจากนี้ยังสามารถกำหนดรูปแบบกล่องตามคำแนะนำเครื่องมือ </ p> <p> คำแนะนำเครื่องมือกล่องนอกจากนี้ยังสามารถนำมาใช้ในรูปแบบองค์ประกอบที่จะแสดงในแต่ละภูมิภาคบางข้อมูลเพิ่มเติม </ p> <p> <ฉลาก = "อายุ"> อายุของคุณ: </ label> <input id = "อายุ" title = ". อายุจะใช้สำหรับสถิติ"> </ p> <p> โฉบเหนือพื้นที่ที่สอดคล้องกันเพื่อดูเครื่องมือที่กล่องปลาย </ p> </ body> </ html>
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการใช้งานแสดงและซ่อนตัวเลือกในการปรับแต่งภาพเคลื่อนไหวที่คุณยังสามารถใช้เหตุการณ์ที่เปิดในการปรับแต่งภาพเคลื่อนไหว
<! Doctype html> <html lang = "th"> <head> <Meta charset = "UTF-8"> <title> jQuery UI กล่องคำแนะนำเครื่องมือ (เคล็ดลับ) - เคลื่อนไหวแบบกำหนดเอง </ title> <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css"> <script> $ (ฟังก์ชั่น () { $ ( "# แสดงตัวเลือก") .tooltip ({ แสดง: { ผลกระทบ: "slideDown" ล่าช้า: 250 } }); $ ( "# ซ่อนตัวเลือก") .tooltip ({ ซ่อน: { ผลกระทบ: "ระเบิด" ล่าช้า: 250 } }); $ ( "# เปิดกิจกรรม") .tooltip ({ แสดง: โมฆะ ตำแหน่ง: { ฉัน: "บนซ้าย" ที่: "ด้านล่างซ้าย" } เปิดฟังก์ชั่น (เหตุการณ์ UI) { ui.tooltip.animate ({ด้านบน: ui.tooltip.position () ยอดนิยม + 10} "เร็ว"); } }); }); </ script> </ head> <body> <p> มีหลายวิธีในการปรับแต่งภาพเคลื่อนไหวกล่องคำแนะนำเครื่องมือที่มี </ p> <p> คุณสามารถใช้ <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑动显示">แสดง </a> และ <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隐藏">ซ่อนตัวเลือก </a> </ p> <p> นอกจากนี้คุณยังสามารถใช้ <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="向下移动显示">เปิด </a> เหตุการณ์ </ p> </ body> </ html>
แสดงให้เห็นถึงวิธีการกำหนดรายการและตัวเลือกเนื้อหาที่จะรวมกล่องเหตุการณ์ผู้รับมอบสิทธิ์คำแนะนำเครื่องมือที่แตกต่างกันไปเช่นเดียว
คุณอาจจำเป็นต้องมีปฏิสัมพันธ์ map กล่องคำแนะนำ, ซึ่งเป็นรุ่นอนาคตของฟังก์ชั่นในการรับรู้
<! Doctype html> <html lang = "th"> <head> <Meta charset = "UTF-8"> <title> jQuery UI กล่องคำแนะนำเครื่องมือ (เคล็ดลับ) - เนื้อหาที่กำหนดเอง </ title> <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css"> <style> .photo { width: 300px; text-align: ศูนย์; } .photo .ui-Widget หัว { margin: 1em 0; } .map { ความกว้าง: 350px; ความสูง: 350px; } .ui-คำแนะนำเครื่องมือ { ความกว้างสูงสุด: 350px; } </ style> <script> $ (ฟังก์ชั่น () { $ (เอกสาร) .tooltip ({ รายการ "img [ข้อมูลทางภูมิศาสตร์], [ชื่อ]" เนื้อหา: ฟังก์ชั่น () { องค์ประกอบ var = $ (นี้); ถ้า (element.is ( "[ข้อมูลทางภูมิศาสตร์]")) { ข้อความ var = element.text (); กลับ "<img class = 'แผนที่' alt = '" + ข้อความ + "src = 'http: //maps.google.com/maps/api/staticmap?" + "ซูม = 11 & size = 350x350 และ maptype = ภูมิประเทศและเซ็นเซอร์ = false & ศูนย์ =" + ข้อความ + ""> "; } ถ้า (element.is ( "[ชื่อ]")) { กลับ element.attr ( "ชื่อ"); } ถ้า (element.is ( "img")) { กลับ element.attr ( "alt"); } } }); }); </ script> </ head> <body> <ระดับ Div = "รูปภาพ UI-Widget"> <ระดับ Div = "UI-Widget หัว UI-มุมทั้งหมด"> <h2> วิหารเซนต์สตีเฟ (มหาวิหารเซนต์สตีเฟน) </ h2> <h3> <a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo=""> กรุงเวียนนาประเทศออสเตรีย (เวียนนาประเทศออสเตรีย) </a> < / h3> </ div> <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG"> <img src = "th/ wp-content / uploads / 2014/03 / ST-stephens.jpg" alt = "วิหารเซนต์สตีเฟ (เซนต์สตีเฟ่เว็บไซต์นั้นมีวิหาร)" class = "UI-มุมทั้งหมด"> </a> </ div> <ระดับ Div = "รูปภาพ UI-Widget"> <ระดับ Div = "UI-Widget หัว UI-มุมทั้งหมด"> <h2> ทาวเวอร์บริดจ์ (Tower Bridge) </ h2> <h3> <a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo=""> ลอนดอน (London, England) </a> < / h3> </ div> <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg"> <img src = "th/ wp-content / uploads / 2014/03 / หอ bridge.jpg" alt = "ทาวเวอร์บริดจ์ (Tower Bridge)" class = "UI-มุมทั้งหมด"> </a> </ div> <p> ทุกภาพจาก <a href="http://commons.wikimedia.org/wiki/Main_Page"> มีเดียคอมมอนส์ </a> และเป็นเจ้าของโดย <a href = "http://creativecommons.org/ ใบอนุญาต / โดย SA / 3.0 / deed.en "title =" ครีเอทีฟคอมมอนส์แบบเดียวกัน 3.0 "> CC BY-SA 3.0 </a> ภายใต้ผู้ถือลิขสิทธิ์ </ p> </ body> </ html>
ใช้ปุ่มด้านล่างนี้เพื่อแสดงข้อความช่วยเหลือหรือเพียงแค่ให้เลื่อนเมาส์ไปที่กล่องใส่หรือมีกล่องใส่ได้มุ่งเน้นคุณสามารถแสดงข้อความช่วยเหลือกล่องใส่ที่สอดคล้องกัน
กำหนดความกว้างของการแก้ไขใน CSS เพื่อให้พร้อมกันแสดงความช่วยเหลือทุกข้อความที่มีลักษณะที่สอดคล้องกันมากขึ้น
<! Doctype html> <html lang = "th"> <head> <Meta charset = "UTF-8"> <title> jQuery UI กล่องคำแนะนำเครื่องมือ (เคล็ดลับ) - แบบฟอร์ม </ title> <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css"> <style> ป้าย { จอแสดงผล: อินไลน์บล็อกความกว้าง: 5em; } div fieldset { ขอบล่าง: 2em; } .help fieldset { จอแสดงผล: อินไลน์บล็อก } .ui-คำแนะนำเครื่องมือ { ความกว้าง: 210px; } </ style> <script> $ (ฟังก์ชั่น () { เคล็ดลับ var = $ ( "[ชื่อ]") .tooltip (); $ ( "<ปุ่ม>") .Text ( "แสดงความช่วยเหลือ") .button () จำนวนคลิก (ฟังก์ชั่น () { tooltips.tooltip ( "เปิด"); }) .insertAfter ( "รูปแบบ"); }); </ script> </ head> <body> <form> <fieldset> <div> <label สำหรับ = "FirstName"> ชื่อ </ label> <input id = "FirstName" ชื่อ = "FirstName" title = "โปรดระบุชื่อแรกของคุณ."> </ div> <div> <label สำหรับ = "นามสกุล"> นามสกุล </ label> <input id = "นามสกุล" ชื่อ = "นามสกุล" title = "โปรดระบุชื่อสุดท้ายของคุณ."> </ div> <div> <label สำหรับ = "ที่อยู่"> ที่อยู่ </ label> <input id = "ที่อยู่" ชื่อ = "ที่อยู่" title = "บ้านหรือที่ทำงานของคุณ."> </ div> </ fieldset> </ form> </ body> </ html>
ในกรณีนี้คำแนะนำเครื่องมือกล่องอยู่ในตำแหน่งที่เมื่อเทียบกับเมาส์เมื่อย้ายเมาส์ไปที่องค์ประกอบก็จะเป็นไปตามการเคลื่อนไหวของเมาส์
<! Doctype html> <html lang = "th"> <head> <Meta charset = "UTF-8"> <title> jQuery UI กล่องคำแนะนำเครื่องมือ (เคล็ดลับ) - การติดตามเมาส์ </ title> <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css"> <style> ป้าย { จอแสดงผล: อินไลน์บล็อก ความกว้าง: 5em; } </ style> <script> $ (ฟังก์ชั่น () { $ (เอกสาร) .tooltip ({ ติดตาม: จริง }); }); </ script> </ head> <body> <p> <a href="#" title="部件的名称">คำแนะนำเครื่องมือ </a> มันสามารถจะผูกพันกับองค์ประกอบใด ๆ เมื่อคุณเลื่อนเมาส์ไปที่องค์ประกอบคุณสมบัติชื่อจะถูกแสดงในกล่องเล็ก ๆ ติดกับองค์ประกอบที่เป็นพื้นเมืองเป็นเครื่องมือในกล่องปลาย </ p> <p> แต่เพราะมันไม่ได้เป็นกล่องคำแนะนำเครื่องมือพื้นเมืองเพื่อที่จะสามารถกำหนดรูปแบบ ธีมโดย <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> สร้างขึ้นนอกจากนี้ยังสามารถกำหนดรูปแบบกล่องตามคำแนะนำเครื่องมือ </ p> <p> คำแนะนำเครื่องมือกล่องนอกจากนี้ยังสามารถนำมาใช้ในรูปแบบองค์ประกอบที่จะแสดงในแต่ละภูมิภาคบางข้อมูลเพิ่มเติม </ p> <p> <ฉลาก = "อายุ"> อายุของคุณ: </ label> <input id = "อายุ" title = ". อายุจะใช้สำหรับสถิติ"> </ p> <p> โฉบเหนือพื้นที่ที่สอดคล้องกันเพื่อดูเครื่องมือที่กล่องปลาย </ p> </ body> </ html>
เครื่องเล่นวิดีโอเสมือนกับชอบ / หุ้น / ปุ่มสถิติแต่ละปุ่มที่มีกล่องรูปแบบที่กำหนดเองคำแนะนำเครื่องมือ
<! Doctype html> <html lang = "th"> <head> <Meta charset = "UTF-8"> <title> jQuery UI กล่องคำแนะนำเครื่องมือ (เคล็ดลับ) - Video Player </ title> <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css"> <style> .player { ความกว้าง: 500px; ความสูง: 300px; ชายแดน: 2px ร่องสีเทา; พื้นหลัง: rgb (200, 200, 200); text-align: ศูนย์; line-height: 300px; } .ui-คำแนะนำเครื่องมือ { ชายแดน: 1px ของแข็งสีขาว; พื้นหลัง: RGBA (20, 20, 20, 1); สี: สีขาว; } .set { จอแสดงผล: อินไลน์บล็อก } .notification { position: absolute; จอแสดงผล: อินไลน์บล็อก font-size: 2em; padding: .5em; กล่องเงา: 2px 2px 5px -2px RGBA (0,0,0,0.5); } </ style> <script> $ (ฟังก์ชั่น () { ฟังก์ชั่นแจ้งเตือน (input) { var MSG = "เลือก" + $ .trim (input.data ( "เคล็ดลับเครื่องมือชื่อ") || input.text ()); $ ( "<div>") .appendTo (document.body) .Text (MSG) .addClass ( "ประกาศ UI-รัฐเริ่มต้น UI-มุมด้านล่าง") .position ({ ฉัน: "ด้านบนตรงกลาง" ที่: "ด้านบนตรงกลาง" ของหน้าต่าง }) .show ({ ผลกระทบ: "ตาบอด" }) .delay (1000) .hide ({ ผลกระทบ: "ตาบอด" ระยะเวลา: "ช้า" }, ฟังก์ชั่น () { $ (นี้) remove (); }); } $ ( "ปุ่ม") .each (ฟังก์ชั่น () { ปุ่ม var = $ (นี้) .button ({ ไอคอน: { หลัก: $ (นี้) .data ( "ไอคอน") } ข้อความ: !! $ (นี้) .attr ( "ชื่อ") }); button.click (ฟังก์ชั่น () { แจ้ง (ปุ่ม); }); }); $ ( ".set") .buttonset ({ รายการ "ปุ่ม" }); $ (เอกสาร) .tooltip ({ ตำแหน่ง: { ฉัน: "ด้านบนตรงกลาง" ที่: "ด้านล่าง Center + 5" } แสดง: { ระยะเวลา: "เร็ว" } ซ่อน: { ผลกระทบ: "ซ่อน" } }); }); </ script> </ head> <body> <div class = "ผู้เล่น"> นี่คือวิดีโอ (HTML5?) </ div> <div class = "เครื่องมือ"> <span class = "การตั้งค่า"> <ปุ่มไอคอนข้อมูล = "UI-ไอคอนวงกลมลูกศร-N" title = "ฉันชอบวิดีโอนี้"> เช่น </ ปุ่ม> <ปุ่มไอคอนข้อมูล = "UI-ไอคอนวงกลมลูกศร-S"> ฉันไม่ชอบวิดีโอนี้ </ ปุ่ม> </ span> <ระดับ Div = "การตั้งค่า"> <ปุ่มไอคอนข้อมูล = "UI-ไอคอนวงกลมบวก" title = "เพิ่มในรายการเพลง"> เพิ่มไป </ ปุ่ม> <ระดับปุ่ม = "เมนู" data-ไอคอน = "UI-ไอคอนสามเหลี่ยม-1-S"> เพิ่มในคนที่ถูกใจ </ ปุ่ม> </ div> <ปุ่ม title = "แชร์วิดีโอนี้"> แบ่งปัน </ ปุ่ม> <ปุ่มไอคอนข้อมูล = "UI-ไอคอนแจ้งเตือน"> ทำเครื่องหมายว่าไม่เหมาะสม </ ปุ่ม> </ div> </ body> </ html>