การใช้งาน 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/