相信很(hěn)多(duō)網友(yǒu)見過類似許願牆的程序，用戶可(kě)以在網頁上(shàng)貼個(gè)許願的紙條，并且可(kě)以拖動到頁面的任意位置上(shàng)。今天我要給大(dà)家(jiā)演示的是使用PHP+MySQL+jQuery實現一個(gè)工作(zuò)當中用到的貼便簽紙的功能。

在本站(zhàn)上(shàng)一篇文章，PHP+MySQL+jQuery實現随意拖動層并即時(shí)保存拖動位置，文中講解了可(kě)拖拽的層的實現原理(lǐ)，本文基于上(shàng)文的例子做(zuò)了改進，将重點講述其延伸應用，所以閱讀本文之前，請(qǐng)先閱讀上(shàng)文。

index.php

和(hé)本站(zhàn)文章PHP+MySQL+jQuery實現随意拖動層并即時(shí)保存拖動位置的drag.php文件一樣，隻是在head部分增加引入fancybox插件，用來(lái)實現新增便簽時(shí)的彈出層效果。關于fancybox的應用，可(kě)以參考本站(zhàn)文章：Fancybox豐富的彈出層效果。

此外，需要在index.php上(shàng)加一個(gè)新增便簽的按鈕，觸發彈出層。

彈出層

彈出層就是一個(gè)新的頁面add_note.html，XHTML代碼如下：

新增便簽

   

      

        

           
請(qǐng)輸入內(nèi)容： 
        
        

           

        
        

           
請(qǐng)輸入姓名：
           
背景色：
        
        

           

           

                 

                 

                 

              

        
        

           

            
        
      
   

CSS代碼：

.popup_title{background:#e8f5fe; padding:4px}
#note_form{padding:4px}
#note_form p{line-height:24px}
.input{border:1px solid #ccc; padding:2px}
.posttable td{line-height:24px; padding:2px}
#color li{float:left; width:20px; height:20px; margin-left:6px; cursor:pointer}
#color li.cur{border:1px solid #369}
.btn{width:68px; height:24px; background:url(images/btn_bg.gif) repeat-x;
 border:1px solid #9cf; cursor:pointer}
#msg{padding:2px; margin-left:10px; color:#f30}

最終彈出的層效果如圖：

global.js

首先，當點擊“新增便簽”按鈕時(shí)，調用fancybox插件。

$("#fancy").fancybox({
	'type':'ajax',
	'modal':true,
	'titleShow':false,
});

在彈出的層中，可(kě)以選擇背景色，當點擊了背景色，表單中隐藏域獲得(de)背景色的值，并且改變當前選中的樣式。

$("#color li").live('click',function(){
	var color = $(this).attr("class");
	$("#mycolor").val(color);
	$(this).css("border","1px solid #369");
	$(this).siblings().css("border","1px solid #fff");
});

最後當點擊“确定”按鈕時(shí)，驗證表單，并且将數(shù)據提交給後台操作(zuò)。限于篇幅，驗證表單中的輸入內(nèi)容和(hé)姓名不能為(wèi)空(kōng)的代碼沒有(yǒu)列出，可(kě)查看DEMO中的代碼。下面重點看ajax提交數(shù)據操作(zuò)。

$("#addbtn").live('click',function(e){
	var txt = $("#note_txt").val();
	var user = $("#user").val();
	var color = $("#mycolor").val();
    
    var data = {
		'zIndex': ++zIndex,
		'content': txt,
		'user': user,
		'color': color
	}; 
    
    $.post('posts.php',data,function(msg){
		zIndex = zIndex++;
		if(parseInt(msg)){
			var str = "

"+msg+"."+txt+"
——"+user+"(剛剛)
";
			$(".demo").append(str);
			make_draggable($('.note'));
			$.fancybox.close();
		}else{
			$("#msg").html(msg);
		}			
	});  
});

我們采用post方法向後台程序posts.php發送ajax請(qǐng)求，後台獲得(de)請(qǐng)求後，驗證數(shù)據合法性，将數(shù)據插入數(shù)據表中，返回成功後，js生(shēng)成一個(gè)便簽層，并插入到頁面中，同時(shí)使得(de)該新增的便簽層可(kě)以拖動，完成後關閉彈出層。如果提交失敗則返回錯誤信息。

posts.php

後台PHP接收ajax請(qǐng)求後，驗證數(shù)據合法性，将數(shù)據插入數(shù)據表中，成功後返回插入的id值，返回給前台。

require_once('connect.php');
$txt = stripslashes(trim($_POST['content']));
$user = stripslashes(trim($_POST['user']));
$color = $_POST['color'];
$time = date('Y-m-d H:i:s');
$zIndex = $_POST['zIndex'];
$xyz = '0|0|'.$zIndex;
$query = mysql_query("insert into notes(content,name,color,xyz,addtime)values
('$txt','$user','$color','$xyz','$time')");
if($query){
	echo mysql_insert_id($link); //輸出插入的ID值
}else{
	echo '出錯了！';
}

數(shù)據表稍微做(zuò)了改動，增加了字段name和(hé)addtime。本站(zhàn)提供的下載包裏有(yǒu)相關文件，歡迎各路英雄一起磋商。