代码改变世界

fancybox,Ckeditor,jscrollpane 笔记串烧

2014-03-07 08:11  stoneniqiu  阅读(1857)  评论(2)  编辑  收藏  举报

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

一、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模拟了滚动条。

 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 这个文件吧。 立竿见影。 

.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出来了。

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

 

 特此分享，以飨园友。