โดย thatsawan » 18/01/2015 11:30 am
ก่อนศึกษาบทความนี้ ขอเเนะนำว่าให้ ศึกษา บทเรียน Jquery ซึ่งเเนะนำตั้งแต่พื้นฐาน จนถึงการนำ jquery ไปใช้กับงานจริง เเละแน่นอนว่าจะต้องรู้ในเรื่องของ HTML5, CSS, JavaScriptก่อน นะค่ะ เพื่อให้สามารถทำเข้าใจเกี่ยวกับ jQuery ได้ง่ายขึ้น
จากตัวอย่างที่เเล้ว เป็นตัวอย่างการใช้งาน toggle(); ซึ่งก็จะมีข้อเเตกต่างระหว่าง toggle(); กับ show(); เเละ hide(); สามารถดูเปรียบเทียบการใช้งานได้จากตัวอย่างนี้ค่ะ
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //เมื่อโหลดหน้าเพจให้คำสั่งนี้พร้อมใช้งานทันที่
var form = document.getElementById("frm") // รูปแบบ ประกาศตัวแปรที่ เอา id ของ form มา
$(form).hide(); //ในครั้งเเรกที่เปิดหน้านี้มา เราจะให้ form ถูกซ่อนไว้ก่อน โดยใช้คำสั่ง hide
$("button").click(function(){ // button คือ เเท็ก ที่เราจะให้เป็น ปุ่มเพื่อกด เเสดงผลของที่เราซ่อน เมื่อ click จะเรียกใช้งาน function
$(form).
(function(){ //เมื่อทำการคลิกก็จะทำการ show (เเละid ที่เราส่งมาเป็นตัวแปรform)
$("button").hide();//จากนั้น ก็ให้ปิด ไม่ให้มี ปุ่ม
});
});
});
</script>
</head>
<body>
<form action="index.php" id="frm">
<input type="text" name="input_name">
<input type="text" name="input_name">
<input type="submit" name="submit" >
</form>
<button>Toggle</button>
</body>
</html>
ผลที่ได้
ครั้งเเรกของการ Run ไฟล์ตัวอย่างจะให้ทำการปิดการแสดงผลของ form ไว้ก่อน
- 2015-01-18_11-29-35.png (70.27 KiB) Viewed 1863 times
เมื่อทำการคลิก จะใช้คำสั่งเพื่อเเสดงผลของฟอร์ม เเละ ให้ทำการปิดปุ่ม ที่ชื่อ Toggle
- 2015-01-18_11-29-19.png (70.2 KiB) Viewed 1863 times
[i][color=#400000]ก่อนศึกษาบทความนี้ ขอเเนะนำว่าให้ ศึกษา [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-jquery.html]บทเรียน Jquery[/url] ซึ่งเเนะนำตั้งแต่พื้นฐาน จนถึงการนำ jquery ไปใช้กับงานจริง เเละแน่นอนว่าจะต้องรู้ในเรื่องของ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html5.html]HTML5[/url], [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]CSS[/url], [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-javascript.htmll]JavaScript[/url]ก่อน นะค่ะ เพื่อให้สามารถทำเข้าใจเกี่ยวกับ jQuery ได้ง่ายขึ้น[/color][/i]
[color=#FF0000][i][b][url=https://www.mindphp.com/forums/viewtopic.php?f=78&t=25541]จากตัวอย่างที่เเล้ว เป็นตัวอย่างการใช้งาน toggle();[/url][/b] ซึ่งก็จะมีข้อเเตกต่างระหว่าง toggle(); กับ show(); เเละ hide(); สามารถดูเปรียบเทียบการใช้งานได้จากตัวอย่างนี้ค่ะ[/i][/color]
[code]<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //เมื่อโหลดหน้าเพจให้คำสั่งนี้พร้อมใช้งานทันที่
var form = document.getElementById("frm") // รูปแบบ ประกาศตัวแปรที่ เอา id ของ form มา
$(form).hide(); //ในครั้งเเรกที่เปิดหน้านี้มา เราจะให้ form ถูกซ่อนไว้ก่อน โดยใช้คำสั่ง hide
$("button").click(function(){ // button คือ เเท็ก ที่เราจะให้เป็น ปุ่มเพื่อกด เเสดงผลของที่เราซ่อน เมื่อ click จะเรียกใช้งาน function
$(form).
(function(){ //เมื่อทำการคลิกก็จะทำการ show (เเละid ที่เราส่งมาเป็นตัวแปรform)
$("button").hide();//จากนั้น ก็ให้ปิด ไม่ให้มี ปุ่ม
});
});
});
</script>
</head>
<body>
<form action="index.php" id="frm">
<input type="text" name="input_name">
<input type="text" name="input_name">
<input type="submit" name="submit" >
</form>
<button>Toggle</button>
</body>
</html>
[/code]
[b]ผลที่ได้[/b]
ครั้งเเรกของการ Run ไฟล์ตัวอย่างจะให้ทำการปิดการแสดงผลของ form ไว้ก่อน
[attachment=1]2015-01-18_11-29-35.png[/attachment]
เมื่อทำการคลิก จะใช้คำสั่งเพื่อเเสดงผลของฟอร์ม เเละ ให้ทำการปิดปุ่ม ที่ชื่อ Toggle
[attachment=0]2015-01-18_11-29-19.png[/attachment]