• 芯片是汽车产业发展的基石  专家呼吁建立"汽车芯片智库" 2019-06-13
  • “高深文学创作回顾研讨会”在北京举行 2019-06-13
  • 江苏专项督查基础教育问题 择校热、大班额成重点 2019-06-08
  • 14599元!索尼A7M3发布:续航翻番、支持4K视频 2019-06-08
  • 首页 春城壹网 七彩云南 一网天下 2019-05-22
  • QFII政策调整引增量资金入场 “成长+大消费”或成布局重点 2019-05-22
  • 密印“农禅”:何以在蛮荒之地举起文明火把(图) 2019-05-18
  • 20180531 袁隆平:海水稻打破纪录,杂交稻走向全球 2019-05-17
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-15
  • 法国装置艺术家将一部老旧房车改造成移动游泳池 2019-05-13
  • 习近平致信祝贺人民日报创刊70周年 2019-05-10
  • 诗经讲演录:男子如何从好色转为好德? 2019-05-10
  • 中国外交部:就朝美领导人会晤发表声明 2019-05-06
  • 报道新闻记录历史 70载人民日报见证中国发展大事 2019-05-06
  • 浙江小学生北大行 梦想教育从小开始 2019-04-27
  • 欢迎访问

    云南11选五走势图:云南鼎浩信息技术有限公司官方网站,云南网站建设诚信品牌!

    DING HAO COLUMN 鼎浩专栏

    鼎浩的一些分享
    Sharing from Ding Hao

    PHP+MySQL+jQuery实现贴便签功能

    来源:云南11选五走势图500期     2013年07月02日17:02
    字号:T|T

    云南11选五走势图500期 www.a-mcl.com 相信很多网友见过类似许愿墙的程序,用户可以在网页上贴个许愿的纸条,并且可以拖动到页面的任意位置上。今天我要给大家演示的是使用PHP+MySQL+jQuery实现一个工作当中用到的贴便签纸的功能。

    查看演示DEMO 下载源码

    在本站上一篇文章,PHP+MySQL+jQuery实现随意拖动层并即时保存拖动位置,文中讲解了可拖拽的层的实现原理,本文基于上文的例子做了改进,将重点讲述其延伸应用,所以阅读本文之前,请先阅读上文。

    index.php

    和本站文章PHP+MySQL+jQuery实现随意拖动层并即时保存拖动位置的drag.php文件一样,只是在head部分增加引入fancybox插件,用来实现新增便签时的弹出层效果。关于fancybox的应用,可以参考本站文章:Fancybox丰富的弹出层效果。

    
    
    
    

    此外,需要在index.php上加一个新增便签的按钮,触发弹出层。

    
    新增便签
    

    弹出层

    弹出层就是一个新的页面add_note.html,XHTML代码如下:

    
    
    请输入内容:
    请输入姓名: 背景色:

    CSS代码:

    
    .popup_title{background:#e8f5fe; padding:4px}
    #note_form{padding:4px}
    #note_form p{line-height:24px}
    .input{border:1px solid #ccc; padding:2px}
    .posttable td{line-height:24px; padding:2px}
    #color li{float:left; width:20px; height:20px; margin-left:6px; cursor:pointer}
    #color li.cur{border:1px solid #369}
    .btn{width:68px; height:24px; background:url(images/btn_bg.gif) repeat-x;
     border:1px solid #9cf; cursor:pointer}
    #msg{padding:2px; margin-left:10px; color:#f30}
    

    最终弹出的层效果如图:

    global.js

    首先,当点击“新增便签”按钮时,调用fancybox插件。

    
    $("#fancy").fancybox({
    	'type':'ajax',
    	'modal':true,
    	'titleShow':false,
    });
    

    在弹出的层中,可以选择背景色,当点击了背景色,表单中隐藏域获得背景色的值,并且改变当前选中的样式。

    
    $("#color li").live('click',function(){
    	var color = $(this).attr("class");
    	$("#mycolor").val(color);
    	$(this).css("border","1px solid #369");
    	$(this).siblings().css("border","1px solid #fff");
    });
    

    最后当点击“确定”按钮时,验证表单,并且将数据提交给后台操作。限于篇幅,验证表单中的输入内容和姓名不能为空的代码没有列出,可查看DEMO中的代码。下面重点看ajax提交数据操作。

    
    $("#addbtn").live('click',function(e){
    	var txt = $("#note_txt").val();
    	var user = $("#user").val();
    	var color = $("#mycolor").val();
        
        var data = {
    		'zIndex': ++zIndex,
    		'content': txt,
    		'user': user,
    		'color': color
    	}; 
        
        $.post('posts.php',data,function(msg){
    		zIndex = zIndex++;
    		if(parseInt(msg)){
    			var str = "
    "+msg+"."+txt+"

    ——"+user+"(刚刚)

    "; $(".demo").append(str); make_draggable($('.note')); $.fancybox.close(); }else{ $("#msg").html(msg); } }); });

    我们采用post方法向后台程序posts.php发送ajax请求,后台获得请求后,验证数据合法性,将数据插入数据表中,返回成功后,js生成一个便签层,并插入到页面中,同时使得该新增的便签层可以拖动,完成后关闭弹出层。如果提交失败则返回错误信息。

    posts.php

    后台PHP接收ajax请求后,验证数据合法性,将数据插入数据表中,成功后返回插入的id值,返回给前台。

    
    require_once('connect.php');
    $txt = stripslashes(trim($_POST['content']));
    $user = stripslashes(trim($_POST['user']));
    $color = $_POST['color'];
    $time = date('Y-m-d H:i:s');
    $zIndex = $_POST['zIndex'];
    $xyz = '0|0|'.$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); //输出插入的ID值
    }else{
    	echo '出错了!';
    }
    

    数据表稍微做了改动,增加了字段name和addtime。本站提供的下载包里有相关文件,欢迎各路英雄一起磋商。

    客服中心
    点击进行在线咨询

    QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

    咨询热线:0871-63399840

    客服热线:0871-63523332

    客服中心 客服中心
  • 芯片是汽车产业发展的基石  专家呼吁建立"汽车芯片智库" 2019-06-13
  • “高深文学创作回顾研讨会”在北京举行 2019-06-13
  • 江苏专项督查基础教育问题 择校热、大班额成重点 2019-06-08
  • 14599元!索尼A7M3发布:续航翻番、支持4K视频 2019-06-08
  • 首页 春城壹网 七彩云南 一网天下 2019-05-22
  • QFII政策调整引增量资金入场 “成长+大消费”或成布局重点 2019-05-22
  • 密印“农禅”:何以在蛮荒之地举起文明火把(图) 2019-05-18
  • 20180531 袁隆平:海水稻打破纪录,杂交稻走向全球 2019-05-17
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-15
  • 法国装置艺术家将一部老旧房车改造成移动游泳池 2019-05-13
  • 习近平致信祝贺人民日报创刊70周年 2019-05-10
  • 诗经讲演录:男子如何从好色转为好德? 2019-05-10
  • 中国外交部:就朝美领导人会晤发表声明 2019-05-06
  • 报道新闻记录历史 70载人民日报见证中国发展大事 2019-05-06
  • 浙江小学生北大行 梦想教育从小开始 2019-04-27