怎么用PHP+MySQL+jQuery實(shí)現(xiàn)貼便簽功能

本篇內(nèi)容主要講解“怎么用PHP+MySQL+jQuery實(shí)現(xiàn)貼便簽功能”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用PHP+MySQL+jQuery實(shí)現(xiàn)貼便簽功能”吧!

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

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

index.php

和本站文章PHP+MySQL+jQuery實(shí)現(xiàn)隨意拖動(dòng)層并即時(shí)保存拖動(dòng)位置的drag.php文件一樣，只是在head部分增加引入fancybox插件，用來實(shí)現(xiàn)新增便簽時(shí)的彈出層效果。關(guān)于fancybox的應(yīng)用，可以參考本站文章：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}

最終彈出的層效果如圖：

global.js

首先，當(dāng)點(diǎn)擊“新增便簽”按鈕時(shí)，調(diào)用fancybox插件。

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

在彈出的層中，可以選擇背景色，當(dāng)點(diǎn)擊了背景色，表單中隱藏域獲得背景色的值，并且改變當(dāng)前選中的樣式。

$("#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"); });

最后當(dāng)點(diǎn)擊“確定”按鈕時(shí)，驗(yàn)證表單，并且將數(shù)據(jù)提交給后臺(tái)操作。限于篇幅，驗(yàn)證表單中的輸入內(nèi)容和姓名不能為空的代碼沒有列出，可查看DEMO中的代碼。下面重點(diǎn)看ajax提交數(shù)據(jù)操作。

$("#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方法向后臺(tái)程序posts.php發(fā)送ajax請(qǐng)求，后臺(tái)獲得請(qǐng)求后，驗(yàn)證數(shù)據(jù)合法性，將數(shù)據(jù)插入數(shù)據(jù)表中，返回成功后，js生成一個(gè)便簽層，并插入到頁面中，同時(shí)使得該新增的便簽層可以拖動(dòng)，完成后關(guān)閉彈出層。如果提交失敗則返回錯(cuò)誤信息。

posts.php

后臺(tái)PHP接收ajax請(qǐng)求后，驗(yàn)證數(shù)據(jù)合法性，將數(shù)據(jù)插入數(shù)據(jù)表中，成功后返回插入的id值，返回給前臺(tái)。

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 '出錯(cuò)了！'; }

數(shù)據(jù)表稍微做了改動(dòng)，增加了字段name和addtime。本站提供的下載包里有相關(guān)文件，歡迎各路英雄一起磋商。

到此，相信大家對(duì)“怎么用PHP+MySQL+jQuery實(shí)現(xiàn)貼便簽功能”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！