การใช้งาน jQuery Effects เปิด - ปิดการแสดงผลด้วย show(); - hide();

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
thatsawan
PHP VIP Members
PHP VIP Members
Posts: 24552
Joined: 31/03/2014 10:02 am
Contact:

การใช้งาน jQuery Effects เปิด - ปิดการแสดงผลด้วย show(); - hide();

Post by thatsawan »

ก่อนศึกษาบทความนี้ ขอเเนะนำว่าให้ ศึกษา บทเรียน Jquery ซึ่งเเนะนำตั้งแต่พื้นฐาน จนถึงการนำ jquery ไปใช้กับงานจริง เเละแน่นอนว่าจะต้องรู้ในเรื่องของ HTML5, CSS, JavaScriptก่อน นะค่ะ เพื่อให้สามารถทำเข้าใจเกี่ยวกับ jQuery ได้ง่ายขึ้น

จากตัวอย่างที่เเล้ว เป็นตัวอย่างการใช้งาน toggle(); ซึ่งก็จะมีข้อเเตกต่างระหว่าง toggle(); กับ show(); เเละ hide(); สามารถดูเปรียบเทียบการใช้งานได้จากตัวอย่างนี้ค่ะ

Code: Select all

<!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
2015-01-18_11-29-35.png (70.27 KiB) Viewed 1039 times
เมื่อทำการคลิก จะใช้คำสั่งเพื่อเเสดงผลของฟอร์ม เเละ ให้ทำการปิดปุ่ม ที่ชื่อ Toggle
2015-01-18_11-29-19.png
2015-01-18_11-29-19.png (70.2 KiB) Viewed 1039 times

  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests