การประยุกต์ การใช้งาน jQuery กับ CSS ครับ

samsonnaze3 · Post by **samsonnaze3** » 24/03/2012 3:22 pm

การประยุกต์ jQuery+CSS เข้าด้วยกัน :

ในการเขียนเว๊ปนั้น คุณสามารถใช้ jQuery ในการปรับแต่ง CSS Style ได้ง่ายๆ ครับ ผมมีตัวอย่างการทำงานแบบง่ายๆมาให้ดูครับ

**ถ้าต้องการศึกษาคำสั่งการใช้งานเพิ่มเติมในส่วนของ jQuery ในการจัดการกับ CSS สามารถเข้าไปได้ที่ คลิ๊กที่นี้

ตัวอย่าง การใช้งาน Method .toggleClass() ครับ
.toggleClass() คือการกำหนด Class ว่า ถ้าเราคลิ๊กหรือทำอะไรกับมัน 1 ครั้ง จะให้มันเป็นอะไร แล้วถ้าคลิ๊กอีกครั้งก็จะเป็นตรงข้ามกับตอนแรก เช่นในตัวอย่างนี้ ผมจะทำการเขียนโค๊ดขึ้นมาให้มันทำงานว่า

1.แสดงรายการ 4 รายการ
2.ถ้าคลิ๊กรายการไหนจะขึ้น ไฮไลท์ สีฟ้าที่รายการนั้น
3.ถ้าคลิ๊กอีกครั้ง จะทำให้ ไฮไลท์สีฟ้าหายไป

Code: Select all

<title>Test_jQurey</title>
<style type="text/css">
    .red{
        color: red;
        text-align: center;
    }
    .highlight{
        background-color: #00eeee;
        color: #000;
    }
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
    <body>
       <p class="red">ข้อความที่ 1</p>
  <p class="red">ข้อความที่ 2</p>
  <p class="red">ข้อความที่ 3</p>
  <p class="red">ข้อความที่ 4</p>
  <script type="text/javascript">
    $("p").click(function () {
      $(this).toggleClass("highlight");
    });
</script>
    </body>

อธิบายการทำงานเชิงเทคนิค

อย่างแรกให้เราสร้าง รายการข้อความมาก่อน ในตัวอย่างสร้าง 4 รายการครับ และกำหนดชื่อ class ให้มันด้วย ในที่นี้ใช่ชื่อว่า red ครับ

Code: Select all

  <p class="red">ข้อความที่ 1</p>
  <p class="red">ข้อความที่ 2</p>
  <p class="red">ข้อความที่ 3</p>
  <p class="red">ข้อความที่ 4</p>

อย่างที่สอง คือการกำหนดให้ class ต่างๆ มีลักษณะเป็นอย่างไร ใน CSS ครับ ซึ่ง class redนั้น จะมีลักษณะ เป็นตัวอักษรสีแดง และ ตัวอักษรจะอยู่ตำแหน่งกึ่งกลางครับ

Code: Select all

 .red{
        color: red;
        text-align: center;
    }

ส่วน class highlight เป็นคลาสที่สร้างเอาไว้เพื่อเป็นการทำ ไฮไลท์ ให้เป็นสีฟ้าครับ

Code: Select all

.highlight{
        background-color: #00eeee;
        color: #000;
    }

อย่างที่สาม คือเป็นการเขียนคำสั่ง jQuery ให้ เมื่อทำการคลิ๊กที่ข้อความ(tag p) ก็จะทำการเรียกใช้ function ที่สร้างขึ้นมา โดย ฟังก์ชั่นนี้มีการทำงานคือ ในตัว ข้อความที่เราได้คลิ๊ก ณ ตอนนี้ ให้ทำการ เพิ่มคลาส highlight เข้าไปจากที่เคยมีอยู่แล้ว"$(this).toggleClass("highlight");" เช่น จากที่เคยมีคลาส "blue" ก็จะกลายเป็น "blue highlight"

