Jquery : offset() , position()
Author: admin
ง่วงนอนจังเลย จริง ๆ วันนี้ว่าจะทำเว็บ Fdlite โหมดดูบอลออนไลน์ต่อ
แต่ยัง งง ๆ กับการรัน sopcast บน ubuntu ใครรู้ช่วยบอกผมที
55 ตอนอยู่ที่ทำงานหา add-ons ของ firefox เจอเป็น ie tab ซึ่งจะช่วยให้
run active x บน firefox ได้
พอจะมาลองใน ubuntu ไม่ได้ซะง้น not available on linux
เหอ ๆ เจ็ขช้ำน้ำใจเป็นที่สุด
นั่นหละ อยากใช้ linux เองแต่ก็ดีนะ ได้ใช้ พี่ google ตลอดในการแก้ปัญหา ว่าแล้วก็ต้องไปหาวิธีการต่อซะหน่อย
ก่อนจากวนนี้ฝาก lab เกี่ยวกับ การใช้ Jquery function offset() และ position()
สอง function นี้ใช้หาตำแหน่งของ object ที่เราสนใจจะหา
โดยค่าที่ return กลับมาจะเป็น object
ศึกษาตัวอย่างโค้ดได้จากด้านล่างเลยครับ ลองไล่ดูนะครับ เขียนแบบง่าย ๆ นะจะเข้าใจกัน
โชคดีมีเงินใช้กันทุกคนนะครับ
ดูตัวอย่างเว็บจาก link นี้เลยครับ http://www.fdlite.com/lab/lab1/jquery_css_position.php
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var pos;
function show_pos(div_rec)
{
$(div_rec).click(function(){
pos = $(this).offset();
$("#pos_left").text(pos.left);
$("#pos_top").text(pos.top);
});
}
show_pos("#rec");
show_pos("#rec1");
show_pos("#rec2");
});
</script>
<style type="text/css">
#rec
{
width : 200px;
height : 170px;
}
#rec
{
width : 50px;
height : 50px;
background-color : #D35050;
}
#rec1
{
width : 50px;
height : 50px;
background-color : #4F94D1;
margin-left : 100px;
}
#rec2
{
width : 50px;
height : 50px;
background-color : #F1F486;
margin-left : 150px;
}
</style>
<body>
<div id="test">
<div id="rec" style="cursor:pointer" title="click"></div>
<div id="rec1" style="cursor:pointer" title="click"></div>
<div id="rec2" style="cursor:pointer" title="click"></div>
</div>
postion left : <b><span id="pos_left">0</span></b>px position top : <b><span id="pos_top">0</span></b>px
</body>
</head>
</html>
Posted in 
Tags: 
Image Verify by jquery + PHP
Author: admin
ห่างหายไปนาน เพราะไปซุ่ม เขียนเว็บของตัวเองอยู่
เป็นเว็บเกี่ยวกับฟุตบอล ตอนนี้ทำไปได้ ประมาณ 50% แล้ว
เว็บ skt ไม่ได้อัพ เผลอแป้บเดียว หลุดจาก index google
หน้าแรกด้วย keyword “Jquery” เลย T T
ต้องมาอัพบ่อย ๆ แล้ว แบบนี้
วันนี้ผมมีโค้ดเกี่ยวกับการทำ image verify ง่าย ๆ มาฝาก
( จริง ๆ เขียน ยาก ๆ ไม่เป็นหรอก เขียนงู ๆ ปลา ๆ แต่แบบว่า อยากแจก 555 )
โค้ดดูง่ายมากนะครับ ไล่แปบเดียวก็รู้เรื่อง
มี 4 file หลัก index.php , verify.php ,imageverify.php ,custom.js
หลักการทำงานก็คือ
index.php - แสดง imageverify และคอยรับ input เพื่อ verify
imageverify.php - เป็นไฟล์ที่เขียนรูป image ขึ้นมาครับ
verify.php - verify input กับ image ครับว่าตรงกันมั้ย
custom.js - ใช้ตอน reload imageverify ( ใช้ JQuery น้อยมาก ๆ )
ดู example ได้จากที่นี่ครับ : http://www.fdlite.com/lab/image_verify/index.php
download source code ที่นี่ครับ : http://www.hotfev.com/view.php?id=149
ลองเอาไปประยุกต์หรือศึกษาดูนะครับ หวังว่าคงมีประโยชน์สำหรับ มือใหม่ ไม่มากก็น้อยครับ
Jquery : easy ajax
Author: admin
ห่างหายไปราว ๆ สองอาทิตย์ ติดภารกิจหลายอย่าง พร้อมกับ ปัจจัย ด้าน
internet ไม่พร้อมครับ ถึงวันนี้ได้ฤกษ์กลับ มาจรด ปลายนิ้วพิมพ์ บทความให้
ท่านผู้อ่านได้ติดตามกันแล้ว
…….
….
…
..
.
วันนี้ ผมจะมาเสนอ ขั้นตอนการใช้ <a href=’http://www.jquery.com’>JQuery</a> กับ Ajax อย่างง่าย
รูปแบบที่ตัวผมเอง ถนัดและใช้งานง่าย ที่สุด ดูได้จากรูปแบบข้างล่างเลยครับ
$.ajax({
type : "POST", //method ที่ใช้
url : "test.php", //ไฟล์ที่ ใช้ ajax ไปเรืยก
data : "data1=1&data2=2", //ข้อมูลที่ส่งไปให้ไฟล์นั้น ๆ
success : function(html){
//ถ้า สำเร็จ ให้ทำ function ต่อ โดยส่ง ค่า เป็น html กลับมา
//โดยค่าที่ได้กลับมา จะคืนมาในตัวแปร html
$(div).html(html);
}
});
มาดูตัวอย่างง่าย ๆ ได้จาก ไฟล์ สองไฟล์ตัวอย่างข้างล่างนี้ครับ
ไฟล์แรก index.php
<html>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:button").click(function(){
$.ajax({
type : "POST",
url : "ajax.php",
data : "data1=ajax is now showing!!",
success : function(html){
$("#result").html(html);
}
});
});
});
</script>
<body>
<input type="button" value="Get Ajax!!"></input>
<div id="result">
</div>
</body>
</html>
อีกไฟล์นึงชื่อไฟล์ ajax.php ซึ่งเป็นไฟล์ ajax ของเราครับ
<?php $data1 = $_POST["data1"]; echo "This is message frop ajax.php : '".$data1."'"; ?>
เป็นยังไงกันบ้างครับ ajax ไม่ยาก อย่างที่คุณคิดเลย เมื่อใช้ JQuery
สุดท้ายขอฝากสโลแกนไว้นิดนึง “นึกถึง web นึกถึง JQuery” เย้ย บอกทำไมหว่า
ไปนอนละครับ เจอกันใหม่ entry หน้า ( ใครหลงเข้าดูก็ทิ้งคอมเม้นเป็นกำลังใจได้นะครับ )