使用.NET和Jquery打造简单的便签纸
本文根据 http://tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/ 编写,并增加了删除功能
演示: http://demo.tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/demo.php
主要代码是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')
});
}
)
具体的见源代码