สอน HTML5 for mobile : jQuery mobile อีเวนท์ Swipe

การเขียน web HTML นั้นโดยเว็บปกติก็สามารถจะเขียนเพื่อให้ใช้งานบน Tablet หรือ Mobile ได้อยู่แล้ว โดยเปลี่ยนจากการใช้เมาส์เป็นการใช้นิ้วมือนั่นเอง แต่ใน Mobile เองก็มีอีเวนท์ touch ที่เพิ่มขึ้นมาอีกเช่น การ Tab, hold, Swipe ซึ่งทำให้เราเขียน HTML สั่งงานอีเวนท์เหล่านี้ได้เช่นกัน

ในที่นี้เราจะสอนการเขียน jQuery mobile ใช้อีเวนท์ Swipe คือการที่เราใช้นิ้วปัดไปที่หน้าจอ Mobile ทัั้งซ้่ายและขวา

Swipe ทางซ้าย

$(“p”).on(“swipeleft”,function(){
alert(“You swiped left!”);
});

Swipe ทางขวา

$(“p”).on(“swiperight”,function(){
alert(“You swiped right!”);
});

ทั้งสองอีเวนท์นี้จะเกิดขึ้นเมื่อลากทางซ้ายหรือขวาบนอีลิเมนท์ที่กำหนดมากกว่า 30px

ตัวอย่างการใช้อีเวนท์ swipe

ตัวอย่างใช้ Swipe เปิด ซ่อน เมนูด้านข้าง

สอน jQuery ตัวอย่างทำแปลงร่างรูปตามตำแหน่งเมาส์ (ประยุคใช้อีเวนท์ mousemove)

Share the joy
  •  
  •  
  •  
  •  
  •  

จากรูปเราจะทำ interactive เมื่อเมาส์เคลื่อนที่อยู่บนรูปมือถือ โดยให้อีกรูปแสดงตามการเคลื่อนไหวของเมาส์(โดยใช้อีเวนท์ jQuery mousemove) เมื่อเมาส์ออกจากรูปจะคำนวนว่าตำแหน่งเมาส์อยู่ที่รูปเกิน 50% หรือไม่ ถ้าเกินให้อีกรูปแสดงแทนเต็มพื้นที่ไปเลย ตามตัวอย่าง โดยวิธีการวางโครงสร้าง HTML และกำหนด CSS คือ รูปหลักเซตเป็น CSS background (คลาส wrap) ใส่ความกว้างและสูงตามรูป ใน div คลาส wrap จะมีอีก div (จะกำหนดขนาดยืดหดที่ div นี้)โดยมีรูปอีกรูปวางอยู่ด้านใน div นี้อีกครั้ง โดย div ที่อยู่ใน .wrap กำหนด overflow:hidden เพื่อให้ซ่อนรูปที่อยู่ใน div นี้ โค๊ดที่ได้จึงเป็นดังนี้ <style> .wrap{ width:600px; height: 286px; background: url(“iphone-w.png”); margin: 70px auto;} .wrap >…

Details

HTML Test speed code ทดสอบความเร็วโค๊ดที่เขียน

คนส่วนมากเวลาเขียนโค๊ดเสร็จ ทดสอบทุกบาวเซอร์ ทุกอุปรกรณ์ แสดงผลออกมาได้ถูกต้องสวยงามแล้ว แต่มักจะมองข้ามการทดสอบความเร็วในการโหลดหน้าเว็บของเรา ซึ่งเป็นส่วนสำคัญของเว็บไซต์กับผู้ใช้ถ้าโหลดนานผู้ใช้ก็อาจจะปิดเว็บเราแล้วหนีไปเปิดเว็บอื่นเลยก็ได้ ทำให้เสียโอกาสอย่างมากสำหรับเว็บไซต์ E-commerce หรือเว็บเซอร์วิสอื่นๆ

จริงๆเป็นความฝังใจที่ผมไปตกสัมภาษกับบริษัทฝรั่งบริษัทนึง ทำได้ทุกอย่างแต่ดันไม่เคย Test speed และ Optimize กับเว็บที่ตัวเองเขียนขึ้นมาเลยว่ามี Performace อย่างไร

สิ่งที่จะต้องทดสอบมีอะไรบ้าง

  • HTML
  • CSS
  • Image
  • JavaScript
  • Font

