溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么用PHP+MySQL+jQuery實現貼便簽功能”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用PHP+MySQL+jQuery實現貼便簽功能”吧!
相信很多網友見過類似許愿墻的程序，用戶可以在網頁上貼個許愿的紙條，并且可以拖動到頁面的任意位置上。今天我要給大家演示的是使用PHP+MySQL+jQuery實現一個工作當中用到的貼便簽紙的功能。
在本站上一篇文章，PHP+MySQL+jQuery實現隨意拖動層并即時保存拖動位置，文中講解了可拖拽的層的實現原理，本文基于上文的例子做了改進，將重點講述其延伸應用，所以閱讀本文之前，請先閱讀上文。
和本站文章PHP+MySQL+jQuery實現隨意拖動層并即時保存拖動位置的drag.php文件一樣，只是在head部分增加引入fancybox插件，用來實現新增便簽時的彈出層效果。關于fancybox的應用，可以參考本站文章：Fancybox豐富的彈出層效果。
.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}
最終彈出的層效果如圖：
首先，當點擊“新增便簽”按鈕時，調用fancybox插件。
$("#fancy").fancybox({
'type':'ajax',
'modal':true,
'titleShow':false,
});
在彈出的層中，可以選擇背景色，當點擊了背景色，表單中隱藏域獲得背景色的值，并且改變當前選中的樣式。
$("#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");
});
最后當點擊“確定”按鈕時，驗證表單，并且將數據提交給后臺操作。限于篇幅，驗證表單中的輸入內容和姓名不能為空的代碼沒有列出，可查看DEMO中的代碼。下面重點看ajax提交數據操作。
$("#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 = "<p class='note "+color+"' style='left:0;top:0;z-index:"+zIndex+"'>
<span class='data'>"+msg+".</span>"+txt+"<p>——"+user+"(剛剛)</p></p>";
$(".demo").append(str);
make_draggable($('.note'));
$.fancybox.close();
}else{
$("#msg").html(msg);
}
});
});
我們采用post方法向后臺程序posts.php發送ajax請求，后臺獲得請求后，驗證數據合法性，將數據插入數據表中，返回成功后，js生成一個便簽層，并插入到頁面中，同時使得該新增的便簽層可以拖動，完成后關閉彈出層。如果提交失敗則返回錯誤信息。
后臺PHP接收ajax請求后，驗證數據合法性，將數據插入數據表中，成功后返回插入的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 '出錯了！';
}
數據表稍微做了改動，增加了字段name和addtime。本站提供的下載包里有相關文件，歡迎各路英雄一起磋商。
到此，相信大家對“怎么用PHP+MySQL+jQuery實現貼便簽功能”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