Code: Select all

<script type="text/javascript">
    $("p").click(function () {
      $(this).toggleClass("highlight");
    });
</script>

ในภาพตัวอย่างเป็นการลองคลิ๊กดูที่ หัวข้อที่ 1 และ หัวข้อที่ 2 ส่วนหัวข้อที่ 3 และ 4 ยังไม่ได้คลิ๊ก ซึ่งถ้าท่านคลิ๊กหัวข้อที่ 1 และ 2 อีกครั้ง ก็จะกลายมาเป็นข้อความที่ไม่มี ไฮไลท์

samsonnaze3 · Post by **samsonnaze3** » 24/03/2012 4:10 pm

การใช้งาน Method addClass() และ removeClass()

การใช้งาน นั้นจะเหมือนกับ toggleClass() ครับ จะต่างกันตรงที่ เมื่อทำครั้งต่อไป ค่าจะไม่เปลี่ยนแปลงไปตามการกระทำครั้งที่ 2 ของเราแล้ว

ตัวอย่าง addClass()
ในที่นี้ใช้การทำงานเดียวกับ toggleClass() ด้านบน เพียงแค่เปลี่ยนจาก

Code: Select all

<script type="text/javascript">
    $("p").click(function ()
       {
         $(this).toggleClass("highlight");
       });
</script>

ให้เป็น

Code: Select all

<script type="text/javascript">
    $("p").click(function ()
    {
        $(this).addClass("highlight");
    });
</script>

อธิบายการทำงาน addClass() ก็เหมือนกันครับ คือการ คลิ๊กข้อความในบรรทัดไหนก็ได้ ก็จะเป็นการ ไฮไลท์บรรทัดนั้นๆ แต่ถ้าทำการคลิ๊กครั้งต่อไป ค่าจะไม่เปลี่ยนแปลงเหมือน toggleClass() แล้ว

ตัวอย่าง removeClass()
มันคือการ ลบ Class ออกจาก tag html ที่เราเคยประกาศไว้ครับ ซึ่งการทำงานก็จะตรงกันข้ามกับ addClass() เลย ตัวอย่างการใช้คือ

Code: Select all

<title>Test_jQurey</title>
<style type="text/css">
    .blue{
        color: red;
        text-align: center;
    }
    .highlight{
        background-color: #00eeee;
        color: #000;
    }
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
    <body>
  <p class="blue" >ข้อความที่ 1</p>
  <p class="blue highlight">ข้อความที่ 2</p>
  <p class="blue">ข้อความที่ 3</p>
  <p class="blue">ข้อความที่ 4</p>
  <script type="text/javascript">
    $("p").click(function () 
    {
         $(this).removeClass("highlight");
    });
</script>
    </body>

อธิบายการทำงานคือ ในครั้งนี้ผมจะกำหนดว่า ข้อความที่ 2 นั้น ได้มีการ ไฮไลท์ ข้อความไว้อยู่แล้ว

Code: Select all

 <p class="blue highlight">ข้อความที่ 2</p>

ซึ่งถ้าผมทำการคลิ๊กที่ข้อความไหนก็ได้ที่อยู่ใน tag p มันก็จะทำการลบคลาส highlight ที่มีอยู่ใน tag นั้นๆ ครับ

Code: Select all

$("p").click(function () 
    {
          $(this).removeClass("highlight");
    }

ซึ่งเมื่อคลิ๊กแล้ว จากข้อความสีฟ้าที่เคยไฮไลท์อยู่ ก็จะกลายเป็นข้อความธรรมดาที่ไม่มีการไฮไลท์ครับ

เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

การประยุกต์ การใช้งาน jQuery กับ CSS ครับ

การประยุกต์ การใช้งาน jQuery กับ CSS ครับ

Re: การประยุกต์ การใช้งาน jQuery กับ CSS ครับ

Who is online