日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問(wèn) 生活随笔!

生活随笔

當(dāng)前位置: 首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

colorbox去除close关闭按钮,附上colorbox的基本使用方法

發(fā)布時(shí)間:2023/12/18 编程问答 35 豆豆
生活随笔 收集整理的這篇文章主要介紹了 colorbox去除close关闭按钮,附上colorbox的基本使用方法 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

要去除colorbox的關(guān)閉按鈕,網(wǎng)上找了好多資料,都沒(méi)找到其中用設(shè)置close參數(shù)的方式來(lái)解決,有找到的麻煩告訴我聲,然后只好在onload事件中將這按鈕remove或者h(yuǎn)ide()掉,代碼如下:?

?$('selector').colorbox({onLoad:function(){

? ? $('#cboxClose').remove();
}});

?

$(".class_name").colorbox({innerWidth:500, innerHeight:400, iframe:true, escKey:false, overlayClose:false,onLoad: function() {
? ? $
('#cboxClose').remove();

}});?

?

?

另附上colorbox的使用方法:

?

ColorBox是一個(gè)基于jQuery 1.3 的輕量級(jí),自定義燈箱插件,功能非常強(qiáng)大,支持圖片,圖片組,ajax,inline和iframed內(nèi)容,燈箱樣式完全由用戶(hù)控制,可自定義CSS樣 式,不需要改寫(xiě)ColorBox庫(kù)文件就能重寫(xiě)展示效果設(shè)置,支持加載預(yù)處理提示等等,效果圖如下:

使用說(shuō)明
1,jQuery 1.3庫(kù)文件
2,colorbox 庫(kù)文件
3,燈箱效果CSS樣式文件

使用實(shí)例如下:
一,使用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設(shè)置ColorBox燈箱的過(guò)渡效果,如上:fade
bgOpacity設(shè)置ColorBox燈箱的背景透明度,如上:0.9
contentCurrent設(shè)置ColorBox燈箱的當(dāng)前圖片,如上:image {current} of {total}

(2)HTML部分
<p><a class="cpModal" href="marylou.jpg" >單張圖片</a></p>
<p><a class="cpModal" href="biuuu1.jpg" >圖片組1</a></p>
<p><a class="cpModal" href="biuuu2.jpg" >圖片組2</a></p>
<p><a class="cpModal" href="biuuu3.jpg" >圖片組3</a></p>

二,使用ColorBox燈箱顯示ajax加載HTML頁(yè)面
(1)js部分
$("#ajax").colorbox({contentWidth:"300px",?contentHeight:"195px"});

contentWidth設(shè)置ColorBox燈箱的內(nèi)容寬度,如上:300px
contentHeight設(shè)置ColorBox燈箱的內(nèi)容高度,如上:195px

(2)HTML部分
<p><a id="ajax" href="ajax.html">Ajax HTML</a></p>
ajax.html表示加載的html頁(yè)面,

三,使用ColorBox燈箱顯示flash頁(yè)面效果
(1)js部分
$("#flash").colorbox({contentAjax:"flash.html"});

(2)HTML部分

<p><a id="flash" href="http://www.youtube.com/watch?v=lBvaHZIrt0">Flash / Video</a></p>
四,使用ColorBox燈箱顯示Inline HTML效果

(1)js部分
$("#inline").colorbox({contentWidth:"500px",?contentInline:"#inline-content"});
contentInline設(shè)置ColorBox燈箱的inline內(nèi)容

(2)HTML部分
<p><a id="inline" href="#">Inline HTML</a></p>
<div style="display:none">
<div id="inline-content">
<div style="padding:10px">
<p>必優(yōu)博客</p>
<p>www.biuuu.com</p>
</div>
</div>
</div>
五,使用ColorBox燈箱顯示Iframed框架內(nèi)容效果
(1)js部分
$("#google").colorbox({contentWidth:"750px",?contentHeight:"450px", contentIframe:true});

contentIframe設(shè)置ColorBox燈箱的內(nèi)容是否為框架

(2)HTML部分
<p><a id="google" href="http://www.google.com">Iframed內(nèi)容</a></p>

