PHP+Msql+Ajax实现便签条
- WBOYasal
- 2016-06-07 11:38:451052semak imbas
相信很多网友见过类似许愿墙的程序，用户可以在网页上贴个许愿的纸条，并且可以拖动到页面的任意位置上。今天我要给大家演示的是使用PHP+MySQL+jQuery实现一个工作当中用到的贴便签纸的功能。
添加便签条
$("#addbtn").live('click', function(e) { <br>
var txt = $("#note_txt").val(); <br>
var user = $("#user").val(); <br>
var color = $("#mycolor").val(); <br>
if (txt == "") { <br>
$("#msg").html("内容不能为空"); <br>
$("#note_txt").focus(); <br>
return false; <br>
} <br>
if (user == "") { <br>
$("#msg").html("请输入您的姓名！"); <br>
$("#user").focus(); <br>
return false; <br>
} <br>
var left = 0; <br>
var top = 0; <br>
var data = { <br>
'zIndex': ++zIndex, <br>
'content': txt, <br>
'user': user, <br>
'color': color, <br>
'left':left, <br>
'top':top <br>
}; <br>
$.post('posts.php', data, function(msg) { <br>
zIndex = zIndex++; <br>
//alert(zIndex); <br>
if (parseInt(msg)) { <br>
<br>
var str = "<div>
<span>" + msg + ".</span>" + txt + "<p>——" + user + "(刚刚)</p>
</div>"; <br>
$(".container").append(str); <br>
make_draggable($('.note')); <br>
$.fancybox.close(); <br>
} else { <br>
$("#msg").html(msg); <br>
} <br>
}); <br>
e.preventDefault(); <br>
});便签条添加和浏览演示效果：http://www.sucaihuo.com/js/70.html
AD：真正免费，域名+虚机+企业邮箱=0元