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"

      “关闭”按钮的文本

  • 相关阅读:
    LeetCode 326. Power of Three
    LeetCode 324. Wiggle Sort II
    LeetCode 322. Coin Change
    LeetCode 321. Create Maximum Number
    LeetCode 319. Bulb Switcher
    LeetCode 318. Maximum Product of Word Lengths
    LeetCode 310. Minimum Height Trees (DFS)
    个人站点大开发!--起始篇
    LeetCode 313. Super Ugly Number
    LeetCode 309. Best Time to Buy and Sell Stock with Cooldown (DP)
  • 原文地址:https://www.cnblogs.com/wifi/p/2244397.html
Copyright © 2011-2022 走看看