รูปการเปิดดูตัวอย่างการใช้งานของLibaryต่างๆที่มากับJQuery UI
ให้คลิกที่ไฟล์ index.html ดังรูป
รูปการเปิดไฟล์index.html
จากนั้นให้กด F12 เพื่อดูตัวอย่างการใช้งานLibary ต่างๆครับ
รูปการรัน(F12)เพื่อดูตัีวอย่างLibaryต่างๆ
เราสามารถก๊อปปี้โค๊ดของตัวอย่างต่างๆที่JQuery UI มีมาให้ นำมาใช้ร่วมกับงานหรือระบบงานของเราได้ครับ และต่อไปนี้ผมจะยกตัวอย่างการใช้งาน Dialog Alert ให้ได้เห็นภาพกันครับ
ท่านสามารถเปิดดูตัวอย่าง การใช้งาน Dialog Alert ได้ที่โฟลเดอร์ dialog ตามรูปครับ
จะเห็นได้ว่าในโฟล dialog มีไฟล์ต่างๆเก็บอยู่ข้างในโฟลเดอร์นี้ ซึ่งประกอบด้วย
1 ไฟล์ default.html เป็นไฟล์แสดงdialogมาตรฐานที่นิยมใช้แสดงข้อความอธิบายหรือแนะนำ
รูปตัวอย่างDialog Basic
2 ไฟล์ index.html เป็นไฟล์หน้าโฮมเพจในการเลือกดู dialog ทั้งหมด
3 ไฟล์ modal-confirmation.html เป็นไฟล์ตัวอย่างการใช้งานdialog ที่ใช้แสดงขึ้นมาเพื่อให้ผู้ใช้กดยืนยันหรือยกเลิกการทำงานของโปรแกรม เช่น แสดงdialogนี้ขึ้นมาเพื่อถามเรา่ว่าจะลบข้อมูลนี้หรือไม่ เป็นต้น
รูปตัวอย่างDialog Confirmation(ยืนยัน)
4 ไฟล์ modal-form.html เป็นไฟล์ตัวอย่างการใช้งาน Dialog ประเภทฟอร์มกรอกข้อมูล ซึ่งเป็นDialogที่แสดงขึ้น เพื่อให้ผู้ใช้งานกรอกข้อมูลตามที่ต้องการ เช่น ชื่อ,นามสกุล,ที่อยู่,เบอร์โทร เป็นต้น
รูปตัวอย่าง Dialog Form
5 ไฟล์ modal-message.html เป็นไฟล์ตัวอย่างการใช้งาน Dialog ประเภทแจ้งเตือนหรือแสดงผลลัพธุ์การทำงาน ซึ่งลำดับต่อไปผมจะขออธิบายการใช้งานของ Dialog นี้ครับ
รูปตัวอย่าง Dialog Message
การใช้งาน Dialog Message ตามแบบฉบับของผมอ่ะนะ
1.เลือกThemeที่จะนำมาใช้แสดงผล ดังรูป
2.เรียกไฟล์ JQuery และ JQuery UI มาใช้
3.จากนั้นใ้ห้พิมพ์โค๊ดตามนี้เลยครับ
4.กดF12เพื่อรันดูผลลัพธุ์ของโปรแกรม จากนั้นให้กดปุ่ม ShowDialog จะได้ผลลัพธุ์ดังรูปคับ
แจกไฟล์ที่ใช้ประกอบการอธิบายในบทความนี้ JQuery , dialog_alert.php
มัันไม่ขึ้น Dialog อ่ะครับ โค้ด ก็พิมพ์ตามถูกหมด = =
ตอบลบดาวน์โหลด code ที่ใช้สอนทั้งหมด >>http://www.4shared.com/file/ASJptEkC/exshops.html
ตอบลบเหมือนกันค่ะ ไม่ทราบว่าเซฟไฟล์ Dialog_alert.php ไว้ที่ไหนหรือคะ ทำตามทั้งหมดแล้วแต่ไม่ขึ้นค่ะ
ตอบลบขอบคุณมาก ตอนนี้กำลังทำโปรเจคเว็บอีคอมเมิร์ซอยู่พอดี
บล็อคนี้มีประโยชน์มากๆ เลยค่ะ ขอบคุณนะคะ
ก๊อปโค๊ดข้างล่างนี้ไปวางทับเลยครับ และระบุพาธไฟล์ jquery และ jquery ui ที่คุณจัดเก็บไว้ให้ถูกต้องด้วยนะครับ
ตอบลบ<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="jquery/css/start/jquery-ui-1.7.2.custom.css">
<script src='jquery/jquery-1.4.2.min.js'></script>
<script src='jquery/jquery-ui-1.7.1.custom.min.js'></script>
<script>
function DialogAlert(){
$("#showdialog").html("<div id='dialog' title='Wanning'><!--<span class='ui-icon ui-icon-alert' style='float: left; margin-right: .3em;'></span><br>--><strong><font color='red'><div id='Msg'></div></font></strong></div>");
$("#dialog").dialog("destroy");
$('#dialog').dialog({
bgiframe: true,
modal: true,
autoOpen: false,
width: 400,
buttons: {
"Ok": function() {
$(this).dialog("close");
}
},
close: function(event, ui) { return false; }
});
}</script>
</head>
<body>
<div id="showdialog"></div>
<input name="Click" type="button" onclick="DialogAlert();$('#Msg').html('นี้คือข้อความทดสอบคับ');$('#dialog').dialog('open');" value="ShowDialog" id="Click" />
</body>
</html>
ยังไม่ดีอยู่ดีค่ะ ดิฉันสร้างโฟลเดอร์ชื่อ JQ
ตอบลบแล้วทำโฟลเดอร์ jquery ที่ได้จากของคุณเจ้าของบล็อคมาค่ะ
แล้วก็สร้างไฟล์ใหม่ขึ้นมา ชื่อว่า dialog_alert.php โดยเก็บไฟล์ไว้ที่ JQ/development-bundle/demos/dialog
ไม่ทราบว่ามีส่วนเกี่่ยวข้องกันหรือเปล่าคะกับไฟล์ที่เก็บ เพราะมันไม่ได้เลยค่ะ
ตรงพาร์ธของไฟล์ ดิฉันได้เปลี่ยนจากชื่อโฟลเดอร์เดิมของคุณเจ้าของบล็อคแล้วค่ะ จาก jquery เป็น JQ
มันก็ไม่ขึ้นเหมือนเดิม TT รบกวนด้วยนะคะ
ถ้าคุณจัดเก็บไฟล์ dialog_alert.php แบบนี้ คุณต้องระบุพาธใหม่ครับ
ตอบลบจาก <link rel="stylesheet" type="text/css" href="jquery/css/start/jquery-ui-1.7.2.custom.css">
<script src='jquery/jquery-1.4.2.min.js'></script>
<script src='jquery/jquery-ui-1.7.1.custom.min.js'></script>
ให้เปลี่ยนเป็น
<link rel="stylesheet" type="text/css" href="../../../css/start/jquery-ui-1.7.2.custom.css">
<script src=../../../jquery-1.4.2.min.js'></script>
<script src='../../../jquery-ui-1.7.1.custom.min.js'></script>
แนะนำนะครับ ควรเก็บโฟลเดอร์ JQ กับไฟล์ dialog_alert.php ให้อยู่ในระดับเดียวกัน เพื่อป้องกันไม่ให้เกิดความยุ่งยากตอนเรียกใช้ครับ (มันจะงง)
เช่น
---โฟลเดอร์ project ของคุณ
-------------- JQ
--------------dialog_alert.php
เวลาเรียกก็ JQ/jquery-uixxx.js ประมาณนี้ครับ