ในการทำเว็บไซต์ให้สวยงามนั้นและมีความน่าสนใจนั้น ขึ้นอยู่กับการปรับพัฒนาในสวนของ interface ที่มีสวนผสมของรูปแบบลักษณะหรือสีสันที่ได้มาจาก
css และการจัดสัดตำแหน่งการวาง tag ต่างๆ ของ
html ที่จะทำให้ผู่ที่เข้ามาใช้งานนั้นสามารถเข้าใจ การใช้งานได้อย่างง่าย และอาจจะทำให้เกิดความถูกใจที่จะอยากใช้งานใน เว็บไซต์ นี้ต่อไป
ซึ่งทั้งนี้ในบางครั้งนอกจากการใช้งาน 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>
3.ตัวอย่างโคด jquery
โค้ด: เลือกทั้งหมด
<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 (85.66 KiB) Viewed 1954 times
บทความเพิ่มเติม
วิธีการ ปรับเปลี่ยน class ของ css ด้วย Javascript เพื่อว่าสะดวกต่อการเปลี่ยนค่า css หลายค่าพร้อมกัน
วิธีการการใช้งาน jquery เพื่อปรับเปลี่ยนค่า css ให้กับปุ่มเมื่อมีการคลิก
ในการทำเว็บไซต์ให้สวยงามนั้นและมีความน่าสนใจนั้น ขึ้นอยู่กับการปรับพัฒนาในสวนของ interface ที่มีสวนผสมของรูปแบบลักษณะหรือสีสันที่ได้มาจาก [url=https://www.mindphp.com/คู่มือ/73-คืออะไร/2193-css-คืออะไร.html]css[/url] และการจัดสัดตำแหน่งการวาง tag ต่างๆ ของ [url=https://www.mindphp.com/คู่มือ/73-คืออะไร/2026-html-คืออะไร.html]html[/url] ที่จะทำให้ผู่ที่เข้ามาใช้งานนั้นสามารถเข้าใจ การใช้งานได้อย่างง่าย และอาจจะทำให้เกิดความถูกใจที่จะอยากใช้งานใน เว็บไซต์ นี้ต่อไป
ซึ่งทั้งนี้ในบางครั้งนอกจากการใช้งาน css หรือ html เข้ามาใช้งานแล้ว ก็ยังจะมีในส่วนที่สามารถเพิ่มลูกเล่นต่างๆในกับหน้าเว็บไซต์ ได้อีกโดยการนำ javascript [url=https://www.mindphp.com/บทเรียนออนไลน์/สอน-jquery/2776-บทที่-1-jquery-คืออะไร.html]jquery[/url] หรือ ajax เข้ามาทำงานหรือกับ html เพื่อเพิ่มความสะดวกหรือเพิ่มความน่าสนใจให้กับผู้ที่เข้ามาใช้งาน และทั้งนี้บางครั่งยังจะช่วยลดขั้นตอนการพัฒนา coding ลงได้
[u]จากตัวอย่างต่อจากนนี้คือ การใช้งาน jquery มาช่วยสร้างลูกเล่น เปลี่ยนสีให้กับ form [/u]
1. ตัวอย่างโคด html ซึ่งจะเป็นส่วนที่เดินมที่จะไม่มีสีสันใดๆ แต่ถ้าหากใส่ css เข้าไปก็จะเพิ่มความสวยงามมากขึ้น
[code]
<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 --
[/code]
2.ตัวอย่างโคด css
[code]
<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>
[/code]
3.ตัวอย่างโคด jquery
[code]
<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>
[/code]
[b]ผลลลัพธ์ที่ได้[/b]
[attachment=0]ezgif.com-video-to-gif (8).gif[/attachment]
บทความเพิ่มเติม
[url=https://www.mindphp.com/forums/viewtopic.php?f=78&t=62460]วิธีการ ปรับเปลี่ยน class ของ css ด้วย Javascript เพื่อว่าสะดวกต่อการเปลี่ยนค่า css หลายค่าพร้อมกัน[/url]
[url=https://www.mindphp.com/forums/viewtopic.php?f=78&t=62315]วิธีการการใช้งาน jquery เพื่อปรับเปลี่ยนค่า css ให้กับปุ่มเมื่อมีการคลิก[/url]