PHP+Msql+Ajax实现便签条

浏览:2053 发布日期:2015/04/26 分类:功能实现 关键字: 便签条
相信很多网友见过类似许愿墙的程序,用户可以在网页上贴个许愿的纸条,并且可以拖动到页面的任意位置上。今天我要给大家演示的是使用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
评论( 相关
后面还有条评论,点击查看>>