ส่วนเครื่องมือที่ใช้ทดสอบนั้นอยู่ในบราวเซอร์ Chrome  อยู่แล้วครับเข้่าที่เมนู Tool > Developer tool (Ctrl+Shift+I)
คลิกแทป Network กดปุ่ม reload เพื่อดูผลทดสอบ

HTML speed test
HTML speed test

สอน jQuery event.data หาค่า index โดยที่อลิเมนท์ไม่จำเป็นต้องอยู่ติดกัน

การทำงานของ event.data จะสามารถส่งค่าตัวแปรบางอย่าง ผ่านอีเวนท์ และนำเข้ามาเรียกใช้งานของอีเวนท์นั้นๆได้

การเรียกใช้งาน

event.data.ตัวแปร

และประโยชน์ที่ผมชอบมากคือ การหาค่า index เพื่อนำมาใช้เขียนโปแกรมแบบไดนามิค ซึ่งเมื่อก่อนผมจะใช้คำสั่ง index() เพื่อใช้หาค่า แต่ข้อเสียคือแท็ก HTML จะต้องให้สวยงามตามรูปแบบ ไม่อย่างนั้นค่าที่ได้จะผิดพลาด ปัญหานี้จะเกิดขึ้นบ่อยๆเมื่อเราต้องไปเขียน jQuery ให้กับโค๊ด HTML ของคนอื่นที่เขียนไว้แล้ว ซึ่งบางทีผมต้องรื้อ HTML แล้วเขียนขึ้นมาใหม่

การแก้ปัญหาโดยใช้ event.data ซึ่งเราต้องใช้คำสั่ง each ร่วมด้วยจะช่วยในการวิ่งตามหาค่า index ของอิลิเมนท์นั้นได้อย่างง่ายดาย Syntax คือ

$('.click').each(function(i){
  $(this).on("click",{x:i},function(event){
    alert(event.data.x);
  })
})

 

 

 

สอน HTML5 CSS3 ทำภาพ perspective โดยหมุนแกน 3d

จุดเด่นของ CSS3 ที่น่าสนใจคือการทำงานแบบ 3D สามารถมาทำภาพให้เป็น Perspective ได้ โดยคุณสมบัติมีหลายอย่างให้เราได้กำหนดค่าเช่น scale, move, rotate,…

จากตัวอย่างนี้จะใช้ CSS3 rotate Y คือการหมุน 3 มิติในแนวแกน Y และจะใช้ jQuery เข้ามาช่วยจับ Event mousemove และคำนวนหาระยะห่างระหว่างวัตถุกับ cursor

ตัวอย่างการหมุน rotate แกน 3d

สอน jQuery Multiple event วิธีการใส่หลายๆอีเวนท์

การใช้งานหลายๆอีเวนท์นี้เราจะใช้งานจากเมธอดที่ชื่อว่า on() ซึ่งเมธอดนี้เพิ่มเข้ามาตั้งแต่ jQuery เวอชั่น 1.7 เอามาแทนเมธอดก่อนหน้านี้หลายๆเมธอดด้วยกันคือ blind(), live(), delegate()

ซึ่งการใช้คำสั่ง Multiple event นี้เป็นความสามารถเดิมที่อยู่ในเมธอด blind()

Syntax Multiple event (หลายอีเวนท์ทำงานคำสั่งแบบเดียวกัน)

$(“.button”).on(“mouseover mouseout”,function(){

//do something

});

Syntax Multiple event (แต่ละอีเวนท์ทำงานอิสระ ทำคำสั่งไม่เหมือนกัน)

$(".button").on({
  mouseover:function(){
    //do something
  },
  mouseout:function(){
    //do something
  },
  click:function(){
    //do something
  }
});

คลิปสอน jQuery – การใช้ Multiple event

jQuery lightbox

สอนสร้าง jQuery lightbox แบบไดนามิค content ขึ้นมาใช้เอง

ทำไมต้องสร้าง lightbox ขึ้นมาใช้เอง

ใครเข้ามาอ่านบทความนี้ก็คงแปลกใจว่า มีคนพัฒนา jQuery lightbox อยู่มากมายฟรีๆทำไมไม่ใช้ เสียเวลาเขียนเองให้มันยุ่งยากทำไม

