zoukankan      html  css  js  c++  java
  • jQuery的弹出窗口插件colorbox

    官方网站:http://colorpowered.com/colorbox/

     DEmo:http://jacklmoore.com/colorbox/example1/

    • 支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架。
    • 通过CSS 控制外观,使用用户可以很容易重新定制外观。
    • 不需要更改 ColorBox 的 javascript 文件就可以重新设定其行为。
    • 可以依靠 callback & event-hooks 进行拓展,不需要修改源代码。
    • 非常友好,不需要修改现有的 HTML,所有的选项都通过 JS 设置。

      介绍

      colorbox()函数使用一堆key/value对象和一个可选的callback函数

      格式:$('selector').colorbox({key:value}, callback);

      例子: $('a.gallery').colorbox({transition:'fade', speed:500});

      还是例子:$('button').colorbox({href:"thankyou.html"});

      设置的值

      默认值

      介绍

      transition

      "elastic"

      过渡效果,可以是"elastic", "fade", or "none".

      speed

      350

      设置过渡效果的持续时间,毫秒

      href false

      Example:$('h1').colorbox({href:"welcome.html"})

      这个用来设置一个锚标记的值或者一个不是锚的元素,例如图像或者表单的按钮,例如:

      title false

      这可以为Colorbox设置一个标题

      rel false

      Example:$('#example a').colorbox({rel:'group1'})

      这个可以根据元素的rel属性设置要显示的元素集合,也可以覆盖一个存在的rel属性

      width false

      Example: "100%", "500px", or 500

      设置宽度,包括边框和按钮

      height false

       Example: "100%", "500px", or 500

      设置高度,包括边框和按钮

      innerWidth false

      Example: "50%", "500px", or 500

      这个可以设定一个固定的内大小,包括边框和按钮

      innerHeight false

      Example: "50%", "500px", or 500

      这个可以设定一个固定的内高度,包括边框和按钮

      initialWidth 300

      设置初始化宽度

      initialHeight 100

      设置初始化高度

      maxWidth false

       Example: "100%", 500, "500px"

      设置内容的最大宽度

      maxHeight false

      Example: "100%", 500, "500px"

      设置内容的最大高度

      scalePhotos true

      如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被设置,

      Colorbox会缩放图片以使用边框

      scrolling true

      如果是false,Colorbox不会为了溢出元素设置滚动条

      iframe false

      如果是true,元素会在Iframe中显示

      inline false

      Example: $("#inline").colorbox({inline:true, href:"#myForm"});

      如果是true,jQuery选择器可以用来选择要显示的元素。例如:

      html false

      Example:
      $.fn.colorbox({html:'

      Hello

      '});

      这个是直接让你显示HTML代码,例

      photo false

      如果为true,ColorBox只会把元素按照图片显示,防止类似photo.php?pic=1这样的连接被误认为是网页

      opacity 0.85

      遮罩层不透明度 从0-1之间取值

      open false

      如果为true,ColorBox会自动开启

      preloading true

      如果为True,ColorBox会自动预载要显示图片

      overlayClose true

      为true单击遮罩层就可以把ColorBox关闭

      slideshow false

      为True,会自动滚动图片

      slideshowSpeed 2500

      设置时间,毫秒

      slideshowAuto true

      为tuue,滑动会自动开始

      slideshowStart "start slideshow"

      开始自动滑动按钮的文本

      slideshowStop "stop slideshow"

      停止自动滑动按钮的文本

      current "{current} of {total}"

      文本内容:现在正在显示的元素序号

      previous "previous"

      “上一个”按钮的文本

      next "next"

      “下一个”按钮的文本

      close "close"

      “关闭”按钮的文本

  • 相关阅读:
    asp.net将图片转成二进制存入数据库
    ionic2打包生成APK报错 Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK. Looked here: D:AndroidSDK ools emplatesgradlewrapper
    'ionic' 不是内部或外部命令,也不是可运行的程序或批处理文件。
    ABP-vs2017执行Add-Migration出现的问题
    关闭页面时,弹出JS提示框提示是否关闭
    C#生成Bar Code Image
    MemoryStream转imageSource
    RadControls RadGridView 显示加载数据时间
    RadGridView 分页控件
    CRM2011弹出asp.net模态窗口关闭的问题
  • 原文地址:https://www.cnblogs.com/wifi/p/2244397.html
Copyright © 2011-2022 走看看