PHP+MySQL+jQueryUI完美便签条

news/2024/4/19 0:09:33

演示下载地址:http://www.erdangjiade.com/js...
效果图:
58d4859c79a7c.png

完整代码如下:

首先我们引入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')); $.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 '出错了!'; }

演示下载地址:http://www.erdangjiade.com/js...


https://dhexx.cn/news/show-1104019.html

相关文章

CSS的盒子模型案例

CSS的功能可谓强大&#xff0c;作为程序员&#xff0c;不能只在后台默默无闻&#xff0c;也要到前台爽一把&#xff0c;意思意思&#xff0c;这样自己干活从前台 界面到后台数据库就算是全能了。能给自己省了不少力气&#xff0c;艺多不压身嘛&#xff0c;下面来介绍一下CSS里…

CSS的浮动效果

在CSS中&#xff0c;浮动是非常重要的一个功能&#xff0c;主要是用来控制行元素或者块元素并列显示或者向左或者向右浮动。下面 来看一下效果。 先看一下Div的向右浮动效果 HTML代码如下 <!DOCTYPE html> <html><head><title>css的浮动效果</t…

CSS的三种定位方式介绍

在CSS中一共有N种定位方式&#xff0c;其中&#xff0c;static ,relative,absolute三种方式是最基本最常用的三种定位方式。他们的基 本介绍如下。 static默认定位方式relative相对定位&#xff0c;相对于原来的位置&#xff0c;但是原来的位置仍然保留absolute定位&#xff…

PyQt QListWidget修改列表项item的行高

百度&#xff0c;谷歌之后都说用setHintSize(self,QCore.QSize(width,height)),然并卵&#xff0c;后来用qss修改就可以了&#xff0c;具体用法如下

seven叶项目总结03

1、增加textView.的inputAccessoryView 2、AccessoryView类及delegate实现。 - (instancetype)initWithTitles:(NSArray*)titles icons:(NSArray*)icons中增加selector。处理可统一方法中处理&#xff0c; a&#xff0c;拍照、视频。使用UIImagePickerController。根据UIIma…

CADisplayLink 动画

CADisplayLink结合UIBezierPath的神奇妙用 做过iOS动画的朋友都知道&#xff0c;动画中一大头疼之处就是弹性、形变之类扭曲的效果。iOS7开始&#xff0c;我们开始可以直接使用UiView的渲染动画API实现简单的弹性效果。 1 (void)animateWithDuration:(NSTimeInterval)duration …

Windwos Hyper-v嵌套虚拟化

现在微软的虚拟化越来越成熟&#xff0c;许多人也渐渐的开始研究微软的Hyper-V的虚拟化&#xff0c;但是苦于没有太多的电脑提供部署环境&#xff0c;再加上之前的windwos版本是不支持在虚拟机中安装Hyper-V&#xff0c;让大家头大。现在的win10和win server 2016都已经支持嵌套…

JavaScript+CSS实现经典的树形导航栏

在一些管理系统里面&#xff0c;一般右侧都会有树形的导航栏&#xff0c;点击一下就会出现下拉菜单&#xff0c;显示出来该父菜单下面的子菜单 项目&#xff0c;然后配以图片&#xff0c;和CSS的效果&#xff0c;可以说是非常常用的功能&#xff0c;现在做一个项目&#xff0c…

java基础知识面试题(41-95)

41、日期和时间&#xff1a;- 如何取得年月日、小时分钟秒&#xff1f;- 如何取得从1970年1月1日0时0分0秒到现在的毫秒数&#xff1f;- 如何取得某月的最后一天&#xff1f;- 如何格式化日期&#xff1f;答&#xff1a;问题1&#xff1a;创建java.util.Calendar 实例&#xff…