軟件簡介

ColorBox是一個基于 jQuery

的輕量級，自定義燈箱插件，功能非常強大，支持圖片，圖片組，ajax，inline和iframed內容，燈箱樣式完全由用戶控制，可自定義CSS樣

式，不需要改寫ColorBox庫文件就能重寫展示效果設置，支持加載預處理提示等等，效果圖如下：

使用說明

1，jQuery 1.3庫文件

2，colorbox 庫文件

3，燈箱效果CSS樣式文件

使用實例如下：

一，使用ColorBox燈箱顯示一張圖片和圖片組

(1)js部分

$.fn.colorbox.settings. transition = “fade”;

$.fn.colorbox.settings. bgOpacity = “0.9”;

$.fn.colorbox.settings. contentCurrent = “image { current } of {

total }”;

$(“. cpModal “). colorbox ();

transition 設置ColorBox燈箱的過渡效果，如上：fade

bgOpacity 設置ColorBox燈箱的背景透明度，如上：0.9

contentCurrent 設置ColorBox燈箱的當前圖片，如上：image {current} of {total}

(2)HTML部分

二，使用ColorBox燈箱顯示ajax加載HTML頁面

(1)js部分

$(“#ajax”). colorbox ({ contentWidth :”300px”, contentHeight

:”195px”});

contentWidth 設置ColorBox燈箱的內容寬度，如上：300px

contentHeight 設置ColorBox燈箱的內容高度，如上：195px

(2)HTML部分ajax.html 表示加載的html頁面，

三，使用ColorBox燈箱顯示flash頁面效果

(1)js部分

$(“# flash “). colorbox ({ contentAjax :” flash.html “});

(2)HTML部分

四，使用ColorBox燈箱顯示Inline HTML效果

(1)js部分

$(“# inline “).colorbox({ contentWidth :”500px”, contentInline

:”#inline-content”});

contentInline 設置ColorBox燈箱的inline內容

(2)HTML部分五，使用ColorBox燈箱顯示Iframed框架內容效果

(1)js部分

$(“# google “).colorbox({ contentWidth :”750px”, contentHeight

:”450px”, contentIframe:true});

contentIframe 設置ColorBox燈箱的內容是否為框架

(2)HTML部分

ColorBox燈箱配置如下：

transition ‘elastic’ 表示燈箱過渡效果，可選”elastic” or “fade”

transitionSpeed 350 表示燈箱過渡效果展示的速度

initialWidth 300 表示燈箱初始化寬度

initialHeight 100 表示燈箱初始化高度

contentWidth false 表示是否設置一個固定的寬度

contentHeight false 表示是否設置一個固定的高度

contentAjax false 表示是否是一個ajax加載

contentInline false 表示是否是一個inline

contentIframe false 表示是否是一個iframe

bgOpacity 0.85 表示燈箱的背景透明度

preloading true 表示是否預加載

contentCurrent ‘{current} of {total}’ 表示燈箱展示的當前圖片和總數

contentPrevious ‘previous’ 表示上一個錨，類似于rel屬性

contentNext ‘next’ 表示下一個錨，類似于rel屬性

modalClose ‘close’ 錨文本關閉鏈接，可選Esc或close

jQuery插件ColorBox彩盒使用非常簡單，可實現功能非常多，如彈出新窗口，彈出圖片，彈出框架等等，值得推薦。

總結

以上是生活随笔為你收集整理的colorbox加载ajax调用的html页面,ColorBox的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。