有用到一些插件，整理了一些笔记，分享一下。
一、Fancybox 很酷很强大的弹窗插件
官网地址：Fancybox,基于jquery,开源协议是GPL和MIT。
主要的特点是：能展示图片，html元素，SWF视频，Iframe和支持Ajax/ 支持轮播&滚轮播放/缩略图导航播放/自定义样式/弹窗效果也很不错。
见图： 左边的是轮播，中间是缩略图，右边的是按钮式的。
主要由4个js文件和3个csss文件，先不要被这两个数字吓到了，它是你需要什么样的效果就加什么样的文件，没用到的不必要加上去。
<!-- Jquery 库 --> <script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script> <!-- 滚轮插件 (可选的) --> <script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script> <!-- Add fancyBox main JS and CSS files --> <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script> <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" /> <!-- 按钮轮播(可选的) --> <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" /> <script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> <!-- 缩略图播放 (可选的) --> <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" /> <script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script> <!-- 可播放媒体 (可选的) --> <script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
Html 写法有两点注意。1个是要用a表情包裹img，是为了用href去加载图片，2个是要给a表情添加 data-fancybox-group 属性来选择什么样的效果。再和上面的js/css文件对应起来。
<a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="1_s.jpg" alt="" /></a> <a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="2_s.jpg" alt="" /></a> <!- 定义轮播--> <a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a> <a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>
<!- 定义按钮轮播-->
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>
<!- 定义缩略图轮播-->
<li><a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Youtube</a></li>
语法：
$('.fancybox').fancybox(); //最简单 默认配置
$('.fancybox').fancybox({
padding: 8,//定义边框宽度
openEffect: 'elastic',// 弹出效果，这个效果我最喜欢 很有弹性 比较好奇。
openSpeed: 150,
closeEffect: 'elastic',
closeSpeed: 150,
closeClick: true,//支持点击图片中间或者外围就关闭(点击靠左或者靠右的地方就导航)。
helpers: {
title: {
type: 'over'//还有inside，outside 感觉不一样哦。
}
}
});
还有很多可以定义的地方，大家可以参考demo中的源码。
插播视频：
<script src="Content/fancbox/source/helpers/jquery.fancybox-media.js"></script>
<li><a class="fancybox-media" href="http://player.youku.com/player.php/sid/XNjgyNzUyNDE2/v.swf">youku</a></li>
<!--a的href 必须是swf，如果是html，点击就直接跳转了。-->
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect: 'none',
closeEffect: 'none',
prevEffect: 'none',
nextEffect: 'none',
arrows: false,
helpers: {
media: {},
buttons: {}
}
});
二、ckeditor 功能很强大，配置有些蛋疼
官网：ckeditor
这个编辑器大名已久，不必多言，但因为在文当中插入图片需要CKfinder就觉得有些繁琐。（之前用kendoui中编辑器可以自己加入个上传的功能，或者加图片链接）而且Ckfinder是收费的。所以不知道各位有么有更好的选择。
1.引入js。
<script src="../ckeditor.js"></script> //真的没有加css <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea> //加一个ckeditor的class就行了，还有很多其他出现的方式，可以看demo
问题一：官方文档看了半天，不知道如何获取editor中的值，.val() .text() .txt() 都没效果，然后各种搜索。原来是这样
var val = CKEDITOR.instances.editor1.getData(); // editor1是你的实例名 对应textarea的id
官网demo很多用法就不一一介绍了，只说一下最简单能用的。
问题二、如何插入图片。
各路答案都指示需要CKFinder，当时就是不甘心再加那么个东西，而且要收费。改源码啊，上传的按钮就是不显示，改了filebrowBrowseUrl 最后按钮出来了，接上了自己的上传方法，结果没办法返回到编辑器中。⊙﹏⊙b汗 。试了各路好汉的办法还是不行，总是报错没有图片镜像地址！ 无奈，用CkFinder。废话不说了，附上一个可以用的ckfinder.dll。（它也是支持自定义然后编译生成dll的）
Ckeditor&ckfinder&dll ckfinder和ckeditor传说要在同一级目录下。
1.先引用dll，然后在ckeditor的同级目录下加入ckfinder。
var ckfinderPath = "../Content"; //注意这个地方的问题，JS是包含CKEditor和CKFinder的文件夹 位置要对。 //config.filebrowserBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html'; // config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?type=Images'; // config.filebrowserFlashBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?type=Flash'; // config.filebrowserUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; config.filebrowserImageUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; // config.filebrowserFlashUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
各种上传地址处理，我只要一个先。然后上传按钮出来了，喜大普奔。
文件实际上传是在根目录下，要显示隐藏文件才能看。
话说Ckfinder那个图片管理的功能确实不错，但需要破解或者购买。另外，如果引发HttpRequestvalidationException ，.net4.0 需要配置web.config
文档比较长，选择用post提交的话和mvc中有些不一样。 当然你也可以用form提交。
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
// ....
var content = CKEDITOR.instances.editor1.getData().toString();
$.post("AjaxServer.ashx?serverType=updateintroduce", {introduce:content}, function (data) { if (data == 1) { infoShow("保存成功",1); } });
var content = context.Request.Form["introduce"];//后台获取的时候 from的name不是 textarea的name，而是你自定义。
之前在Asp.net中写Post把参数都是 放在Url中的，⊙﹏⊙b汗。 字符很多的时候放在url是很不合适的，get的url长度是有限制的。
三、jscrollpane.js 修改滚动条样式。
这个园友们可能觉得有点费周章了，因为这个引入的js文件和要达到的效果确实“性价比”不高啊。但效果确实是好，所以就拿来了。因为原生的滚动条白白的背景有的时候很影响页面的感觉。
网上有个比较好的demo：自动隐藏的滚动条 但js文件一大堆。 背后是依赖于jscrollpane.js 原理就是用js模拟了滚动条。
官网上有些一些demo，但感觉调的都不怎么好看。
引入文件：
<script src="Content/jscrollpane/jquery.jscrollpane.min.js"></script> <script src="Content/jscrollpane/jquery.mousewheel.js"></script> <script src="Content/jscrollpane/mwheelIntent.js"></script> <link href="Content/jscrollpane/jquery.jscrollpane.css" rel="stylesheet" />
js 调用
$('.Aboutus').jScrollPane();//就这一个语法。 对应的html元素需要overflow：auto。
主题的话还是自己直接修改jquery.jscrollpane.css 这个文件吧。 立竿见影。
.jspTrack { background: #80808d; position: relative; width: 10px; } .jspDrag { background:#ccc; position: relative; top: 0; left: 0; width: 10px; cursor: pointer; } .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; } .jspArrow { background: #50506d; text-indent: -20000px; display: block; cursor: pointer; padding: 0; margin: 0; }
我只是调细调暗一点，没有多漂亮，就不show出来了。
-------------------------------------------------------------分割线-----------------------------------------------------------------------
特此分享，以飨园友。