ColorBox燈箱配置如下:
transition?'elastic' 表示燈箱過(guò)渡效果,可選"elastic" or "fade"
transitionSpeed??? 350 表示燈箱過(guò)渡效果展示的速度
initialWidth??? 300 表示燈箱初始化寬度
initialHeight??? 100 表示燈箱初始化高度
contentWidth??? false 表示是否設(shè)置一個(gè)固定的寬度
contentHeight??? false 表示是否設(shè)置一個(gè)固定的高度
contentAjax??? false 表示是否是一個(gè)ajax加載
contentInline??? false 表示是否是一個(gè)inline
contentIframe??? false 表示是否是一個(gè)iframe
bgOpacity?0.85 表示燈箱的背景透明度
preloading??? true 表示是否預(yù)加載
contentCurrent??? '{current} of {total}' 表示燈箱展示的當(dāng)前圖片和總數(shù)
contentPrevious??? 'previous' 表示上一個(gè)錨,類(lèi)似于rel屬性
contentNext??? 'next'??? 表示下一個(gè)錨,類(lèi)似于rel屬性
modalClose??? 'close' 錨文本關(guān)閉鏈接,可選Esc或close

jQuery插件ColorBox彩盒使用非常簡(jiǎn)單,可實(shí)現(xiàn)功能非常多,如彈出新窗口,彈出圖片,彈出框架等等,值得推薦。

介紹內(nèi)容來(lái)自 http://www.biuuu.com/

設(shè)置的值

?

默認(rèn)值

transition

"elastic"

過(guò)渡效果,可以是"elastic", "fade", or "none".

speed

350

設(shè)置過(guò)渡效果的持續(xù)時(shí)間,毫秒

hreffalse

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

這個(gè)用來(lái)設(shè)置一個(gè)錨標(biāo)記的值或者一個(gè)不是錨的元素,例如圖像或者表單的按鈕,例如:

titlefalse

這可以為Colorbox設(shè)置一個(gè)標(biāo)題

relfalse

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

這個(gè)可以根據(jù)元素的rel屬性設(shè)置要顯示的元素集合,也可以覆蓋一個(gè)存在的rel屬性

widthfalse

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

設(shè)置寬度,包括邊框和按鈕

heightfalse

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

設(shè)置高度,包括邊框和按鈕

innerWidthfalse

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

這個(gè)可以設(shè)定一個(gè)固定的內(nèi)大小,包括邊框和按鈕

innerHeightfalse

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

這個(gè)可以設(shè)定一個(gè)固定的內(nèi)高度,包括邊框和按鈕

initialWidth300

設(shè)置初始化寬度

initialHeight100

設(shè)置初始化高度

maxWidthfalse

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

設(shè)置內(nèi)容的最大寬度

maxHeightfalse

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

設(shè)置內(nèi)容的最大高度

scalePhotostrue

如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被設(shè)置,

Colorbox會(huì)縮放圖片以使用邊框

scrollingtrue

如果是false,Colorbox不會(huì)為了溢出元素設(shè)置滾動(dòng)條

iframefalse

如果是true,元素會(huì)在Iframe中顯示

?

?

介紹

inlinefalse

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

如果是true,jQuery選擇器可以用來(lái)選擇要顯示的元素。例如:

htmlfalse

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

Hello

'});

這個(gè)是直接讓你顯示HTML代碼,例

photofalse

如果為true,ColorBox只會(huì)把元素按照?qǐng)D片顯示,防止類(lèi)似photo.php?pic=1這樣的連接被誤認(rèn)為是網(wǎng)頁(yè)

opacity0.85

遮罩層不透明度 從0-1之間取值

openfalse

如果為true,ColorBox會(huì)自動(dòng)開(kāi)啟

preloadingtrue

如果為T(mén)rue,ColorBox會(huì)自動(dòng)預(yù)載要顯示圖片

overlayClosetrue

為true單擊遮罩層就可以把ColorBox關(guān)閉

slideshowfalse

為T(mén)rue,會(huì)自動(dòng)滾動(dòng)圖片

slideshowSpeed2500

設(shè)置時(shí)間,毫秒

slideshowAutotrue

為tuue,滑動(dòng)會(huì)自動(dòng)開(kāi)始

slideshowStart"start slideshow"

開(kāi)始自動(dòng)滑動(dòng)按鈕的文本

slideshowStop"stop slideshow"

停止自動(dòng)滑動(dòng)按鈕的文本

current"{current} of {total}"

文本內(nèi)容:現(xiàn)在正在顯示的元素序號(hào)

previous"previous"

“上一個(gè)”按鈕的文本

next"next"

“下一個(gè)”按鈕的文本

close"close"

“關(guān)閉”按鈕的文本

轉(zhuǎn)載于:https://www.cnblogs.com/zhiji6/archive/2012/05/08/2489555.html

總結(jié)

以上是生活随笔為你收集整理的colorbox去除close关闭按钮,附上colorbox的基本使用方法的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。