jquery弹出层插件jquery.ColorBox.js学习
生活随笔
收集整理的這篇文章主要介紹了
jquery弹出层插件jquery.ColorBox.js学习
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
- 第一、簡介
- 第二、上個簡單的例子
- 第三、基本使用
- 3.1單張圖片
- 3.2組相冊圖片
- 3.3 彈出效果
- 3.4 顯示html
- 1.以獨立html文件格式組織
- 2.以內部html元素組織
- 3.網頁iframe
- 4.直接寫html元素
- 3.5回調函數
- 第四、屬性配置
- 1.基本屬性
- 2.Content Type
- 3.Dimensions
- 4.Slideshow
- 5.位置
- 6.元素上的回調函數
- 7.公共方法
- 8.公共事件
- 第五。總結
第一、簡介
ColorBox可以播放單張圖片，組圖片，視頻，打開新html，內嵌iframe，甚至html標簽等，注意它是彈出層插件，不是用于基本頁面展示的。而且一次只能彈出一個，新彈框復用以前的彈框，彈出層再彈出層是沒有的。
官方的例子提供了5種風格樣式，引入不同的css頁面展示不同的效果。ColorBox有豐富的參數配置，及其簡單的調用方法。
這些配置以及js文件,5種風格樣式css都可以在源碼里拿到，其中jquery不要求版本，當然最好是最新的。
官網
gitHub上源碼
效果展示
第二、上個簡單的例子
<!DOCTYPE html> <html><head><meta charset='utf-8'/><title>Colorbox Examples</title><link rel="stylesheet" href="colorbox.css" /><script type="text/javascript" src="../jquery-1.9.1.min.js"></script><script type="text/javascript" src="../jquery.colorbox.js"></script><script type="text/javascript">$(document).ready(function(){$("#single").colorbox({transition: "fade"});});</script></head><body><a class="group1" id="single" href="../content/ohoopee1.jpg" title="展示">Grouped Photo 11</a> </body> </html>前面的引入js和css文件就不必說了，下面有詳細介紹，我們關注的是a超鏈接，指定的超鏈接的彈出圖片，然后在script腳本文件里使用colorbox插件初始化一下$("#single").colorbox({transition: "fade"});即可使用插件的效果彈出圖片了，是不是很簡單。
第三、基本使用
引入2個js文件jquery.colorbox.js和jquery.js。當然生成環境要使用壓縮版的jquery.colorbox.min.js和jquery.min.js
引入1個css文件colorbox.css，注意引入不同皮膚的css文件將實現不同的皮膚。5種風格樣式在源碼例子里。
使用語法
$(selector).colorbox({key:value, key:value, key:value});3.1單張圖片
單張圖片直接使用colorbox()方法即可，也可使用些參數，如下：
<script type="text/javascript">$(document).ready(function(){//Examples of how to assign the Colorbox event to elements//$(".group1").colorbox({rel:'group1'});$("#single").colorbox({transition: "fade"});}); </script> <body><a class="group1" id="single" href="../content/ohoopee1.jpg" title="展示">Grouped Photo 11</a> </body>3.2組相冊圖片
使用colorbox的rel參數可以圖片作為colorbox的相冊。rel指定的對象（class）即可做為相冊圖片。
$(".group1").colorbox({rel: 'group1'});3.3 彈出效果
圖片彈出的效果，設置colorbox方法的參數
1.Fade Transition淡入淡出
2.滑動效果
$(".group4").colorbox({rel: 'group4', slideshow: true});3.無效果，指定彈出圖片寬高
無過渡效果并且固定寬高（75%的顯示屏尺寸）
3.4 顯示html
1.以獨立html文件格式組織
比如testOutHtml.html
<div id='homer' style="background:url(../content/homer.jpg) right center no-repeat #ececec; height:135px; width:280px; padding:30px 10px;"><strong>Homer</strong><br/><em>\noun\</em><br/><strong>1.</strong> American bonehead<br/><strong>2. Pull a Homer-</strong><br/>to succeed despite<br/>idiocy </div> <script>$('#homer strong').css({color:'red'}); </script>使用colorBox調用方式如下：
$(".testOutHtml").colorbox(); <p><a class='testOutHtml' href="testOutHtml.html" title="Homer Defined">外部html</a></p>2.以內部html元素組織
比如html里有如下html元素
<div style='display:none'><div id='inline_content' style='padding:10px; background:#fff;'><p><strong>This content comes from a hidden element on this page.</strong></p><p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p><p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p><p><strong>If you try to open a new Colorbox while it is already open, it will update itself with the new content.</strong></p><p>Updating Content Example:<br /><a class="ajax" href="../content/ajax.html">Click here to load new content</a></p></div> </div>調用方式如下：
$(".inline").colorbox({inline:true, width:"50%"}); //指定具體寬度$(".inline").colorbox({inline:true, innerWidth:640, innerHeight:390}); <p><a class='inline' href="#inline_content">Inline HTML</a></p>3.網頁iframe
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); <p><a class='iframe' href="http://www.baidu.com">網頁iframe</a></p>4.直接寫html元素
$("#single").colorbox({html:"<h3>Welcome</h3>"}); //$.colorbox({html:"<h3>Welcome</h3>"});//直接使用公開方法$.colorbox3.5回調函數
$(".callbacksA").colorbox({onOpen:function(){ alert('onOpen: colorbox is about to open'); },onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },onClosed:function(){ alert('onClosed: colorbox has completely closed'); } }); <a class='callbacksA' href="../content/marylou.jpg" title="測試回調函數">測試回調函數</a>.第四、屬性配置
下面介紹屬性配置，更詳細的可去官文上看。
1.基本屬性
| transition | elastic | 過渡型。可以設置為“elastic”，“fade”，或“none”。 |
| speed | 350 | 效果切換速度，以毫秒為單位。 |
| href | false | 這可以被用來作為一種替代錨URL或聯想到的URL非錨的元素，如圖片或表格按鈕。$（“H1”.colorbox（的HREF）{ }”的民族性與地域性：”）； |
| title | false | 這可以作為一個錨定的方式－。 |
| rel | false | 這可以作為一個錨REL的替代方式。這允許用戶在一個畫廊集團任何元素的組合，或改變現有的關系所以元素不歸。 |
| scalePhotos | true | 如果是真的，如果最大，最大高度，innerwidth，innerheight，寬度或高度已經確定，ColorBox會規模的照片符合這些價值觀。 |
| scrolling | true | 如果為false，ColorBox將隱藏溢出內容滾動條。這可以用于與調整相結合的方法（見下文）為一個平穩的過渡，如果你添加內容到方式已經打開的一個實例。 |
| opacity | 0.85 | 疊加的不透明度。范圍：0到1。 |
| open | false | 如果屬實，將立即打開方式。 |
| loop | true | 如果為假，將禁用環回組開始時的最后一個元素的能力。 |
| arrowKey | true | 如果為假，將禁用左、右方向鍵從組中的項目之間導航。 |
| escKey | true | 如果為假，將禁用“ESC”鍵關閉方式 |
| fadeOut | 300 | 毫秒淡出速度，集，當關閉方式。 |
| closeButton | true | 設置為false將關閉按鈕。 |
2.Content Type
| iframe | false | 如果是真的，指定的內容應在iframe中顯示。如果是真的，從當前文檔的內容可以通過href屬性jQuery選擇器顯示jQuery對象 |
| inline | false | 使用A /選擇器：$（“#內聯”.colorbox（）{內嵌鏈接：威脅：“# myform”}）； |
| html | For displaying a string of HTML or text: $.colorbox({html:”Hello”}); |
3.Dimensions
| width | 設定一個固定的總寬度。這包括邊框和按鈕。例如：“100%”、“500px”，或500 | |
| height | 設定一個固定的總高度。這包括邊框和按鈕。例如：“100%”、“500px”，或500 | |
| innerWidth | 這是一個替代“寬度”用來設置一個固定的內部寬度。這不包括邊框和按鈕。例如：“50%”、“500px”，或500 | |
| innerHeight | 這是另一種“高度”用來設置一個固定的內部高度。這不包括邊框和按鈕。例如：“50%”、“500px”，或500 | |
| initialWidth | 300 | 設置初始寬度，正在加載任何內容之前。 |
| initialHeight | 100 | 設置初始高度，正在加載任何內容之前。 |
| maxWidth | 設置內容的最大寬度。例如：“100%”，500，“500px” | |
| maxHeight | 設置內容的最大高度。例如：“100%”，500，“500px” |
4.Slideshow
| slideshow | false | 如果是真的，增加了一個自動的幻燈片內容組/畫廊。 |
| slideshowSpeed | 2500 | 設置幻燈片的速度，以毫秒為單位。 |
| slideshowAuto | true | 如果是真的，幻燈片將自動開始播放。 |
| slideshowStart | “start slideshow” | 為幻燈片開始按鈕文字。 |
| slideshowStop | “stop slideshow” | 停止自動滑動按鈕的文本 |
5.位置
| fixed | false | 如果是真的，顏色框將顯示在一個固定的位置，在游客的視口。這是不同于默認的絕對定位相對于文檔。 |
| top | false | 接受一個像素或百分比值（50，“50px”、“10%”）。而不是使用被集中在視口的默認位置控制方式的垂直定位。 |
| bottom | false | 接受一個像素或百分比值（50，“50px”、“10%”）。而不是使用被集中在視口的默認位置控制方式的垂直定位。 |
| left | false | 接受一個像素或百分比值（50，“50px”、“10%”）。控制方式的水平定位而不是使用被集中在視口的默認位置。 |
| right | false | 接受一個像素或百分比值（50，“50px”、“10%”）。控制方式的水平定位而不是使用被集中在視口的默認位置。 |
| reposition | true | 復位方式如果窗口的Resize事件觸發。 |
6.元素上的回調函數
| onOpen | 彈出層剛打開前 |
| onLoad | 在試圖加載目標內容前 |
| onComplete | 目標內容加載完成 |
| onCleanup | 在關閉ue |
| onClosed | 關閉觸發 |
使用方法，在綁定的元素上操作
$(".callbacks").colorbox({onOpen:function(){ alert('onOpen: colorbox is about to open'); },onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },onClosed:function(){ alert('onClosed: colorbox has completely closed'); }});7.公共方法
| $.colorbox() | 可以在不綁定到某個元素的情況下直接調用，如$.colorbox({href:’../content/ajax.html’});但注意，測試必需在tomcat等服務器上測試，本地測試會報“Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.”錯誤，即不支付使用“file://…方式加載網頁” |
| $.colorbox.next(), $.colorbox.prev() | 相當于下一頁，上一頁功能 |
| $.colorbox.element() | 獲取前的HTML元素。返回一個包含元素的jQuery對象。var element=element=.colorbox.element(); |
| $.colorbox.resize() | 重新渲染 |
| $.colorbox.remove() | 刪除colorbox的痕跡，不同于$.colorbox.close(} |
使用方法：直接調用
8.公共事件
| cbox_open | 目標對象剛打開前 |
| cbox_load | 目標對象剛加載 |
| cbox_complete | 目標對象已經渲染完成 |
| cbox_cleanup | close方法調用之前 |
| cbox_closed | close方法調用之后 |
使用方法
$(document).bind('cbox_complete', function(){setTimeout($.colorbox.next, 1500); });第五。總結
引入正確的js和css文件，定位好元素屬性，使用colorBox初始化即可。這里要注意，有些成熟的框架引入了colorbox彈出層，它會對colorbox樣式做修改，如果你引入colorbox到某個成熟的大框架，發現彈出和效果和例子效果不一樣，多半是框架修改了colorbox.css樣式。
總結
以上是生活随笔為你收集整理的jquery弹出层插件jquery.ColorBox.js学习的全部內容，希望文章能夠幫你解決所遇到的問題。
