PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

cookie กับการประยุกต์ ใช้งาน เปลี่ยน background พื้นหลัง ด้วย jQuery และ php

27 October 2010 By


ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทางในการใช้งาน 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']?>">
......
...
..

 


Tags:: cooki php jquery เปลี่บน background





URL สำหรับอ้างอิง