php+mysql+jquery实现贴便签功能_PHP+MySQL+jQueryUI完美便签条

首先我们引入jQuery库、拖动插件jqueryui及弹出层插件fancybox：

然后我们在notes表里面读取便签条：$query = mysql_query("select * from notes order by id desc limit 0, 50");

while ($row = mysql_fetch_array($query)) {

list($left, $top, $zindex) = explode('|', $row['xyz']);

$time = strtotime($row['addtime']);

$notes.= '

' . $row['id'] . '.' . htmlspecialchars($row['content']) . '

——' . htmlspecialchars($row['name']) . '
(' . tranTime($time) . ')

';

}

添加便签条：$("#addbtn").live('click', function(e) {

var txt = $("#note_txt").val();

var user = $("#user").val();

var color = $("#mycolor").val();

if (txt == "") {

$("#msg").html("内容不能为空");

$("#note_txt").focus();

return false;

}

if (user == "") {

$("#msg").html("请输入您的姓名！");

$("#user").focus();

return false;

}

var left = 0;

var top = 0;

var data = {

'zIndex': ++zIndex,

'content': txt,

'user': user,

'color': color,

'left':left,

'top':top

};

$.post('posts.php', data, function(msg) {

zIndex = zIndex++;

//alert(zIndex);

if (parseInt(msg)) {

var str = "

" + msg + "." + txt + "

——" + user + "(刚刚)

";

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

make_draggable($('.note'));

$.fancybox.close();

} else {

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

}

});

e.preventDefault();

});

删除便签条：$(".note").find(".close").click(function() {

var id = $(this).parents(".note").attr("data-id");

$.get("ajax.php", {id: id}, function(data) {

if (data == 1) {

$("#note_"+id).fadeOut();

}

}, "json")

})

posts.php

后台PHP接收ajax请求后，验证数据合法性，将数据插入数据表中，成功后返回插入的id值，返回给前台。$left = intval($_POST['left']);

$top = intval($_POST['top']);

$txt = stripslashes(trim($_POST['content']));

$txt = htmlspecialchars($txt, ENT_QUOTES);

$txt = mysql_real_escape_string(strip_tags($txt), $link); //过滤HTML标签，并转义特殊字符

if (strlen($txt)  100) {

echo '内容长度为1~100字符之间';

exit;

}

$user = stripslashes(trim($_POST['user']));

$user = htmlspecialchars($user, ENT_QUOTES);

$user = mysql_real_escape_string(strip_tags($user), $link);

if (strlen($user)  30) {

echo '姓名长度为2~10字符之间';

exit;

}

$color = $_POST['color'];

$time = date('Y-m-d H:i:s');

$zIndex = $_POST['zIndex'];//堆叠顺序值

$xyz = '' . $left . '|' . $top . '|' . $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);

} else {

echo '出错了！';

}