แสดงบทความที่มีป้ายกำกับ jQuery แสดงบทความทั้งหมด
แสดงบทความที่มีป้ายกำกับ jQuery แสดงบทความทั้งหมด
มาสร้าง Pattern Input คล้ายๆ Android ด้วย jQuery Pattern Input Plug-in
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
มาสร้าง Pattern Input คล้ายๆ Android ด้วย jQuery Pattern Input Plug-in
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
html5
,
jQuery
,
Web Design
เทคนิคการรับค่าพารามิเตอร์ URL ปัจจุบันโดยใช้ JavaScript และ jQuery
เทคนิคเล็กๆน้อยๆ ในการรับค่าพารามิเตอร์ URL ปัจจุบันโดยใช้ Javascript หรือ jQuery นั้นสามารถทำได้ดังนี้ครับ
เช่น URL > http://www.example.com:8080/index.php#tab1?id=123
เช่น URL > http://www.example.com:8080/index.php#tab1?id=123
Javascript
Property Result
--------------------------------------------------------------------------
window.location.host www.example.com:8080
window.location.hostname www.example.com
window.location.port 8080
window.location.protocol http
window.location.pathname index.php
window.location.href http://www.example.com:8080/index.php#tab1
window.location.hash #tab1
window.location.search ?id=123
--------------------------------------------------------------------------
window.location.host www.example.com:8080
window.location.hostname www.example.com
window.location.port 8080
window.location.protocol http
window.location.pathname index.php
window.location.href http://www.example.com:8080/index.php#tab1
window.location.hash #tab1
window.location.search ?id=123
jQuery
Property Result
--------------------------------------------------------------------------
$(location).attr('host'); www.example.com:8080
$(location).attr('hostname'); www.example.com
$(location).attr('port'); 8080
$(location).attr('protocol'); http
$(location).attr('pathname'); index.php
$(location).attr('href'); http://www.example.com:8080/index.php#tab1
$(location).attr('hash'); #tab1
$(location).attr('search'); ?id=123
--------------------------------------------------------------------------
$(location).attr('host'); www.example.com:8080
$(location).attr('hostname'); www.example.com
$(location).attr('port'); 8080
$(location).attr('protocol'); http
$(location).attr('pathname'); index.php
$(location).attr('href'); http://www.example.com:8080/index.php#tab1
$(location).attr('hash'); #tab1
$(location).attr('search'); ?id=123
จะเห็นว่าไม่ยากเลยใช่ไหมครับ เพียงเท่านี้เราก็จะได้ค่าพารามิเตอร์ URL ปัจจุบันเพื่อไปใช้งานอื่นๆต่อไปได้แล้ว
แนะนำ jQuery WYSIWYG เจ๋งๆ (WysiBB)
jQuery plugin (WYSIWYG) editor มีหลากหลายตัวให้เลือกใช้ทั้งฟรีและไม่ฟรี แต่วันนี้ผมขอนำเสนอ WysiBB ซึ่งเป็น (WYSIWYG) editor ที่มีความสามารถพื้นฐานเหมือนๆกับ editor ตัวอื่นๆ แต่ที่เจ๋งไปกว่านั้นคือ สามารถรองรับการแสดงผลบนสมาร์ทโฟนได้ด้วย (Responsive) ทีสำคัญคือฟรีครับ แต่สามารถ Donate เป็นน้ำใจให้ผู้พัฒนาได้
สำหรับการใช้งานก็ไม่อยากครับ
สมัครสมาชิก:
บทความ
(
Atom
)
