วิธีการใช้ JQuery สำหรับเพิ่มลูกเล่นการสไล เพื่อปรับเปลี่ยนสีของ Form

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

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

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 3450
Joined: 19/09/2018 10:33 am

วิธีการใช้ JQuery สำหรับเพิ่มลูกเล่นการสไล เพื่อปรับเปลี่ยนสีของ Form

Post by Ittichai_chupol » 29/11/2019 4:51 pm

ในการทำเว็บไซต์ให้สวยงามนั้นและมีความน่าสนใจนั้น ขึ้นอยู่กับการปรับพัฒนาในสวนของ interface ที่มีสวนผสมของรูปแบบลักษณะหรือสีสันที่ได้มาจาก css และการจัดสัดตำแหน่งการวาง tag ต่างๆ ของ html ที่จะทำให้ผู่ที่เข้ามาใช้งานนั้นสามารถเข้าใจ การใช้งานได้อย่างง่าย และอาจจะทำให้เกิดความถูกใจที่จะอยากใช้งานใน เว็บไซต์ นี้ต่อไป

ซึ่งทั้งนี้ในบางครั้งนอกจากการใช้งาน css หรือ html เข้ามาใช้งานแล้ว ก็ยังจะมีในส่วนที่สามารถเพิ่มลูกเล่นต่างๆในกับหน้าเว็บไซต์ ได้อีกโดยการนำ javascript jquery หรือ ajax เข้ามาทำงานหรือกับ html เพื่อเพิ่มความสะดวกหรือเพิ่มความน่าสนใจให้กับผู้ที่เข้ามาใช้งาน และทั้งนี้บางครั่งยังจะช่วยลดขั้นตอนการพัฒนา coding ลงได้

จากตัวอย่างต่อจากนนี้คือ การใช้งาน jquery มาช่วยสร้างลูกเล่น เปลี่ยนสีให้กับ form

1. ตัวอย่างโคด html ซึ่งจะเป็นส่วนที่เดินมที่จะไม่มีสีสันใดๆ แต่ถ้าหากใส่ css เข้าไปก็จะเพิ่มความสวยงามมากขึ้น

Code: Select all


<html>
    <head>

---  ใส่โคดสำหรับเรียกใช้งาน css  --
 </head>
    <body>
    <center>
        <form class="hide">
            <label for="fname" >First Name</label>
            <input type="text"  name="fname">
            <label for="lname" >Last Name</label>
            <input type="text"  name="lname">
        </form>
        <form class="show">
            <label for="fname" >First Name</label>
            <input type="text"  name="fname">
            <label for="lname" >Last Name</label>
            <input type="text"  name="lname">
        </form>

        <button>Submit</button>
    </center>
</body>
</html>
---  ใส่โคดสำหรับเรียกใช้งาน jquery  --


2.ตัวอย่างโคด css

Code: Select all


        <style> 
            button {
                width: 150px;
                background-color: #4CAF50;
                color: white;
                padding: 14px 20px;
                margin: 8px 0;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }
            input[type=text] {
                width: 100%;
                padding: 12px 20px;
                margin: 8px 0;
                box-sizing: border-box;
            }
            .show {
                border-radius: 5px;
                background-color: #FF66CC;
                padding: 20px;
                width: 300px;

            }
            .hide {
                border-radius: 5px;
                background-color: #FF0033;
                padding: 20px;
                width: 300px;

            }
        </style>

3.ตัวอย่างโคด jquery

Code: Select all

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  // เรียกใช้งาน library ของ js 
   <script>
            $(document).ready(function () {
                $(".show").hide();
                $("button").click(function () { //ตรวจสอบว่ามีการคลิก ปุ่มหรือไม
                    $(".hide").hide("slow", function () { //ซ่อน tag ที่มี id  hide แบบ slow
                        $(".show").show("slow", function () { แสดง  tag ที่มี id  show  แบบ slow
                        });
                    });

                });
            });
        </script>


ผลลลัพธ์ที่ได้
ezgif.com-video-to-gif (8).gif
ezgif.com-video-to-gif (8).gif (85.66 KiB) Viewed 89 times

บทความเพิ่มเติม
วิธีการ ปรับเปลี่ยน class ของ css ด้วย Javascript เพื่อว่าสะดวกต่อการเปลี่ยนค่า css หลายค่าพร้อมกัน
วิธีการการใช้งาน jquery เพื่อปรับเปลี่ยนค่า css ให้กับปุ่มเมื่อมีการคลิก
私を傷つけるすべてが終了します。

  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests