MVC3.0中使用JQuery的fancybox实现便签式留言板

我的广告单元，有空点一下哦，谢谢！

采用JQuery的fancybox实现便签留言板。

关于fancybox的介绍请参看：http://tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/

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

照旧先看效果图：

关于fancybox的使用，我已经全封装到文件夹中了，看如何使用呢？

1.首先下载文件夹

http://files.cnblogs.com/qidian10/fancybox.rar

2.解压，放到你的项目中，然后修改文件styles.css，jquery.fancybox-1.2.6.css，将里面的css图片路径换成你自己的路径

3.页面使用，新建一个cshtml页面，代码如下

@model IList < Model .customerheart >

@{
ViewBag.Title = "xxx";
Layout = "~/Views/Shared/_Layout.cshtml";
Random x = new Random(DateTime.Now.Millisecond);@*便签位置随机*@
}
@section head {
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" >

　　@*引用必要的库文件*@
< link rel ="stylesheet" type ="text/css" href ="/Content/fancybox/styles.css" />
< link rel ="stylesheet" type ="text/css" href ="/Content/fancybox/jquery.fancybox-1.2.6.css" media ="screen" />
　　<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>  

　　< script src ="/Scripts/jquery-ui.min.js" type ="text/javascript" ></ script >
< script type ="text/javascript" src ="/Content/fancybox/jquery.fancybox-1.2.6.pack.js" ></ script >
< script type ="text/javascript" src ="/Content/fancybox/script.js" charset ="uft-8" ></ script >
}

< div class ="submain" >
< div id ="main" >
< a id ="addButton" class ="green-button" href ="/Content/fancybox/add_note.html" > .我要评论. </ a >
@foreach (Model.customerheart msg in Model)
{
< div class ="note @msg.color" style ="left:@x.Next(5,800)px; top:@x.Next(5,550)px; z-index:@x.Next(0,10)" >
@msg.cheart
< div class ="author" > @msg.cname </ div >
</ div >
}
</ div >
</ div >

4.文件介绍

add_note.html：弹出层内容

script.js：所有的js操作（拖动），添加留言等

jquery.fancybox.*:fancybox固定库，一般不需要改动。