ตัวอย่างเช่น jQuery UI - กล่องคำแนะนำเครื่องมือ (เคล็ดลับ) คืออะไร และใช้งานอย่างไร?

ตัวอย่างเช่น jQuery UI - กล่องคำแนะนำเครื่องมือ (เคล็ดลับ)

ก่อนหน้านี้: jQuery UI เช่น - แท็บ (แท็บ)

ถัดไป: jQuery UI เช่น - เทคนิคพิเศษ (Effect)

ปรับแต่งกล่องคำแนะนำเครื่องมือ 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&amp;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&amp;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>