ค้นหา และศึกษาบทความด้านคอมพิวเตอร์ การเขียนเว็บไซต์ ทำเว็บไซต์ ทำโปรแกรม ทำโปรแกรมบนมือถือ ออกแบบเว็บไซต์ การเขียนโปรแกรม การออกแบบเว็บไซต์ ฐานข้อมูล รวมไปถึงข่าวแวดวง IT, Computer และบทความต่าง ๆ ที่ถูกคัดสรรมาอย่างดี ด้วยเนื้อหาที่สดใหม่ กระชับ และอ่านเข้าใจง่าย ซึ่งจะทำให้คุณสามารถที่จะแก้ไขปัญหาต่าง ๆ จากบทความ และองค์ความรู้ที่ทางเราเลือกมาให้ โดยบทความทุกบทความถูกเขียนขึ้นใหม่ ในเรื่องต่าง ๆ เพื่อนำเสนอมุมมองใหม่ ๆ ให้กับผู้อ่านทุกคน
ประเภทบทความ
|
|
บทความด้านคอมพิวเตอร์
Dialog Box jQuery UI การสร้าง Dialog Box ง่าย ๆ ด้วย jQuery UI
บทความวันที่ 21 พฤศจิกายน 2555
บทความนี้ขอกล่าวถึงเรื่องการสร้าง Dialog Box ด้วย jQuery UI (User Interface) ซึ่งเปรียบเสมือน Library ที่มีเครื่องมือ (Widgets) ต่าง ๆ ให้เราสามารถนำมาใช้งานได้ทันที่ ซึ่งรวมไปถึง Dialog Box ด้วยเช่นกัน
ภาพรวมของ Dialog Box jQuery UI
1. แสดงผล Elements ที่ต้องการในรูปแบบของ Dialog Box
2. จำเป็นต้องเรียกใช้ไฟล์ jquery, jquery ui และ css สำหรับ ui เพื่อการใช้งาน jQuery UI
3. ใช้คำสั่ง $('[Target_Element]').dialog() ในการเรียกใช้งานแบบ Dialog Box
4. เว็บไซต์อ้างอิง http://jqueryui.com/dialog/#default
ตัวอย่างโปรแกรม
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!doctype html>
<html lang= "en" >
<head>
<meta charset= "utf-8" />
<title>amplysoft.com</title>
</head>
<body>
<input type= 'button' value= 'show dialog' />
<div id= "dialog" title= "Basic dialog" style= "display:none" >
<p>Hello, AmplySoft.</p>
</div>
<script type= "text/javascript" >
$( 'input' ).click( function (){
$( "#dialog" ).dialog();
});
</script>
</body>
</html>
|
ผลลัพธ์

คำค้นหา Dialog Box jQuery UI, รับเขียนเว็บ, รับทำเว็บ, เรียนเขียนโปรแกรม
|