JqueryUI - สลับคลาส
บทนี้จะกล่าวถึงไฟล์ toggleClass()วิธีการซึ่งเป็นคลาสใหม่ที่มีประโยชน์สำหรับการจัดการ toggleClass ()วิธีการเพิ่มหรือลบอย่างน้อยหนึ่งคลาสจากแต่ละองค์ประกอบในชุดขององค์ประกอบที่ตรงกัน
ไวยากรณ์
เพิ่มในเวอร์ชัน 1.0 ของ jQueryUI
toggleClass() method มีไวยากรณ์พื้นฐานดังนี้ -
.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | className นี่คือสตริงและแสดงถึงชื่อคลาส CSS หรือรายการชื่อคลาสที่คั่นด้วยช่องว่างเพื่อเพิ่มลบหรือสลับ |
| 2 | switch นี้เป็นชนิดบูลีนและหากระบุกองกำลังtoggleClass ()วิธีการที่จะเพิ่มระดับถ้าเป็นความจริงหรือที่จะเอาชั้นถ้าเป็นเท็จ |
| 3 | duration นี่เป็นประเภท Number หรือ String และมีทางเลือกให้เลือกช้าปกติเร็วหรือระยะเวลาของเอฟเฟกต์เป็นมิลลิวินาที หากไม่ระบุเมธอด animate () จะกำหนดค่าเริ่มต้น ค่าเริ่มต้นของมันคือ400 |
| 4 | easing ชื่อของฟังก์ชันการค่อยๆเปลี่ยนที่จะส่งผ่านไปยังเมธอด animate () |
| 5 | complete นี่คือวิธีการโทรกลับที่เรียกสำหรับแต่ละองค์ประกอบเมื่อเอฟเฟกต์เสร็จสมบูรณ์สำหรับองค์ประกอบนี้ |
เพิ่มในเวอร์ชัน 1.9 ของ jQueryUI
ด้วยเวอร์ชัน 1.9 ตอนนี้วิธีนี้รองรับตัวเลือกเด็กซึ่งจะทำให้องค์ประกอบที่สืบเชื้อสายมาเคลื่อนไหวได้
.toggleClass( className [, switch ] [, options ] )| ซีเนียร์ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | className นี่คือสตริงและแสดงถึงชื่อคลาส CSS หรือรายการชื่อคลาสที่คั่นด้วยช่องว่างเพื่อเพิ่มลบหรือสลับ |
| 2 | switch นี้เป็นชนิดบูลีนและหากระบุกองกำลังtoggleClass ()วิธีการที่จะเพิ่มระดับถ้าเป็นความจริงหรือที่จะเอาชั้นถ้าเป็นเท็จ |
| 3 | options นี่แสดงถึงการตั้งค่าภาพเคลื่อนไหวทั้งหมด คุณสมบัติทั้งหมดเป็นทางเลือก ค่าที่เป็นไปได้คือ -
|
ตัวอย่าง
ตัวอย่างต่อไปนี้สาธิตการใช้toggleClass ()วิธีการ
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Switch Class Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.class1 {
border-width : 10px;
border-color : grey;
background-color : #cedc98;
color : black;
}
</style>
<script>
function toggle () {
$("#para").toggleClass ("class1", 1000);
}
</script>
</head>
<body>
<button onclick = toggle()> Toggle </button>
<p id = "para" style = border-style:solid> Welcome to Tutorials Point </p>
</body>
</html>ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML toggleclassexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ด้วย ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -
คลิกที่ปุ่มสลับเพื่อดูว่าคลาส CSS เปลี่ยนไปอย่างไรสำหรับข้อความ