這篇文章主要講解了“怎么使用jQuery對(duì)話框插件jBox 2.3”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么使用jQuery對(duì)話框插件jBox 2.3”吧！

插件說明

- jBox 是一款基于 jQuery 的多功能對(duì)話框插件，能夠?qū)崿F(xiàn)網(wǎng)站的整體風(fēng)格效果，給用戶一個(gè)新的視覺享受。

運(yùn)行環(huán)境

- 兼容 IE6+、Firefox、Chrome、Safari、Opera 等主流瀏覽器。

使用授權(quán)

- jBox ***免費(fèi)使用，但是必須保留相關(guān)的版權(quán)信息。如果有好的建議，可以直接在下面留言。

[2011-11-11] jBox v2.3 正式版

- [調(diào)整&修復(fù)] IE6下有iframe或頁面有active、applet控件的情況下自動(dòng)選擇用iframe來遮罩。

- [修復(fù)] IE6下拖動(dòng)窗口到右邊時(shí)邊框不可見的樣式錯(cuò)誤(依然還有20px，但影響不大)。

- [修復(fù)] IE6下prompt相關(guān)方法與messager方法的圖標(biāo)最小高度不正確的樣式修正。

- [修復(fù)] IE6下messager方法的窗口在滾動(dòng)條被拖動(dòng)的時(shí)候位置不正確的bug。

- [修復(fù)] 修復(fù)瀏覽器改變大小時(shí)遮罩層不完全的bug。

[2011-11-08] jBox v2.3 beta 版本更新

- [新增] tip方法增加了 opacity 選項(xiàng)，它決定是否顯示隔離層。

- [新增] 增加了 showScrolling 選項(xiàng)，在顯示jBox窗口時(shí)可以隱藏瀏覽器的滾動(dòng)條。

- [新增] 多個(gè)窗口共存時(shí)，點(diǎn)擊某個(gè)窗口標(biāo)題時(shí)，窗口自動(dòng)處于最頂層。

- [調(diào)整] id 選項(xiàng)默認(rèn)改為null，當(dāng)為null時(shí)會(huì)自動(dòng)生成隨機(jī)id，一個(gè)id只會(huì)顯示一個(gè)jBox。

- [調(diào)整] loaded 選項(xiàng)增加了個(gè)參數(shù)h，參數(shù)h表示窗口內(nèi)容的jQuery對(duì)象，方便用戶在窗口加載后對(duì)內(nèi)容進(jìn)行初始化處理。

- [調(diào)整] 把全局設(shè)置放到獨(dú)立的js文件，統(tǒng)一放在目錄 i18n，目前只有jquery.jBox-zh-CN.js。

- [調(diào)整] 按空格鍵可直接執(zhí)行默認(rèn)按鈕提交的事件(為保留此功能，按鈕為焦點(diǎn)時(shí)不是很好看，但用戶體驗(yàn)應(yīng)該優(yōu)先考慮)。

- [修復(fù)] 修復(fù)在IE下多窗口狀態(tài)切換時(shí)顯示不了的Bug。

使用方法：

常見使用問題：

1.請(qǐng)使用XHTML 1.0標(biāo)準(zhǔn)，確保html頂部加上下面這行

2.不想顯示標(biāo)題?

把title設(shè)置為null即可，例如： jBox('內(nèi)容', { title: null });

3.不想要按鈕?自定義按鈕?

把buttons設(shè)置為{}表示不顯示按鈕，例如： jBox('內(nèi)容', { buttons: {} });

自定義按鈕：jBox('內(nèi)容', { buttons: {'按鈕1':'按鈕1點(diǎn)擊返回值','按鈕2':'按鈕2點(diǎn)擊返回值'} });

還可以設(shè)置buttonsFocus要哪個(gè)按鈕為默認(rèn)按鈕，索引從0開始

4.不顯示隔離層?

把opacity設(shè)置為0即可，例如： jBox('內(nèi)容', { opacity: 0 });

5.窗口自動(dòng)關(guān)閉?

把timeout設(shè)置為0表示不自動(dòng)關(guān)閉，正數(shù)表示多少毫秒后自動(dòng)關(guān)閉，例如3秒后關(guān)閉： jBox('內(nèi)容', { timeout: 3000 });

6.在不顯示隔離層的情況下，想防止點(diǎn)擊按鈕彈出多個(gè)一樣的窗口?

把id傳進(jìn)去就可以了，因?yàn)橐粋€(gè)id只會(huì)顯示一個(gè)窗口，例如： jBox('內(nèi)容', { id: 'my-id'});

7.窗口的高和寬一定要指定值嗎?可以自適應(yīng)嗎?

除了iframe外，其它情況，是可以指定窗口的高和寬是自適應(yīng)的，例如：jBox('內(nèi)容', { width: 'auto', height:'auto' });

jbox的可選參數(shù)很多，結(jié)合不同的參數(shù)可以會(huì)有不同的效果，請(qǐng)查看下面的全局參數(shù)說明(在文件jquery.jBox-zh-CN.js)。如果你是使用簡體中文，且不想改全局配置，則不需要加載jquery.jBox-zh-CN.js，因?yàn)閖query.jBox-2.3.min.js里默認(rèn)的設(shè)置和jquery.jBox-zh-CN.js是一樣的，如果只想修改某幾個(gè)選項(xiàng)，例如窗口邊框，只需要一行代碼就可以：jBox.setDefaults({ defaults: { border: 8} });

總結(jié)

以上是生活随笔為你收集整理的怎么使用jQuery对话框插件jBox 2.3的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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