ซึ่งทั้งนี้ในบางครั้งนอกจากการใช้งาน css หรือ html เข้ามาใช้งานแล้ว ก็ยังจะมีในส่วนที่สามารถเพิ่มลูกเล่นต่างๆในกับหน้าเว็บไซต์ ได้อีกโดยการนำ javascript jquery หรือ ajax เข้ามาทำงานหรือกับ html เพื่อเพิ่มความสะดวกหรือเพิ่มความน่าสนใจให้กับผู้ที่เข้ามาใช้งาน และทั้งนี้บางครั่งยังจะช่วยลดขั้นตอนการพัฒนา coding ลงได้
จากตัวอย่างต่อจากนนี้คือ การใช้งาน jquery มาช่วยสร้างลูกเล่น เปลี่ยนสีให้กับ form
1. ตัวอย่างโคด html ซึ่งจะเป็นส่วนที่เดินมที่จะไม่มีสีสันใดๆ แต่ถ้าหากใส่ css เข้าไปก็จะเพิ่มความสวยงามมากขึ้น
โค้ด: เลือกทั้งหมด
<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
โค้ด: เลือกทั้งหมด
<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>
โค้ด: เลือกทั้งหมด
<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>
บทความเพิ่มเติม
วิธีการ ปรับเปลี่ยน class ของ css ด้วย Javascript เพื่อว่าสะดวกต่อการเปลี่ยนค่า css หลายค่าพร้อมกัน
วิธีการการใช้งาน jquery เพื่อปรับเปลี่ยนค่า css ให้กับปุ่มเมื่อมีการคลิก