整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
多好玩好用的軟件，歡迎點(diǎn)擊右上角關(guān)注我~
用過(guò)更好的，就再也回不去了。
-- by Tony
差友們對(duì)于上面這句話有什么感想嗎？托尼的感想就兩個(gè)字：費(fèi)錢。
比如要體驗(yàn) 4K 的分辨率，或者 144hz 的刷新率，就必須得換屏（ 兩者同時(shí)體驗(yàn)這種事情就。。不要想了吧。。。）
而換完屏后發(fā)現(xiàn)自己顯卡推不動(dòng)。。。就。。。換顯卡，換完顯卡再回頭看自己原來(lái) 1080P 60hz 的屏，感覺(jué)眼睛都要瞎了。
嗯，怎么看東西這么糊，這塊屏該換了。。。
那么有沒(méi)有不怎么費(fèi)錢。。。最。。。最好不花錢的辦法，可以讓暫時(shí)沒(méi)啥錢的年輕人提升一下視頻觀感體驗(yàn)的？
答案當(dāng)然是肯定的。今天托尼要給差友們介紹一個(gè)補(bǔ)幀軟件。
先甩個(gè)視頻給你們感受一下
傳送門：https://v.qq.com/iframe/preview.html?vid=h1346p34ewn&width=500&height=375&auto=0
因?yàn)樯蟼鞯膲嚎s，效果沒(méi)滿血，后面告訴大家感受滿血效果的辦法。
為什么我明明已經(jīng)特地下了個(gè)藍(lán)光資源看起來(lái)還是不太得勁兒？是不是該換塊屏了？但為什么我游戲過(guò)場(chǎng)的 CG 動(dòng)畫看起來(lái)又總是比電影要流暢？
決定流暢度好壞的因素主要有兩個(gè)：幀率，以及動(dòng)態(tài)模糊。
差友們還記得小時(shí)候看過(guò)的卓別林的默片嗎？
早期的默片其實(shí)是一張一張畫片按照固定的時(shí)間間隔在你面前呈現(xiàn)的，再經(jīng)過(guò)人腦神奇的處理給人一種畫面在動(dòng)的感覺(jué)。
上面這個(gè)動(dòng)圖是由每秒 10 張靜態(tài)的圖片組成的，這個(gè)每秒 10 張指的就是幀率，也叫 fps。
fps = frame per second ( 幀每秒 )
而現(xiàn)在的電影多數(shù)是 24 fps，游戲的 CG 動(dòng)畫一般是 60 fps。所以單從幀率上來(lái)說(shuō)，CG 動(dòng)畫是要優(yōu)于電影的。
但是有一點(diǎn)又很神奇的就是，很多游戲玩起來(lái)明明連平均幀率都超過(guò)30幀，但是觀感體驗(yàn)又沒(méi)有 24 幀的電影來(lái)的舒爽順暢，這又是為什么呢？
這基本上可以說(shuō)是實(shí)時(shí)渲染和動(dòng)態(tài)模糊的鍋。
實(shí)時(shí)渲染就是即興作畫。電腦的硬件水平?jīng)Q定了它可以在相同的時(shí)間內(nèi)，畫多少?gòu)埉嫿o你講同一個(gè)故事。
CG 動(dòng)畫就不同了，它是預(yù)先通過(guò)專業(yè)的計(jì)算設(shè)備渲染好以后導(dǎo)出的一個(gè)視頻文件，換句話說(shuō)我畫畫速度不夠快，大不了我花一天的時(shí)間畫一張畫，慢工出細(xì)活，最后把畫好的畫，氣定神閑地遞給你，你看著感覺(jué)就一定很舒服。
而且即興作畫發(fā)揮不穩(wěn)定，可能我之前給你畫得挺快，一秒給你畫 30 張，但是后來(lái)我手酸了，畫得慢了，一秒只能給你遞 10 張畫。這樣一會(huì)兒快一會(huì)兒慢，你看著就很不舒服。
而動(dòng)態(tài)模糊是啥呢？是畫的意境，寫意畫！
游戲里的畫，是靜物素描，每一張都很清晰。而電影里的畫是寫意畫，有些地方朦朧，有些地方清晰。
畫面里的物體是靜是動(dòng)，是快是慢其實(shí)都看得出來(lái)
（《 死侍 2 》 打斗畫面 ）
同一畫面里面運(yùn)動(dòng)速度慢的東西看上去就比較清楚，比如死侍的臉，運(yùn)動(dòng)速度快的則是一個(gè)模糊的運(yùn)動(dòng)軌跡，比如死侍的手和手里的刀。這樣的 “ 意境 ” 是方便我們大腦，腦補(bǔ)出一個(gè)完整流暢的打斗動(dòng)作的。
現(xiàn)在的游戲?yàn)榱擞瓮骟w驗(yàn)更好，也會(huì)加入一些 “ 意境 ” ，也就是運(yùn)動(dòng)模糊。
補(bǔ)幀，就類似在你的連環(huán)畫里面加入更多的畫片。
坊間流傳著各種各樣關(guān)于補(bǔ)幀的傳聞，甚至是傳說(shuō)。比如我們上面提到的腦補(bǔ)，這還真不是開(kāi)玩笑的。
本質(zhì)上所有的電影其實(shí)都是一系列靜止畫片按照一定的時(shí)距依次出現(xiàn)在人的眼前，而人腦接受到這些信息之后會(huì)產(chǎn)生畫面在運(yùn)動(dòng)的幻象，這個(gè)現(xiàn)象就是似動(dòng)現(xiàn)象。
想象一圈小燈泡圍成一個(gè)圓圈，燈泡按照順時(shí)針逐個(gè)亮起滅掉，是不是會(huì)給人一種光球在轉(zhuǎn)圈圈運(yùn)動(dòng)的感覺(jué)？但事實(shí)上是所有的燈泡都只發(fā)生了亮滅的變化，并沒(méi)有發(fā)生位移。
但為什么我們會(huì)覺(jué)得光球在轉(zhuǎn)圈圈呢，這就是腦補(bǔ)。既然叫腦補(bǔ)，自然是費(fèi)腦子的。咱們假想一個(gè)極端的場(chǎng)景，托尼同樣用兩秒鐘給你描述一個(gè) “ 故事 ”。
首先，盯著這張圖片看 2 秒。
然后再看這張動(dòng)圖。
（ 這是一張兩秒的動(dòng)圖，一共 30 張 畫。）
哪個(gè)故事理解起來(lái)更容易？
還有另一種補(bǔ)法叫 “ 眨眼補(bǔ)幀 ” 了，顧名思義，通過(guò)眨眼來(lái)達(dá)到補(bǔ)幀的效果。
這是一種佛系玄學(xué)的補(bǔ)幀辦法，講究順勢(shì)而為，敵不動(dòng)我動(dòng)。比如玩游戲的時(shí)候突然卡起來(lái)了，看視頻的時(shí)候幀率不夠，玩家就可以通過(guò)眨眼來(lái)讓畫面變得流暢。一些修為更高的玩家還可以通過(guò)畫面幀率具體狀況來(lái)調(diào)整自己眨眼的頻率以及每次閉眼的時(shí)長(zhǎng)來(lái)達(dá)到流暢的觀看體驗(yàn)。
但是 “ 眨眼補(bǔ)幀 ” 有一個(gè)致命的缺點(diǎn)就是眼睛容易累，而且有時(shí)候眼睛進(jìn)東西了不得不眨眼會(huì)打破原來(lái)補(bǔ)好的穩(wěn)定幀率。
用 AMD 顯卡的差友們可能有聽(tīng)過(guò) AMD Fluid Motion 這項(xiàng)技術(shù)，這是用 A 卡的一大好處，它可以為視頻補(bǔ)幀，把 24 幀或者 30 幀的視頻補(bǔ)齊到 60 幀。不僅僅是視頻文件在本地播放的時(shí)候可以補(bǔ)，看在線視頻的時(shí)候也可以補(bǔ)。
（ AMD 官網(wǎng)的插幀技術(shù)描述 ）
這里附上一個(gè)用 AMD Fluid Motion 技術(shù)補(bǔ)到 60 幀的 “ 憤怒的元首 ” 供大家欣賞一下。
傳送門：https://v.qq.com/iframe/preview.html?vid=n13468fxrk0&width=500&height=375&auto=0
（ 原 up 主視頻效果更明顯，視頻地址在文末參考資料 ）
感興趣的差友可以去研究研究，托尼就不詳細(xì)講了畢竟。。。托尼沒(méi)有 A 卡。
但是托尼找到了這個(gè)叫做 SVP 的軟件。
這個(gè)軟件全稱叫做 Smooth Video Project，托尼的叫法叫 “ 絲絲順滑觀影計(jì)劃 ”。目前在 Windows, Linux 和 Mac 平臺(tái)都有。
Windows 有一個(gè)免費(fèi)的試用版，Linux完全免費(fèi)，而 Windows 下的 SVP 4 Pro 和 Mac 下的 SVP 4 Mac 都需要購(gòu)買。
官網(wǎng)不同版本軟件的特性對(duì)比
托尼試探性地點(diǎn)進(jìn) Mac 的購(gòu)買鏈接里瞄了一眼。
稍微有點(diǎn)小貴。。。但是為什么這里還有個(gè)中文的 SVP 4 購(gòu)買鏈接。
抱著試一試的心態(tài)我點(diǎn)進(jìn)去發(fā)現(xiàn)了另一個(gè)專門給國(guó)人的購(gòu)買入口。
托尼之前在 Windows 上試用了一下試用版，嘿！還真 TM 管用！
出于國(guó)際人道主義精神，這波信仰必須充值！
在電子郵件欄輸入郵箱，用支付寶付完錢后，我的郵箱收到了一封通知郵件，里面附上了下載鏈接，用戶名和注冊(cè)碼。
值得一提的是 Windows 和 Mac 都是支持無(wú)條件退款的，Windows 15 天，Mac 30 天。
在 Mac 下打開(kāi) dmg 文件就可以看到軟件，一個(gè)安裝說(shuō)明，還有一個(gè)終端自運(yùn)行文件。
跟著說(shuō)明走把軟件拖到 Application 文件夾里以后再運(yùn)行一下那個(gè)自運(yùn)行文件就基本大功告成了。
軟件界面長(zhǎng)這樣
后面還有一系列設(shè)定要調(diào)，托尼這里就掠過(guò)了，官網(wǎng)和附件里的說(shuō)明都非常詳細(xì)，還是留一些小小的未知供差友探索。
雖然無(wú)論是 Windows 還是 Mac 上的準(zhǔn)備工作都比較復(fù)雜，但是復(fù)雜的好處就是它不僅支持在線看視頻，還支持較多的第三方播放器。
VLC 這個(gè)播放器無(wú)論是 Mac 還是 Windows 上都有，而且 SVP 也都支持。Mac 上的 SVP 4 就是把 VLC 里的去隔行濾鏡替換成了它的 “ 補(bǔ)幀濾鏡 ”
托尼拖了個(gè)頭號(hào)玩家進(jìn)去以后。。。就
。
。
。
炸裂了了了！
托尼把開(kāi)啟補(bǔ)幀和關(guān)閉補(bǔ)幀的播放畫面錄屏了下來(lái)，你們對(duì)比一下看看吧。
注意 Parzival 的頭發(fā)
傳送門：https://v.qq.com/iframe/preview.html?vid=h1346p34ewn&width=500&height=375&auto=0
Bilibili 支持上傳 60 幀的視頻，比這里效果更明顯（ B 站有條件的把分辨率調(diào)到 1080p60 最佳 ）。
其實(shí) Windows 上的免費(fèi)版基本已經(jīng)夠用了，但是免費(fèi)版沒(méi)法設(shè)定目標(biāo)補(bǔ)齊幀率，所以如果接的是一塊 144hz 的顯示屏，補(bǔ)幀效果會(huì)很不理想。
感興趣的差友可以下個(gè)免費(fèi)版嘗鮮一下，稍微要費(fèi)點(diǎn)功夫。但是當(dāng)你隨便拖個(gè)電影進(jìn)去的那一刻，你會(huì)明白，一切都是值得的。至于沖不充值信仰就很隨意了。
反正托尼用這個(gè)軟件看了三部電影，現(xiàn)在關(guān)了軟件看啥都像看 PPT 。
參考資料：
1. AMD 官網(wǎng)
https://www.amd.com/zh-hans/technologies/perfect-picture
2. SVP 官網(wǎng)
https://www.svp-team.cn.com/wiki/Main_Page
3. 憤怒的元首視頻--Bilibili up主 open4all
https://www.bilibili.com/video/av8778335?from=search&seid=131898783601263129
4. 頭號(hào)玩家補(bǔ)幀對(duì)比視頻--Bilibili up主 盒子里面有什么
https://www.bilibili.com/video/av28914137
5. 死侍 2
6. 頭號(hào)玩家
7. 卓別林-摩登時(shí)代
“ 感覺(jué)是時(shí)候重新溫習(xí)一下
硬盤里的收藏了 ”
眾號(hào)【傳智播客博學(xué)谷】回復(fù)關(guān)鍵詞：前端 PS Java(100G) Python(80G) 大數(shù)據(jù) 區(qū)塊鏈 測(cè)試 PPT JS(40g+300教程) HTML 簡(jiǎn)歷 領(lǐng)取相關(guān)學(xué)習(xí)資料！
一、HTML
1、<image>標(biāo)簽上title屬性與alt屬性的區(qū)別是什么？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說(shuō)明的。且長(zhǎng)度必須少于100個(gè)英文字符或者用戶必須保證替換文字盡可能的短。
這包括那些使用本來(lái)就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶，視覺(jué)障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設(shè)置該屬性的元素提供建議性的信息。使用title屬性提供非本質(zhì)的額外信息。參考《alt和title屬性的區(qū)別及應(yīng)用》
2、分別寫出以下幾個(gè)HTML標(biāo)簽：文字加粗、下標(biāo)、居中、字體
加粗：<b>、<strong>
下標(biāo)：<sub>
居中：<center>
字體：<font>、<basefont>、參考《HTML標(biāo)簽列表》
3、請(qǐng)寫出至少5個(gè)html5新增的標(biāo)簽，并說(shuō)明其語(yǔ)義和應(yīng)用場(chǎng)景
section：定義文檔中的一個(gè)章節(jié)
nav：定義只包含導(dǎo)航鏈接的章節(jié)
header：定義頁(yè)面或章節(jié)的頭部。它經(jīng)常包含 logo、頁(yè)面標(biāo)題和導(dǎo)航性的目錄。
footer：定義頁(yè)面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址。
aside：定義和頁(yè)面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。
參考《HTML5 標(biāo)簽列表》
4、請(qǐng)說(shuō)說(shuō)你對(duì)標(biāo)簽語(yǔ)義化的理解？
a. 去掉或者丟失樣式的時(shí)候能夠讓頁(yè)面呈現(xiàn)出清晰的結(jié)構(gòu)
b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重；
c. 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來(lái)渲染網(wǎng)頁(yè)；
d. 便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。
5、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
聲明位于文檔中的最前面，處于 標(biāo)簽之前。告知瀏覽器以何種模式來(lái)渲染文檔。
嚴(yán)格模式的排版和 JS 運(yùn)作模式是，以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
在混雜模式中，頁(yè)面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。
DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。
6、你知道多少種Doctype文檔類型？
標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過(guò)渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁(yè)，
Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁(yè)。
7、HTML與XHTML——二者有什么區(qū)別
a. XHTML 元素必須被正確地嵌套。
b. XHTML 元素必須被關(guān)閉。
c. 標(biāo)簽名必須用小寫字母。
d. XHTML 文檔必須擁有根元素。
參考《XHTML 與 HTML 之間的差異》
8、html5有哪些新特性、移除了那些元素？
a. HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。
b. 拖拽釋放(Drag and drop) API
c. 語(yǔ)義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
d. 音頻、視頻API(audio,video)
e. 畫布(Canvas) API
f. 地理(Geolocation) API
g. 本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
h. sessionStorage 的數(shù)據(jù)在頁(yè)面會(huì)話結(jié)束時(shí)會(huì)被清除
i. 表單控件，calendar、date、time、email、url、search
j. 新的技術(shù)webworker, websocket等
移除的元素：
a. 純表現(xiàn)的元素：basefont，big，center, s，strike，tt，u；
b. 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
9、iframe的優(yōu)缺點(diǎn)？
優(yōu)點(diǎn)：
a. 解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問(wèn)題
b. iframe無(wú)刷新文件上傳
c. iframe跨域通信
缺點(diǎn)：
a. iframe會(huì)阻塞主頁(yè)面的Onload事件
b. 無(wú)法被一些搜索引擎索引到
c. 頁(yè)面會(huì)增加服務(wù)器的http請(qǐng)求
d. 會(huì)產(chǎn)生很多頁(yè)面，不容易管理。
參考《iframe的一些記錄》
10、Quirks模式是什么？它和Standards模式有什么區(qū)別？
在寫程序時(shí)我們也會(huì)經(jīng)常遇到這樣的問(wèn)題，如何保證原來(lái)的接口不變，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時(shí)。IE6以前的頁(yè)面大家都不會(huì)去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個(gè)頁(yè)面將采用對(duì)CSS支持更好的布局，而如果沒(méi)有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區(qū)別：總體會(huì)有布局、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別。
a. 盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個(gè)元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
b. 設(shè)置行內(nèi)元素的高寬：在Standards模式下，給等行內(nèi)元素設(shè)置wdith和height都不會(huì)生效，而在quirks模式下，則會(huì)生效。
c. 設(shè)置百分比的高度：在standards模式下，一個(gè)元素的高度是由其包含的內(nèi)容來(lái)決定的，如果父元素沒(méi)有設(shè)置百分比的高度，子元素設(shè)置一個(gè)百分比的高度是無(wú)效的用
d. 設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會(huì)失效。
11、請(qǐng)闡述table的缺點(diǎn)
a. 太深的嵌套，比如table>tr>td>h3，會(huì)導(dǎo)致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。
b. 靈活性差，比如要將tr設(shè)置border等屬性，是不行的，得通過(guò)td
c. 代碼臃腫，當(dāng)在table中套用table的時(shí)候，閱讀代碼會(huì)顯得異常混亂
d. 混亂的colspan與rowspan，用來(lái)布局時(shí)，頻繁使用他們會(huì)造成整個(gè)文檔順序混亂。
e. 不夠語(yǔ)義
參考《為什么說(shuō)table表格布局不好？》
12、簡(jiǎn)述一下src與href的區(qū)別
src用于替換當(dāng)前元素；href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置
href是Hypertext Reference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接
公眾號(hào)【傳智播客博學(xué)谷】回復(fù)關(guān)鍵詞：前端 PS Java Python 大數(shù)據(jù) 區(qū)塊鏈 測(cè)試 PPT JS HTML 簡(jiǎn)歷 領(lǐng)取相關(guān)學(xué)習(xí)資料！
是多年以前用傳統(tǒng)JQuery（easyUi）做項(xiàng)目時(shí)遇到的問(wèn)題，今天把解決思路發(fā)布出來(lái)，也許能幫助到還在使用老架構(gòu)的同學(xué)。
在開(kāi)發(fā)類ERP的后臺(tái)管理系統(tǒng)時(shí)，經(jīng)常會(huì)看到這樣的布局結(jié)構(gòu)
每打開(kāi)一個(gè)菜單都是單獨(dú)打開(kāi)一個(gè)Tab頁(yè)，easyUi打開(kāi)Tab頁(yè)有兩種方式：
同一Dom樹(shù)中存在命名污染的問(wèn)題，包括樣式也會(huì)互相影響，新增加頁(yè)面里的樣式很可能影響原有頁(yè)面的布局
因此我們采用iframe的方式實(shí)現(xiàn)：
function addTab(subtitle,url,icon,closable){
if(!$('#tabs').tabs('exists',subtitle)){
$('#tabs').tabs('add',{
title:subtitle,
content:createFrame(url),
closable:(closable==null?true:closable),
icon:icon,
fit:true
});
}else{
$.messager.confirm('提示',eship.messages.updateTab,function(r){
if (r){
$('#tabs').tabs('select',subtitle);
var currTab = $('#tabs').tabs('getSelected');
$('#tabs').tabs('update',{
tab:currTab,
options:{content:createFrame(url)}
});
}
});
}
tabClose();
}
function createFrame(url){
var s = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:99%;"></iframe>';
return s;
}我們?cè)谑褂脮r(shí)iframe Tab頁(yè)時(shí)，頁(yè)面中經(jīng)常會(huì)有打開(kāi)對(duì)話框的需求。
因?yàn)槲覀儾捎昧薸frame的方式，其實(shí)打開(kāi)對(duì)話框是在子頁(yè)面的iframe的dom中打開(kāi)的，因此會(huì)被主頁(yè)面遮擋，如圖所示：
對(duì)話框移動(dòng)過(guò)程中會(huì)被Tab標(biāo)簽遮擋，并且無(wú)法繼續(xù)向上移動(dòng)，并且不同iframe傳遞參數(shù)也比較麻煩，不是很方便，因此決定進(jìn)行封裝，基本原理如下：
封裝模態(tài)對(duì)話框插件
優(yōu)點(diǎn)：
/**
* jQuery dialog
*
* @author rogerkuo
*
* easy ui 對(duì)話框擴(kuò)展，自動(dòng)創(chuàng)建DIV，并將DIV放置在最頂層DOM中，避免對(duì)話框被iframe覆蓋的情況
*/
(function($) {
$.joyplus = function(){};
$.joyplus.messager = function(){};
//私有方法，用來(lái)負(fù)責(zé)創(chuàng)建對(duì)話框
function _joy_show(options) {
var defaults = {
width : 800,
height : 500,
title : 'My Dialog',
modal : true,
onLoad : function(){
var topDiaOptions = $.joyplus.getDialogOption();
if( topDiaOptions.dialogId != undefined){//如果需要處理對(duì)話框連續(xù)彈出問(wèn)題時(shí)，對(duì)焦點(diǎn)進(jìn)行處理
var topBody = _joy_get_top_body();
var ele = $(topBody).find("#" + $.joyplus.getModelDialogId());
var inputs = $(ele).find("input");
if( inputs.length > 0 ){
inputs[0].focus();
}
}
}
//dialogId : ""用來(lái)判斷是否同一窗體，避免同一個(gè)業(yè)務(wù)多次彈出一個(gè)對(duì)話框，造成對(duì)話框堆疊，如果沒(méi)有，不作處理
};
var isString = (typeof options == "string");
if (isString) {
options = {};
}
var d = {};
$.extend(d , options);
var topDiaOptions = $.joyplus.getDialogOption();
if( topDiaOptions != undefined && topDiaOptions.dialogId != undefined && topDiaOptions.dialogId == d.dialogId ){
return;
}
var isDataFunction = false;
//新增dialog傳值基礎(chǔ)功能，可調(diào)用父窗體的方法，獲取附加數(shù)據(jù)
if( jQuery.type(d.extdata) == "function"){
isDataFunction = true;
d.extdata = d.extdata.call(this);
}
//新增dialog傳值grid功能
if( jQuery.type(d.grid) == "function"){
isDataFunction = true;
d.grid = d.grid.call(this);
}
if(!isDataFunction){
d = $.extend(d , options);
}
_joy_get_options_cache().push(d);
var opt = $.extend(defaults, options);
opt.onClose = $.joyplus.closeModelDialog;
var id = _joy_create_div();
var top = _joy_get_top_body();
var element = $(top).find("#" + id);
$(element).dialog(opt);
};
//獲取最上層的dialog對(duì)象
function _joy_get_top_dialog() {
var stack = _joy_get_dialog_stack();
return stack.pop();
};
//獲取對(duì)話框堆棧，因?yàn)橛脩艨梢栽趯?duì)話框上繼續(xù)點(diǎn)開(kāi)對(duì)話框，因次要記錄對(duì)話框堆棧
//先進(jìn)后出
function _joy_get_dialog_stack() {
var top = _joy_get_cahce();
return top;
};
//自動(dòng)創(chuàng)建div,在dom的最頂層創(chuàng)建
function _joy_create_div() {
var new_id = _joy_get_new_id();
var stack = _joy_get_dialog_stack();
stack.push(new_id);
$(_joy_get_top_body()).last().append("<div id='" + new_id + "'></div>");
return new_id;
};
function _joy_get_top_body() {
var top = window.parent.document.body;
return $(top)
};
function _joy_get_cahce() {
var a = window.top.$.fn._cache;
return a;
};
function _joy_get_options_cache() {
return window.top.$.fn._options_cache;
};
function _joy_get_new_id() {
var date = new Date();
return date.getTime().toString();
};
$.joyplus.showModelDialog = function(options , ifr) {
if( ifr ){
_joy_show(options);
}
else{
//如果是最頂層的iframe
if (window.top == window) {
_joy_show(options);
} else {//如果不是最頂層的iframe，則執(zhí)行最頂層的showModelDialog方法
options.curDom = window;
window.top.$.joyplus.showModelDialog(options);
}
}
};
//獲取當(dāng)前對(duì)話框的options
$.joyplus.getDialogOption = function(){
var options = _joy_get_options_cache();
return options[options.length-1];
};
//延時(shí)關(guān)閉
$.joyplus.delayedClose = function(millisecond){
var dialogId = $.joyplus.getModelDialogId();
if(dialogId){
$('#'+dialogId).dialog('minimize');
}
setTimeout($.joyplus.closeModelDialog,millisecond);
};
$.joyplus.closeModelDialog = function() {
if (window.top == window) {
var options = _joy_get_options_cache().pop();
//父窗體可以實(shí)現(xiàn)onClose方法，在對(duì)話框關(guān)閉時(shí)，會(huì)調(diào)用該方法
if (options.onClose != undefined && $.isFunction(options.onClose)) {
options.onClose();
}
//提供父窗體回調(diào)函數(shù)
if (options.callBack != undefined && $.isFunction(options.callBack)) {
options.callBack();
}
if (options.validObj != undefined) {
options.validObj.validatebox("validate");
}
//獲取當(dāng)前對(duì)話框id
var id = _joy_get_top_dialog();
var top = _joy_get_top_body();
//釋放自動(dòng)創(chuàng)建的div
var element = $(top).find("#" + id);
$(element).dialog("destroy");
} else {
window.top.$.joyplus.closeModelDialog();
}
};
$.joyplus.messager.alert = function(title, msg, icon, fn){
if( eship.messages[msg] != undefined ){
msg = eship.messages[msg];
}
$.messager.alert(title, msg, icon, fn);
};
//獲取dialog對(duì)象ID
$.joyplus.getModelDialogId = function() {
var c = _joy_get_cahce();
return c[c.length - 1];
};
$.fn._cache = new Array();
$.fn._options_cache = new Array();
})(jQuery);這樣在使用時(shí)，只需調(diào)用簡(jiǎn)單方法即可
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
