Tags:
Topics: 

สวัสดีครับ วันนี้ผมขอนำเสนอ jQuery plug-in สำหรับทำหน้า lock screen หรือหน้าสำหรับล็อกอินของเว็บที่มีลักษณะเป็น pattern input (ใช้นิ้วลากตามจุดเพื่อปลดล็อก) โดย plug-in ตัวนี้มีเป้าหมายสำหรับเว็บแอพพลิเคชันที่ตั้งใจจะให้ทำงานบนอุปกรณ์โมบายล์เช่นแท็บเล็ตหรือโทรศัพท์มือถือ ซึ่งจริงๆ แล้วสามารถใช้บนพีซีได้แต่คิดว่าสำหรับบนพีซีนั้นใช้ input box ธรรมดาที่ใช้คีย์บอร์ดพิมพ์เอาจะง่ายกว่าครับ

ท่านที่สนใจสามารถทดลองเล่นได้ที่ หน้าตัวอย่าง หรือรับไปใช้งานได้ที่ GitHub ส่วนรายละเอียดและวิธีการใช้งาน plug-in ตัวนี้ผมเขียนไว้ใน README.md ของ GitHub ครับ คิดว่าค่อนข้างครบถ้วนพอสมควรทีเดียว ถ้าท่านไหนได้ลองไปใช้แล้วเจอปัญหา เจอบั๊ก หรือต้องการติชม ก็สามารถโพสต์แนะนำไว้ในหัวข้อนี้ หรือจะสร้าง ticket ไว้ใน GitHub ก็ได้ครับ

Get latest news from Blognone

Comments

By: tongtree27
AndroidWindowsIn Love
on 26 February 2013 - 00:44 #545499
tongtree27's picture

ยอดไปเลย ^^

By: pongmile
ContributorAndroidSymbianWindows
on 26 February 2013 - 02:19 #545528
pongmile's picture

ใช้ใน ipad ได้ดีเลยทีเดียวครับ

By: iStyle
ContributoriPhoneAndroidSymbian
on 27 February 2013 - 13:12 #546085 Reply to:545528
iStyle's picture

แต่ผมใช้ได้ตั้งหลายทีนะครับ..


May the Force Close be with you. || @nuttyi

By: LEVY
AndroidSymbianWindowsIn Love
on 27 February 2013 - 17:22 #546181 Reply to:546085
LEVY's picture

อั๊ยยะ

By: PaPaSEK
ContributorAndroidWindowsIn Love
on 27 February 2013 - 17:32 #546183 Reply to:546085
PaPaSEK's picture

จะไฝว้เหรอครับ

By: nuntawat
WriterAndroidWindowsIn Love
on 26 February 2013 - 06:07 #545549
nuntawat's picture
  • ล๊อค -> ล็อค
  • tablet, PC, login, web application เขียนเป็นภาษาไทยได้
  • หลังไม้ยมกเว้น 1 เคาะ
By: panitw
Windows Phone
on 26 February 2013 - 06:26 #545550 Reply to:545549
panitw's picture

แก้แล้วนะครับ ไม่แน่ใจว่าภาษาไทยที่ทับศัพท์ผมเขียนถูกรึเปล่า แต่ลองหาใน Guideline แล้วเจอแค่บางคำครับ

By: nuntawat
WriterAndroidWindowsIn Love
on 26 February 2013 - 11:11 #545639 Reply to:545550
nuntawat's picture
  • ล็อค -> ล็อก (ขออภัยด้วยครั้งที่แล้วพิมพ์ผิด)
  • แอพลิเคชั่น -> แอพพลิเคชัน
By: panitw
Windows Phone
on 26 February 2013 - 11:25 #545652 Reply to:545639
panitw's picture

โอเคครับ แก้เรียบร้อย

By: idmaximum
iPhoneAndroidWindows
on 26 February 2013 - 11:45 #545671
idmaximum's picture

ลองบน Safari iPhone สมูทมากครับ เยี่ยมเลย ^^

By: xenogew
ContributorAndroidWindows
on 26 February 2013 - 12:03 #545685
xenogew's picture

เจ๋งมากเลยครับ

By: pawinpawin
Writer
on 26 February 2013 - 12:06 #545687

วนหลายๆ รอบได้ด้วยแฮะ

By: tekkasit
ContributorAndroidWindowsIn Love
on 26 February 2013 - 12:38 #545713 Reply to:545687
tekkasit's picture

ใช่ๆ ซ้ำจุดได้เรื่อยๆแฮะ ซึ่งกับ Android นี่ทำไม่ได้นะ

By: panitw
Windows Phone
on 26 February 2013 - 12:54 #545723 Reply to:545713
panitw's picture

จริงๆมันควรจะได้หรือไม่ได้อะครับ สำหรับมุมมองของ User

By: clayzizer
Windows PhoneAndroidBlackberryWindows
on 26 February 2013 - 14:15 #545756 Reply to:545723

ไม่ควรครับ ในแง่ของ UX,UI ลากซ้อนทับกันได้นี่ถึงกับมึน

By: hisoft
ContributorWindows PhoneWindows
on 26 February 2013 - 19:52 #545860 Reply to:545723
hisoft's picture

สมัย Windows Mobile มันเคยทำได้ครับ แต่ Android ทำไม่ได้แล้ว จริง ๆ ผมเคยชอบให้มันซ้อนได้เพราะคนอื่นมองไม่ออกดี

By: hisoft
ContributorWindows PhoneWindows
on 26 February 2013 - 12:07 #545688
hisoft's picture

IE10 Windows 8 ได้ แต่ถ้าลากไปแล้ว พอลากครั้งใหม่เส้นเดิมจะยังค้างอยู่ครับ ส่วน Mobile IE9 Windows Phone 7 ไม่ขึ้นเลย

By: panitw
Windows Phone
on 26 February 2013 - 12:11 #545694 Reply to:545688
panitw's picture

ได้ครับ เดี๋ยวผมจัดการเช็คให้ ขอบคุณที่ช่วย Report bug ครับ

By: HMage
AndroidWindows
on 26 February 2013 - 12:54 #545724

ลากข้ามไม่ได้ครับ เช่น จากตำแหน่ง 8 ไป 1

By: PaPaSEK
ContributorAndroidWindowsIn Love
on 26 February 2013 - 15:26 #545769 Reply to:545724
PaPaSEK's picture

ผมลองบน FF 18.0.2 ได้นะครับ แต่เมาส์ห้ามผ่านตุ่มอื่นๆ ต้องลากหลบ

By: l2aelba
iPhoneAndroid
on 26 February 2013 - 16:15 #545800
l2aelba's picture

ผมว่าใส่ animation นิดหน่อยระหว่างการเชื่อมคงจะดีไม่ใช่น้อย :D

By: PaPaSEK
ContributorAndroidWindowsIn Love
on 26 February 2013 - 16:54 #545817 Reply to:545800
PaPaSEK's picture

คงจะสงสาร JavaScript engine บนมือถือน่ะครับ

By: l2aelba
iPhoneAndroid
on 27 February 2013 - 16:44 #546172 Reply to:545817
l2aelba's picture

ใช้ canvas ผมไม่รู้ แต่ถ้าใช้ css3 ผมว่าอาจจะลื่นมากกว่า

By: benwrk
Windows PhoneWindows
on 27 February 2013 - 00:56 #545923
benwrk's picture

IE10 WP8 ไม่ได้เลยครับ ลากแล้วกลายเป็นเลื่อนหน้าแทน

By: panitw
Windows Phone
on 27 February 2013 - 17:37 #546191 Reply to:545923
panitw's picture

เดี๋ยวลองซ่อมดูครับ