HTML 對話方塊外掛程式thickbox使用技巧

2022-02-27 16:10:18 字數 926 閱讀 4876

thickbox是乙個不錯的對話方塊外掛程式,不過官方站提供的使用方法具限性很大。比如,我頁面上有個縮圖,點選之後用thickbox顯示大圖。使用官方的方法:

這種方法雖然方便,但侷限性很大。

第一、你必須為每個這樣的img標籤外套乙個a標籤

第二、只能用class="thickbox"讓thickbox去繫結事件

第三、不能自己定義事件

第四、當使用ajax載入頁面後,載入的頁面內的這些dom不會被thickbox繫結

稍稍看了下thickbox的**,其實以上問題完全可以使用thickbox自己的方法來解決,以下舉例說明。

例一、我能自己定位到需要用thickbox的元素,不想再加上class="thickbox"。html如下:

以下為引用的內容:

需要對id="piclist"裡面的a標籤下的img使用thickbox,**如下:

以下為引用的內容:

$(function() );

例二、我用ajax載入了一段html,但該html裡的class="thickbox"這樣的標籤點選了沒有任何反應。解決此問題只要在ajax載入html並更新到頁面後執行下以下**:

tb_init('a.thickbox, area.thickbox, input.thickbox'); //引號裡的是thickbox的預設選擇器,你可以使用例一內這樣的自定義選擇器

例三、我想點選img標籤後顯示thickbox,不想在img標籤外面再套這樣的標籤。縮圖url只不過在大圖url的字尾前加了s。比如大圖是pic01.jpg、小圖是 pic01s.jpg。使用以下方法可以做到。html如下:

以下為引用的內容:

**如下:

以下為引用的內容:

$(function() );});

另外,如果想用其它事件,請使將例3裡的click改成你想觸發thickbox的事件。

對話方塊 訊息對話方塊

我們在使用windows系統的過程中經常會見到訊息對話方塊,提示我們有異常發生或提出詢問等。因為在軟體開發中經常用到訊息對話方塊,所以mfc提供了兩個函式可以直接生成指定風格的訊息對話方塊,而不需要我們在每次使用的時候都要去建立對話方塊資源和生成對話方塊類等。這兩個函式就是cwnd類的成員函式mes...

對話方塊中顯示對話方塊

一 對話方塊中顯示對話方塊的方法 1 首先建立要在對話方塊裡顯示的那個對話方塊,命名為 idd inner 設定這個對話方塊的屬性 1 style 選擇 child 中文版 樣式 選擇 下層 2 border 為 none 中文版 邊框 選擇 無 2 為了顯示時能夠準確定位,我們可以在右邊要顯示對話...

常用對話方塊 訊息對話方塊

使用windows系統的過程中經常會見到訊息對話方塊,提示我們有異常發生或提出詢問等。因為在軟體開發 中經常用到訊息對話方塊,所以mfc提供了兩個函式可以直接生成指定風格的訊息對話方塊,而不需要我們在每次使用的時候都要去建立對話方塊資源和生成對話方塊類等。這兩個函式就是cwnd類的成員函式messa...