การใช้งาน jQuery แทน Media Query ใน CSS3 ตอนที่ 2

จากที่เคยเขียนแนวทางการใช้งาน jQuery แทน media query ใน CSS3 เนื่องจาก IE 6,7,8 ยังไม่ support ดังนั้นเราอาจใช้ jQuery เข้ามาช่วยทำ Responsive Web แบบง่ายๆด้วย JavaScript ได้ แต่เนื่องจากตอนนั้นยังทำได้ไม่สมบูรณ์เลยเขียน code มาแบบเต็มๆให้ดู จริงๆอยากจะประยุกต์ Singleton Pattern ใน JavaScript มาด้วยแต่เดี๋ยวยากเกินไป เอาแค่นี้ก่อนละกัน ในบทความนี้จะเปรียบเทียบกับตัว CSS3 ด้วยจะได้เข้าใจมากขึ้น

เริ่มจาก code ส่วนแรกประกาศเป็น function ชื่อว่า checkDevice() เป็นfunction ที่รับ parameter เป็น  width ของ window

1
2
3
4
5
6
7
8
9
10
11
var checkDevice = function(width){
        console.log(width);        
        $('li').removeClass();
        if(width > 760){
             $('li:first-child').addClass('desktop');
        }else if(width > 480 ){
             $('li:nth-child(2)').addClass('tablet');
        }else if(width > 0){
             $('li:last-child').addClass('mobile');
        }
};

และใช้ jQuery ดึงขนาดความกว้างของ window แบบนี้

1
$(window).width()

และสุดท้ายก็ทำการ เรียก function นี้ทุกครั้งที่เกิดการย่อหรือขยายความกว้างของ browser

1
2
3
4
checkDevice($(window).width());
$(window).resize(function(){
     checkDevice($(window).width());
});​

ซึ่งโดยทั้งหมดนี้มีค่าเท่ากับ Style Sheet แบบนี้

1
2
3
4
5
@media screen and (min-width: 760px){
       li:first-child{
           border: 3px solid #41709B;
       }
   }
1
2
3
4
5
@media screen and (min-width: 481px and max-width: 760px){
       li:nth-child(2){
           border: 3px solid #41709B;
       }
   }
1
2
3
4
5
@media screen and (max-width: 480px){
       li:last-child{
           border: 3px solid #41709B;
       }
   }

ใน style sheet จะใช้ min-width และ max-width ในการกำหนดช่วงของความกว้างของ browser ถ้าตกอยู่ในช่วงไหนก็จะทำการกำหนด style sheet ในวงเล็บเข้าไปตาม selector ที่เราเลือก

โดยรอบนี้มี code ให้เข้าไปทดสอบกันได้ที่ http://jsfiddle.net/irobust/vgzvR/ 

แต่ถ้าต้องการดูผลลัพธ์ต้องดูแบบ Full Screen ถึงจะเห็นผลลัพธ์ที่ถูกต้องโดยเข้าไปที่http://jsfiddle.net/irobust/vgzvR/embedded/result/

การใช้ jquery แทน media query

การใช้งาน Media Query ยังมีข้อจำกัดอยู่ที่่ต้องการ Browser รุ่นใหม่ๆ
ซึ่งจะมี IE ที่ยังไม่ Support และยังมีผู้ใช้งานอยู่มาก
แต่เราสามารถที่จะใช้ jQuery มาใช้ในการจัดการแทน Media query ได้โดยเราสามารถหาความกว้างของ window ได้โดยใช้

1
$(window).width()

นอกจากนั้นเรายังดักจับ event resize window ได้ด้วย $(window).resize(); เราสามารถจะเขียน Code ได้แบบนี้

1
2
3
4
5
6
7
8
9
10
$(window).resize(function(){
     var width = $(window).width();
     if(width > 760){
         $('h1').attr('class','web');
     }else if(width > 480 ){
         $('h1').attr('class','tablet');
     }else if(width > 0){
         $('h1').attr('class','mobile');
     }
});

ที่ใช้ .attr แทน addClass เพราะจะได้ replace Class ทั้งหมด แต่ถ้าเราต้องการ เพิ่ม Class เข้าไปซึ่งส่วนใหญ่ในงานจริงเป็นแบบนั้น เราจะใช้ addClass แทน อันนี้จะขึ้นอยู่กับรูปแบบการเขียน Stylesheet ของเรา