JqueryUI - เพิ่มคลาส

บทนี้จะกล่าวถึงไฟล์ addClass()method ซึ่งเป็นหนึ่งในวิธีที่ใช้จัดการวิชวลเอฟเฟกต์ jQueryUI addClass ()วิธีการอนุญาตให้เคลื่อนไหวการเปลี่ยนแปลงคุณสมบัติ CSS

addClass ()วิธีการเพิ่มคลาสที่ระบุให้กับองค์ประกอบที่ตรงกันในขณะที่เคลื่อนไหวการเปลี่ยนแปลงสไตล์ทั้งหมด

ไวยากรณ์

เพิ่มในเวอร์ชัน 1.0 ของ jQueryUI

addClass() method มีไวยากรณ์พื้นฐานดังนี้ -

.addClass( className [, duration ] [, easing ] [, complete ] )

ซีเนียร์	พารามิเตอร์และคำอธิบาย
1	className นี่คือสตริงที่มีคลาส CSS ตั้งแต่หนึ่งคลาสขึ้นไป (คั่นด้วยช่องว่าง)
2	duration นี่คือประเภท Number หรือ String และระบุจำนวนมิลลิวินาทีของเอฟเฟกต์ ค่า 0 จะนำองค์ประกอบในรูปแบบใหม่โดยตรงโดยไม่มีความคืบหน้า ค่าเริ่มต้นของมันคือ400
3	easing เป็นประเภท String และระบุวิธีดำเนินการในเอฟเฟกต์ ค่าเริ่มต้นของมันคือการแกว่ง ค่าที่เป็นไปได้ที่นี่
4	complete นี่คือวิธีการโทรกลับที่เรียกสำหรับแต่ละองค์ประกอบเมื่อเอฟเฟกต์เสร็จสมบูรณ์สำหรับองค์ประกอบนี้

เพิ่มในเวอร์ชัน 1.9 ของ jQueryUI

ด้วยเวอร์ชัน 1.9 ตอนนี้วิธีนี้รองรับตัวเลือกเด็กซึ่งจะทำให้องค์ประกอบที่สืบเชื้อสายมาเคลื่อนไหวได้

.addClass( className [, options ] )

ซีเนียร์	พารามิเตอร์และคำอธิบาย
1	className นี่คือสตริงที่มีคลาส CSS ตั้งแต่หนึ่งคลาสขึ้นไป (คั่นด้วยช่องว่าง)
2	options นี่แสดงถึงการตั้งค่าภาพเคลื่อนไหวทั้งหมด คุณสมบัติทั้งหมดเป็นทางเลือก ค่าที่เป็นไปได้คือ - duration- เป็นประเภท Number หรือ String และระบุจำนวนมิลลิวินาทีของเอฟเฟกต์ ค่า 0 จะนำองค์ประกอบในรูปแบบใหม่โดยตรงโดยไม่มีความคืบหน้า ค่าเริ่มต้นของมันคือ400 easing- เป็นประเภท String และระบุวิธีดำเนินการในเอฟเฟกต์ ค่าเริ่มต้นของมันคือการแกว่ง ค่าที่เป็นไปได้ที่นี่ complete - นี่คือวิธีการโทรกลับที่เรียกสำหรับแต่ละองค์ประกอบเมื่อเอฟเฟกต์เสร็จสมบูรณ์สำหรับองค์ประกอบนี้ children- นี่เป็นประเภทบูลีนและแสดงว่าควรใช้ภาพเคลื่อนไหวเพิ่มเติมกับลูกหลานทั้งหมดขององค์ประกอบที่ตรงกันหรือไม่ ค่าเริ่มต้นของมันคือเท็จ queue- เป็นประเภทบูลีนหรือสตริงและแสดงว่าจะวางภาพเคลื่อนไหวในคิวเอฟเฟกต์หรือไม่ ค่าเริ่มต้นของมันคือความจริง

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานของaddClass ()วิธีการ

ผ่านชั้นเดียว

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass 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>
      
      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>
      
      <script type = "text/javascript">
         $(document).ready(function() {
            $('.button').click(function() {
               if (this.id == "add") {
                  $('#animTarget').addClass("myClass", "fast")
               } else {
               $('#animTarget').removeClass("myClass", "fast")
               }
            })
         });
      </script>
   </head>
   
   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button class = "button" id = "add">Add Class</button>
      <button class = "button" id = "remove">Remove Class</button>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML addclassexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ด้วย ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

คลิกที่ปุ่มเพิ่มชั้นเรียนและลบชั้นเรียนเพื่อดูผลของชั้นเรียนในกล่อง

ผ่านหลายชั้นเรียน

ตัวอย่างนี้แสดงวิธีการส่งหลายคลาสไปยังเมธอดaddClass

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass 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>
         .red { color: red; }
         .big { font-size: 5em; }
         .spaced { padding: 1em; }
      </style>
      
      <script>
         $(document).ready(function() {
            $('.button-1').click(function() {
               $( "#welcome" ).addClass( "red big spaced", 3000 );
            });
         });
      </script>
   </head>
   
   <body>
      <p id = "welcome">Welcome to Tutorials Point!</p>
      <button class = "button-1">Click me</button>
   </body>
</html>