มาสร้าง Pattern Input คล้ายๆ Android ด้วย jQuery Pattern Input Plug-in

Unknown 14:52 , ไม่มีความคิดเห็น


jQuery Pattern Input Plug-in เป็น jQuery plug-in เพื่อสร้างหน้าจอป้อนข้อมูลรูปแบบคล้ายๆ หน้าจอ Passcode หรือ Pattern Log Screen ของ Android ในสมาร์ทโฟน แตกต่างเพียงแค่เรานำมาใช้งานบน Browser ปลั๊กอินนี้ไม่จำเป็นต้องมีการใช้งานรูปภาพ หรือ ทรัพยากรอื่นๆเลย (นอกเหนือจาก jQuery) และ CSS Plug-in ตัวนี้เราสามารถนำไปประยุกต์เป็นระบบการตรวจสอบก่อนการเข้าสู่ระบบ (Login) หรือ ใช้ป้องกันสแปม หรือป้องกันข้อมูลอื่นๆ ตามรหัสที่เราตั้งไว้

เบราว์เซอร์ที่รองรับ

Plug-in นี้ใช้ HTML5 Canvas ซึ่งจะไม่รองรับการแสดงผลใน Browser รุ่นเก่า เช่น IE6 - 8 อย่างไรก็ตาม Plug-in นี้มีการกำหนดเป้​​าหมายสำหรับการใช้กับอุปกรณ์ระบบสัมผัสพวก สมาร์ทโฟน และแท็บเล็ต ซึ่งส่วนใหญ่จะรองรับ HTML5 อยู่แล้ว

- IE9, IE10 ที่
- Chrome
- Firefox

การใช้งาน

การใช้งานก็ไม่มีอะไรมากครับ เราสามารถไปดาวน์โหลด Plug-in ตัวนี้ซึ่งจะมีไฟล์ Javascript และ CSS มาให้ก็ทำการ Include เข้าไปใช้ในหน้าของเราได้เลย


$("#patternPanel").patternInput();

จากข้างบนสามารถเรียกใช้งาน jQuery Pattern Input Plug-in แบบง่ายๆได้เลยซึ่งจะเป็นการใช้งานแบบ Default ซึ่งจะกำหนด Pattern ขนาด 3 x 3 มาให้ หากไม่ถูกใจเราสามารถปรับรูปแบบ jQuery Pattern Input Plug-in ได้ตามด้านล่าง

$("#patternPanel").patternInput({
    verticalDots: 4, //จำนวน จุด แนวตั้ง
    horizontalDots: 4, //จำนวน จุด แนวนอน
    width: 400, //ความกว้างของ Pattern
    height: 400, //ความสูงของ Pattern
    autoClear: false //สั่งให้เคลียร์ค่ากรณีลากจุดเสร็จ
});

สำหรับ Event สำหรับ jQuery Pattern Input Plug-in จะมี onChange (เมื่อเปลี่ยนแปลงจุด) และ onFinish (เมื่อลากจุดเสร็จ)

$("#patternPanel").patternInput({
    onChange: function(value) {
        alert("Change: "+value.join(",");
    },
    onFinish: function(value) {
        alert("Finish: "+value.join(",");
    }
});

ส่วน Option และ Method อื่นๆ ก็มีดังนี้

autoClear : boolean //True หรือ False

ถ้า autoClear = true เมื่อผู้ใช้ยกนิ้วออกจากหน้าจอเมื่อลากเสร็จ หน้าจอจะได้รับการล้างค่าทันที หากผิดพลาดข้อมูลจะยังคงอยู่ และจะถูกล้างค่าด้วย Method "Clear" ทันที

width : number

ความกว้างของ Pattern กำหนดเป็นตัวเลข

height : number

ความสูงของ Pattern กำหนดเป็นตัวเลข

border : number

ขนาดของขอบ

verticalDots : number

จำนวนคอลัมน์

horizontalDots : number

จำนวนแถว

dotSize : number

ขนาดของปุ่มกด

innerDotSize : number

ขนาดของปุ่มกด ด้านใน

pathSize : number

ขนาดเส้นที่เชื่อมจุด

pathColor : string

สีเส้นที่เชื่อมจุด

Methods

- clear() : void // ล้างค่าใน Pattern
- getLastSequence() : Array // รับค่าจากการลาก Pattern เป็น Array

เพิ่มเติม https://github.com/panitw/patternInput

ไม่มีความคิดเห็น :

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น ( Atom )