php+mysql+jquery实现贴便签功能_PHP+MySQL+jQuery实现贴便签功能

淡淡的烟草味﹌ 2022-10-26 14:22 166阅读 0赞

相信很多网友见过类似许愿墙的程序，用户可以在网页上贴个许愿的纸条，并且可以拖动到页面的任意位置上。今天我要给大家演示的是使用PHP+MySQL+jQuery实现一个工作当中用到的贴便签纸的功能。

![notes.gif][]

在本站上一篇文章，PHP+MySQL+jQuery实现随意拖动层并即时保存拖动位置，文中讲解了可拖拽的层的实现原理，本文基于上文的例子做了改进，将重点讲述其延伸应用，所以阅读本文之前，请先阅读上文。

index.php

和本站文章PHP+MySQL+jQuery实现随意拖动层并即时保存拖动位置的drag.php文件一样，只是在head部分增加引入fancybox插件，用来实现新增便签时的弹出层效果。关于fancybox的应用，可以参考本站文章：Fancybox丰富的弹出层效果。

此外，需要在index.php上加一个新增便签的按钮，触发弹出层。

![新增便签][Image 1]

弹出层

弹出层就是一个新的页面add\_note.html，XHTML代码如下：

### 新增便签 ###

<table> 
 <tbody> 
  <tr> 
   <td colspan="2">请输入内容： <span></span></td> 
  </tr> 
  <tr> 
   <td colspan="2"><p>style="width:98%; height:80px"&gt;</p></td> 
  </tr> 
  <tr> 
   <td>请输入姓名：</td> 
   <td>背景色：</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td colspan="2" align="center"><p>class="btn" value="确 定" /&gt;</p><p>οnclick="$.fancybox.close()" /&gt;</p></td> 
  </tr> 
 </tbody> 
</table>

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\}

最终弹出的层效果如图：

![fancybox1.gif][]

global.js

首先，当点击“新增便签”按钮时，调用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 = "

"+msg+"."+txt+"

——"+user+"(刚刚)

$(".demo").append(str);

make\_draggable($('.note'));

$.fancybox.close();

\}else\{

$("\#msg").html(msg);

\});

我们采用post方法向后台程序posts.php发送ajax请求，后台获得请求后，验证数据合法性，将数据插入数据表中，返回成功后，js生成一个便签层，并插入到页面中，同时使得该新增的便签层可以拖动，完成后关闭弹出层。如果提交失败则返回错误信息。

posts.php

后台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。本站提供的下载包里有相关文件，欢迎各路英雄一起磋商。

下载地址

[notes.gif]: http://7rflgh.com1.z0.glb.clouddn.com/notes.gif
[Image 1]: 
[fancybox1.gif]: http://7rflgh.com1.z0.glb.clouddn.com/fancybox1.gif

php+mysql+jquery实现贴便签功能_PHP+MySQL+jQuery实现贴便签功能

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 php+mysql+jquery实现贴便签功能_PHP+MySQL+jQuery实现贴便签功能

相关 java设计手机便签_解读一加手机系统便签App的设计和功能、易用性

相关 js+css3日历便签样式js特效

相关截图,草图,便签，最近应用

相关 CSS3+JS 实现的便签应用

相关 QQ便签不见了怎么办？腾讯QQ便签停止运营下架后导出恢复QQ便签内容的解决办法

相关 win10自带便签

相关 Android之高仿记事本、备忘录、便签

相关《团队-手机app便签Oldnote-开发文档》

相关《团队-Android手机便签-项目进度》