jQueryUI完美许愿墙

相信很多网友见过类似许愿墙的程序,用户可以在网页上贴个许愿的纸条,并且可以拖动到页面的任意位置上。今天我要给大家演示的是使用PHP+MySQL+jQuery实现一个工作当中用到的贴便签纸的功能。
[img]http://www.sucaihuo.com/jquery/demo/70/images/demo.jpg[/img]
[b]许愿墙网页特效演示[/b]:[url]http://www.sucaihuo.com/php/70.html[/url]
添加许愿条:
$("#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();
});
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值