cookie กับการประยุกต์ ใช้งาน เปลี่ยน background พื้นหลัง ด้วย jQuery และ php
27 October 2010ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทางในการใช้งาน cookie สำหรับกำหนด การเปลี่ยนพื้นหลังด้วยรูปภาพที่ต้องการ ให้เก็บเว็บเพจ สามารถนำไปประยุกต์ใช้กับการเปลี่ยน theme หรือ style sheet
วิธีสร้างไฟล์ทดสอบ เพื่อทำความเข้าใจ
1.สร้างไฟล์ page1.php ตามโค้ดด้านล่าง
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background 1</title>
</head>
<body>
<a href="page2.php">page 2</a>
<br />
<a href="#" class="setbg" rel="http://wallpaper.thaiware.com/wallpapers/2010_10/7538_3196_101024121515_ut.jpg">background 1</a><br />
<a href="#" class="setbg" rel="http://wallpaper.thaiware.com/wallpapers/2010_10/19210_9145_101019215921_vy.jpg">background 2</a>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$(document.body).css("background","url(<?=$_COOKIE['bgSet']?>)");
$(".setbg").click(function(){
var days=10; // กำหนดจำนวนวันที่ต้องการให้จำค่า
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
document.cookie = "bgSet=" +$(this).attr("rel")+ "; expires=" + expires + "; path=/";
$(document.body).css("background","url("+$(this).attr("rel")+")");
});
});
</script>
</body>
</html>
2.สร้างไฟล์ page2.php ตามโค้ดด้านล่าง
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background 2</title>
</head>
<body>
<a href="page1.php">page 1</a><br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$(document.body).css("background","url(<?=$_COOKIE['bgSet']?>)");
});
</script>
</body>
</html>
3.ทดสอบการใช้งาน
ตัวอย่าง http://www.ninenik.com/demo/bg_change/page1.php
จากผลลัพธ์ตัวอย่างเป็นการ เรียกใช้งาานการกำหนด background ด้วย javascript .ใน jQuery
เราสามารถกำหนดการใช้งานได้โดยตรงเช่น
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>background 1</title> </head> <body background="<?=$_COOKIE['bgSet']?>"> ...... ... ..
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
27 Jun 11 ลูกเล่น เพิ่มช่องรับ input type file อัตโนมัติ ด้วย jQuery อ่าน 4210 26 Mar 09 ฟังก์ชัน php แบ่งหน้าแต่งด้วย css อ่าน 6827 04 Dec 09 จัดการ Directory สร้าง ลบ เปลี่ยนชื่อ กำหนด permission ผ่าน FTP function ด้วย PHP อ่าน 1672 17 Feb 12 ประยุกต์ ใช้งาน jquery ui autocomplete ร่วมกับฐานข้อมูล อย่างง่าย อ่าน 3275 19 Oct 08 คำสั่ง SQL functions อ่าน 4871 06 Sep 10 ประยุกต์ การ invite friends ใน facebook มาใช้งาน อ่าน 3996 04 Oct 10 รู้จัก และใช้งาน php sdk สำหรับ facebook เพิ่มขึ้น อ่าน 4236 13 Oct 08 คำสั่ง SQL IN อ่าน 3414 22 Oct 08 คำสั่ง SQL GROUP BY อ่าน 7220 17 Mar 09 สร้างฟังก์ชันลบเวลาด้วย php อย่างง่าย อ่าน 2527 25 Sep 08 รู้จักฟังก์ชันสำหรับการ random อ่าน 2902 23 Dec 09 จัดรูปแบบ การแบ่งคอลัมน์ column ของ ตาราง สำหรับแสดงข้อมูล ด้วย php อ่าน 4572 17 Mar 09 ง่ายๆ กับการส่งค่าตัวแปร PHP ไปใช้ใน Javascript อ่าน 7504 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการกำหนด Style Sheet อ่าน 3758 08 Oct 08 javascript อย่างง่าย กับการสร้างปุ่มจากรูปภาพ อ่าน 3267 31 Jul 10 javascript เรียกฟังก์ชัน ใน parent จาก iframe อ่าน 3374 21 Jan 11 การใช้งาน Meta characters ใน Regular Expressions ของ PHP อ่าน 1540 21 Jul 10 เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย อ่าน 5945 18 Oct 10 แนะนำ jwplayer สำหรับ แสดง video ในเว็บ และ jquery jwplayer อ่าน 2510 03 Nov 08 เก็บ HTML ไว้ในตัวแปร PHP อย่างง่ายด้วยฟังก์ชัน ob_start() อ่าน 3386