Mikel
[转载]MVC3.0中使用JQuery的fancybox实现便签式留言板 – jackchain – 博客园.
采用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固定库，一般不需要改动。