จริงๆแล้วใช่ว่าผมจะหยิ่งไม่ใช้นะครับ ถ้างานเร่งๆก็ใช้ของฟรีครับสะดวกรวดเร็วดี แต่ที่ต้องทำขึ้นมาเองเพราะข้อจำกัดของปลั๊กอินพวกนี้ เช่น ทำให้ไดนามิคคอนเท้นท์โดยเก็บข้อมูลไว้ที่ Javascript, การควบคุมอนิเมชั่นได้ตามใจชอบ

ตัวอย่างใช้ jQuery lightbox ที่ทำขึ้นเอง
download ปลักอิน lightbox

 

สอนใชั lightbox

jQuery event.stopPropagation() หยุดอีเวนท์ที่มาจากพ่อแม่

สมมุติเรามีอิลิเมนท์ div ที่ครอบ span เอาไว้ ตามรูป

 

ถ้าผมสั่งให้ div คลิกแล้วแสดงข้อความ

$('div').click(function(){
  alert("alert("clicked div");")
})

ผลที่ได้เมื่อคลิกเมาส์ทั้งที่ div และที่ span จะแสดงหน้าต่างข้อความ ตัวอย่าง นั่นเป็นเพราะอิลิเมนท์ลูก(span) ต้องทำงานตามพ่อแม่ที่ถูกสั่งงาน

ที่นี้เราต้องการไม่ให้ลูกทำตามคำสั่งเหมือนพ่อแม่ โดยอาจทำคำสั่งอื่น หรือ ไม่ทำคำสั่งอะไรเลยก็ได้ โดยใช้

$("span").click(function(){
  event.stopPropagation();
})

 ดูตัวอย่าง

ประโยชน์ของ event.stopPropagation()

ตัวอย่างการใช้งานจริง เช่น ผมต้องการกดปุ่มแล้วมีกล่องข้อความแสดง (กล่องข้อความเป็น div ที่ซ่อนไว้) แต่เมื่อกดพื้นที่รอบนอกปุ่ม กล่องข้อความจะถูกซ่อนกลับไป

ผมจึงใส่อีเวนท์คลิกที่แท็ก body เพื่อให้ซ่อนข้อความ แต่เนื่องจาก body เป็น parent ของปุ่ม กดปุ่มจึงซ่อนกล่องข้อความด้วยเช่นกัน ผมจึงต้องสั่ง event.stopPropagation ที่ปุ่มก่อนแล้วค่อยสั่งให้แสดงกล่องข้อความ

ตามตัวอย่าง

jQuery สอนเทคนิคกำหนดค่า css ทีเดียวหลาย property

การกำหนด property CSS ใน jQuery ปกติจะใช้

$(‘div’).css(‘opacity’, 0.5);

ถ้าต้องกำหนดหลายๆ property  ก็ต้องเขียน selector ซ้ำๆหลายบรรทัด

$(‘div’).css(‘opacity’, 0.5);
$(‘div’).css(‘color’, ‘red’);
$(‘div’).css(‘font-size’, 20);
$(‘div’).css(‘background’, ‘gray’);

jQuery จึงให้สั่งงานง่ายๆโดยเขียนเป็นรูปแบบพารามิเตอร์ เช่น

$(‘div’).css({
‘color':’red’,
‘background':’gray’
})

สอนทำ Rollover effect border image (Border เด้งดึ๋งดั๋ง)

Share the joy
  •  
  •  
  •  
  •  
  •  

สอน jQuery ทำ Effect ให้รูปภาพเวลาเอาเมาส์เข้าไป Rollover ให้ดูน่าสนใจ เทคนิคนี้นอกจากจะดูดีแล้ว โค๊ดก็ไม่หนักมาก เพราะใช้ CSS ในการเพิ่มเส้นหนาบางเท่าน้นโดยเล่นอนิเมตให้มีจังหวะการเข้าออก ตัวอย่าง jQuery Rollover Effect  HTML โครงสร้างของ HTML ที่สำคัญคือแท็ก a ที่คลุม img และ span ไว้ <a href=”#“><img src=”pic1.jpg” width=”300″ height=”169″ alt=””/><span></span></a> ดูซอสโค๊ด HTML แบบละเอียด  CSS กำหนดสไตล์ /*กำหนด a เป็น relative เพื่อให้เป็นจุดอ้างอิงของ span*/ /*display:block เพื่อให้มีรูปล่างไว้อ้างอิง*/ .thumb > li > a{ position:relative; display:block; } /*span เป็น…

Details