使用.NET和Jquery打造简单的便签纸

本文介绍了一个基于AJAX、PHP及jQuery实现的粘贴便签应用,支持动态加载及删除便签功能。通过SQL查询获取便签内容,并利用JavaScript构建DOM元素显示便签。使用Ajax实现了便签的异步删除。

本文根据 http://tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/ 编写,并增加了删除功能

演示: http://demo.tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/demo.php 

2011022510573390.jpg

主要代码是1)建立标签内容


            string sql = " SELECT * FROM worklog_notes where username='"+User.Identity.Name+"' ORDER BY id DESC ";
            DataSet ds = DBHelper.Instance.ExeDataSet(sql);
            StringBuilder sb = new StringBuilder();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                string[] position = dr["xyz"].ToString().Split(new char[] { 'x' });
                left = position[0];
                top = position[1];
                zindex = position[2];
                sb.Append("<div   class=\"note "+dr["color"]+ "\" style=\"left:"+left+"px; top:"+top+"px; z-index:"+zindex+"\">");
                sb.Append("<div class=\"delbtn\" noteid="+dr["id"].ToString()+">x</div>");
                sb.Append(dr["text"].ToString());
                sb.Append("<div class=\"author\">"+dr["name"].ToString()+"</div>");
             sb.Append("<span class=\"data\">"+dr["id"].ToString()+"</span>");
                sb.Append("</div>");
            }
            lbl_notes.Text = sb.ToString();
        

2)

删除时,处理是由ajax文件夹下的文件进行处理

    $('.delbtn').click(
   function() {
        $(this).parent().hide();
        $.get('ajax/delete.aspx', { id: $(this).attr('noteid')

       });

   }
)

具体的见源代码

http://files.cnblogs.com/mqingqing123/StickNotes.rar

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值