素材牛VIP会员

PHP+MySQL+jQueryUI完美便签条

 所属分类:PHP/MySql-Ajax,常用实例教程,MySQL

 浏览:8514次-  下载:981次-  评论:18次-  更新时间:2020-08-30
PHP+MySQL+jQueryUI完美便签条
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:相信很多网友见过类似许愿墙的程序,用户可以在网页上贴个许愿的纸条,并且可以拖动到页面的任意位置上。今天我要给大家演示的是使用PHP+MySQL+jQuery实现一个工作当中用到的贴便签纸的功能。

基础属性

  • 难易中级
  • 语言PHP
  • 数据库MySql

详细介绍

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

<script type="text/javascript" src="jquery.js"></script>  
<script type='text/javascript' src='js/jquery-ui.min.js'></script> 
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.pack.js"></script>

然后我们在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.= ' 
    <div class="note ' . $row['color'] . '" data-id=' . $row['id'] . ' style="left:' . $left . 'px;top:' . $top . 'px;z-index:' . $zindex . '" id="note_' . $row['id'] . '"> 
        <span class="data">' . $row['id'] . '.</span>' . htmlspecialchars($row['content']) . ' 
        <p class="user">——' . htmlspecialchars($row['name']) . '<br/>(' . tranTime($time) . ')</p><a class="close"></a> 
    </div>'; 
}

添加便签条:

$("#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')); 
      &nbspnbsp;         $.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) < 1 || 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) < 2 || 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 '出错了!'; 
}

讨论这个素材(18)回答他人问题或分享使用心得会奖励牛币

陌***3  
2020年03月01日

厉害了,下载下来看看。

回复
13***64  
2020年03月12日

怎么添加删除按钮呢

回复
适***的  
2020年04月02日

厉害的高手

回复
lo***ou  
2020年04月09日

感觉还可以

回复
麦***j  
2020年04月17日

回头修改下支持手机版

回复
sh***ng  
2020年04月18日

感觉效果很炫

回复
威***军  
2020年05月08日

非常好不从啊

回复
雨***落  
2020年06月12日

虽然我网卡,但是效果很炫酷,点赞

回复
ch***ng  
2020年06月16日

sounds good

回复
ha***ee  
2020年06月25日

实用呀,谢谢拉

回复
ji***ca  
2020年07月02日

便签功能也挺好的

回复
小***学  
2020年07月16日

谁能教我这个怎么用

回复
zh***ao  
2020年07月17日

下载到本地怎么调试啊糗大了

回复
pe***ei  
2020年07月27日

感觉很棒啊。。

回复
ad***cn  
2020年07月30日

完美无瑕。。

回复
错***7  
2020年08月02日

很厉害,准备研究研究,想加一些 特点

回复
ha***00  
2020年08月10日

可以哎哎哎

回复
qq***19  
2020年10月08日

不错,有记忆功能

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:981
所需牛币:80 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)