[转载]ASP.NET MVC3.0中使用JQuery的fancybox实现便签式留言板

baacloud免费翻墙vpn注册使用

[转载]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固定库,一般不需要改动。

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