相信很多网友见过类似许愿墙的程序,用户可以在网页上贴个许愿的纸条,并且可以拖动到页面的任意位置上。今天我要给大家演示的是使用PHP+MySQL+jQuery实现一个工作当中用到的贴便签纸的功能。
添加便签条
$("#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 = "<div class='note " + color + "' style='left:"+left+";top:"+top+";z-index:" + zIndex + "'><span class='data'>" + msg + ".</span>" + txt + "<p>——" + user + "(刚刚)</p></div>";
$(".container").append(str);
make_draggable($('.note'));
$.fancybox.close();
} else {
$("#msg").html(msg);
}
});
e.preventDefault();
});便签条添加和浏览演示效果:http://www.sucaihuo.com/js/70.html

评论() 相关

收藏

赞

hjl416148489

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。