การสร้างลิงค์ใน Dialog ของ jQuery

ถ้าต้องการสร้างลิงค์ ใน Dialog ของ jQuery ตามตัวอย่างข้างล่าง จะทำอย่างไร

มีวิธีการสร้างได้หลายอย่าง วิธีที่ง่ายที่สุด คือ การเพิ่มลิงค์ ในส่วนเนื้อหาของ

ที่จะนำมาเป็นข้อความใน Dialog เช่น

<div id="dialog-modal" title="ยินดีต้อนรับ">

  <p style = "text-align: center">เรียบร้อยแล้ว <br>กลับหน้าหลัก <a href = 'http://www.thongjoon.com'>คลิกที่นี่</a></p>

</div>

ในส่วนการเรียกใช้งาน Dialog ก็เรียกตามปกติ เช่น  (อ่านเรื่อง การสร้าง Dialog ด้วย jQueryUI ประกอบ)

    $( "#dialog-modal" ).dialog({
      height: 150,
      modal: true
    });

อีกวิธีหนึ่ง คือ การใช้ function .html() เพื่อเปลี่ยนข้อความในส่วนของ

ที่จะนำมาแสดงใน Dialog

ตัวอย่าง

ฟังก์ชัน .html() 

ฟังก์ชัน .html() เป็นฟังก์ชัน สำหรับอ่าน/คัดลอกข้อความ html หรือ เปลี่ยนข้อความให้เป็น html ในส่วนที่เลือก เช่น ใน

หรือ ที่กำหนด

ตัวอย่าง การอ่าน/คัดลอกข้อความ

สมมุติว่า มีข้อความต่อไปนี้

<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>

ถ้าต้องการคัดลอกข้อความใน class demo-container เขียนดังนี้

   $( "div.demo-container" ).html();

ผลที่ได้คือ
   <div class="demo-box">Demonstration Box</div>

ทั้งนี้  อาจจะนำไปใส่ไว้ในตัวแปร และเรียกใช้งานภายหลัง เช่น var myHtml = $("div.demo-container").html(); เป็นต้น

หมายเหตุ ถ้า มี class ชื่อเดียวกันนี้ หลายแห่ง jQuery จะเอามาเฉพาะ class แรกเท่านั้น

ตัวอย่าง การเปลี่ยนข้อความ

สมมุติว่า มีข้อความต่อไปนี้

<div class="demo-container">

 <div class="demo-box">Demonstration Box</div>
</div>

เราสามารถเปลี่ยนข้อความภายใน  class demo-container ได้ ดังนี้

$( "div.demo-container" )
     .html( "All new content. You bet!
" );

ผลลัพธ์ที่ได้ คือ

<div class="demo-container">
<p>All new content. <em>You bet!</em></p>
</div>

jQuery ตั้งแต่รุ่น 1.4 เราสามารถใช้ฟังก์ชัน เพื่อเป็นข้อมูลป้อนเข้าใน .html() ได้เลย เช่น

ตัวอย่าง การสร้างลิงค์ภายในด้วย html()

$('#dialog-modal').html("<div style=\"text-align: center;\"><br />เรียบร้อยแล้ว <br />กลับหน้าหลัก <a href=\"http://www.thongjoon.com\">คลิกที่นี่</a></div>").dialog();

ดาวน์โหลดไฟล์ตัวอย่าง คลิกที่นี่

อ้างอิง

http://api.jquery.com/html/