angularjs兼容thickbox 插件

 ThickBox是一個基於JQuery類庫的擴展，它能在瀏覽器界面上顯示很是棒的UI框， 它能夠顯示單圖片，多圖片，ajax請求內容或連接內容.ThickBox 是用超輕量級的 jQuery 庫 編寫的. 壓縮過 jQuery 庫只15k, 未壓縮過的有39k。

做爲彈出iframe界面，很是清爽。

angularjs自己的UI展現效果有限，jquery的ui加強的插件卻不少，如thickbox,icheck等。

通常來講，會出現兼容的問題，由於angularjs渲染頁面，不少時候在jquery插件以後。全部會出現沒有效果的問題。

解決辦法，當插件使用的是class的時候，那就使用ng-class爲這些插件統一賦值，而後從小綁定。

thickbox 這個iframe插件，要實現效果，html標籤必須添加 class thickbox這個插件，但使用angularjs 由於加載時間問題不一樣會出現失去效果的問題。解決辦法是將.thickbox這個樣式，使用ng-class實現，在全部angularjs使用完，添加   tb_init('.thickbox');

 

 

注意，在加載的時候有loading動態圖片，須要本身定義

 

 

 

thickbox使用說明

thickbox是jQuery的一個插件，其做用是彈出對話框、網頁框，使用戶體驗度更加愉悅，下面就來簡單介紹它的幾種用法。
聲明一下：這只是我的的總結記載而已。
準備工做：你須要三個文件：thickbox.js、thickbox.css、jquery.js，網上處處可下

具體使用：

第一步：將這三個文件引入到你要使用thickbox的頁面

 

 

<script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="thickbox.js"></script>
    <link rel="stylesheet" href="thickbox.css" type="text/css" />

 

第二步：通常簡單使用就是給<a>標籤和Button添加樣式：class=thickbox
還有就是經過thickbox函數調用：如tb_init()、tb_show()；見下文。

幾種不一樣用法：

1.點擊顯示圖片：

 <a href="001.jpg" class="thickbox"><img src="001.jpg"/></a>
ok,就這樣搞定
2.點擊按鈕或連接：

 

 

<input alt="#TB_inline?height=300&width=400&inlineId=div1" title="shawnliu" class="thickbox" type="button" value="Show" />   
   <a href="#TB_inline?height=155&width=300&inlineId=div2&modal=true" class="thickbox">Show hidden modal content.</a>
   
   <div id="div1" style="display:none">
   <P>
     這是一個非模式對話框。
   </P>
   </div>

 

   <div id="div2" style="display:none">
   <P>
     這是一個模式對話框。
     <p style="TEXT-ALIGN: center"><INPUT id="Login" onclick="tb_remove()" type="submit" value="  Ok  " /></p>
   </P>
   </div>

 

說明：給你要使用thickbox的<a>或button添加"#TB_inline?height=300&width=400&",#TB_inline是thickbox固定用法，height和width是顯示彈出對話框的大小參數，inlineId是你要顯示的標籤或組件，modal是模式與非模式的選擇，固然你還能夠接不少你自定義的參數
3.通常在項目中用得比較多的就是加載form的頁面，如添加，編輯在同一個list列表頁面，這時咱們就能夠將添加和編輯都作成thickbox形式，以下圖：

怎樣作呢同樣的，給添加連接加thickbox樣式：

<a href="add.shtml?width=300&height=250" class="thickbox">新增</a>
前提是你得將要顯示的頁面(add.shtml)作好，而後指定你要顯示的大小
編輯一樣是同樣：先將原信息提取出來，再讓用戶修改：

代碼也同樣：

 

 

<a href="edit.shtml?width=300&height=250&nid=item.nid" class="thickbox">編輯</a>

 

4.能本身定位到須要用thickbox的元素，不使用樣式，能夠用函數，如：

 

 

<div id="PicList">
<a href="Pic01.jpg"><img src="Pic01s.jpg" border="0"/></a>
<a href="Pic02.jpg"><img src="Pic01s.jpg" border="0"/></a>
</div>

 

$(function() {
tb_init("#PicList a[img]");});

 

5.經過ajax加載的頁面，thickbox樣式會失效，解決辦法：
只要在AJAX載入HTML並更新到頁面後執行下如下代碼：

tb_init('.thickbox');
6.自定義函數調用：
如點擊縮圖，要顯示大圖,縮略圖URL只不過在大圖URL的後綴前加了s:

 

 

<div id="PicList">
<img src="Pic01s.jpg" border="0"/>
<img src="Pic01s.jpg" border="0"/>
</div>

 

$(function() {
$("#PicList img").click(function() {
tb_show("",this.src.substring(0,this.src.length-5)+'.jpg',false);
});});

 

另外，若是想用其它事件，還能夠將click改爲你想觸發thickbox的事件。

THICKBOX支持一下瀏覽器: Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10……可是據個人使用,IE6仍是有點問題的!