fancybox,Ckeditor,jscrollpane 笔记串烧

       有用到一些插件,整理了一些笔记,分享一下。

一、Fancybox 很酷很强大的弹窗插件

     官网地址:Fancybox,基于jquery,开源协议是GPL和MIT。

     主要的特点是:能展示图片,html元素,SWF视频,Iframe和支持Ajax/ 支持轮播&滚轮播放/缩略图导航播放/自定义样式/弹窗效果也很不错。

     见图: 左边的是轮播,中间是缩略图,右边的是按钮式的。

     fancybox,Ckeditor,jscrollpane 笔记串烧    fancybox,Ckeditor,jscrollpane 笔记串烧  fancybox,Ckeditor,jscrollpane 笔记串烧

    主要由4个js文件和3个csss文件,先不要被这两个数字吓到了,它是你需要什么样的效果就加什么样的文件,没用到的不必要加上去。

fancybox,Ckeditor,jscrollpane 笔记串烧
   <!-- 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>
fancybox,Ckeditor,jscrollpane 笔记串烧

  Html 写法有两点注意。1个是要用a表情包裹img,是为了用href去加载图片,2个是要给a表情添加 data-fancybox-group 属性来选择什么样的效果。再和上面的js/css文件对应起来。

fancybox,Ckeditor,jscrollpane 笔记串烧
<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,Ckeditor,jscrollpane 笔记串烧

 语法:

fancybox,Ckeditor,jscrollpane 笔记串烧
$(‘.fancybox‘).fancybox(); //最简单 默认配置

$(‘.fancybox‘).fancybox({
padding: 8,//定义边框宽度
openEffect: ‘elastic‘,// 弹出效果,这个效果我最喜欢 很有弹性 比较好奇。
openSpeed: 150, 
closeEffect: ‘elastic‘,
closeSpeed: 150,
closeClick: true,//支持点击图片中间或者外围就关闭(点击靠左或者靠右的地方就导航)。
helpers: {
title: {
type: ‘over‘//还有inside,outside 感觉不一样哦。
}
}
});
fancybox,Ckeditor,jscrollpane 笔记串烧

 还有很多可以定义的地方,大家可以参考demo中的源码。

二、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。

fancybox,Ckeditor,jscrollpane 笔记串烧
  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‘;
fancybox,Ckeditor,jscrollpane 笔记串烧

 各种上传地址处理,我只要一个先。然后上传按钮出来了,喜大普奔。

 fancybox,Ckeditor,jscrollpane 笔记串烧

 文件实际上传是在根目录下,要显示隐藏文件才能看。

fancybox,Ckeditor,jscrollpane 笔记串烧

话说Ckfinder那个图片管理的功能确实不错,但需要破解或者购买。另外,如果引发HttpRequestvalidationException ,.net4.0 需要配置web.config

fancybox,Ckeditor,jscrollpane 笔记串烧

文档比较长,选择用post提交的话和mvc中有些不一样。 当然你也可以用form提交。

fancybox,Ckeditor,jscrollpane 笔记串烧
 <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); } });
fancybox,Ckeditor,jscrollpane 笔记串烧
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模拟了滚动条。

 jscrollpane官网

 官网上有些一些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 这个文件吧。 立竿见影。 

fancybox,Ckeditor,jscrollpane 笔记串烧
.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;
}
fancybox,Ckeditor,jscrollpane 笔记串烧

我只是调细调暗一点,没有多漂亮,就不show出来了。

 -------------------------------------------------------------分割线----------------------------------------------------------------------- 

 要找工作了,第一次离职ing中.....  

 特此分享,以飨园友。

 

 

 

fancybox,Ckeditor,jscrollpane 笔记串烧,布布扣,bubuko.com

fancybox,Ckeditor,jscrollpane 笔记串烧

上一篇:高并发大型网站架构设计


下一篇:NetAddr