茗洋Easy UI 1.3.5 部分問題解決系列專題[自定義alert關閉時間，自動關]

 【評論，樓層數為30的倍數的，我送你我自己的博客園的皮膚，該博客參與活動】

這次我又給大家帶來的EasyUI的我研究拓展的新特性

我使用的是  EasyUI 1.3.5版本的，項目是ASP.NET MVC3，但是本篇講解用不上ASP.NET MVC，僅僅修改官方Demo你就知道怎么用了

但這次我又是自己修改EasyUI源碼完成的

首先大家先下 EasyUI 1.3.5    【 下載 】 先保證大家都是在同一個起跑線的，放心吧，我會教你們怎么改的，還有思路

 

打開 \jquery-easyui-1.3.5\demo\messager的alert.html頁面

我們發現，他一直都是顯示的，有點不人性化，還要點ok才行，但是你也發現了，這里的alert框，默認焦點在ok上，周圍還有虛線，所以我們只要在它彈出來時候，過了幾秒，然后觸發ok鍵的click事件就行了，那我們開始吧，代碼都是加密的。。唉，看起來真費勁..

於是我找啊找

我們打開jquery-easyui-1.3.5\plugins\

找到 var win=_f(_15,_17,_18);這行代碼，你可以按照查找搜索到，大約137行代碼處

然后

代碼：

if (isAutoClose) {
            var durationTime = 500;
            if (duration) durationTime = duration;
            setTimeout(function () {
                if ($alertOkButton) $alertOkButton.click();
            }, durationTime);
        }

接下來，我們在alert:function(_15,msg,_16,fn)這行代碼加上幾個參數

改成

代碼：

},alert:function(_15,msg,_16,fn, isAutoClose, duration){
var _17="<div>"+msg+"</div>";

接下來，那個下面的ok按鈕經過我的一番查找，大約在95行代碼的地方

我們在function _f(_10,_11,_12){上面聲明個   var $alertOkButton;變量，用來存儲按鈕那個對象，這樣下面就可以定時觸發他的click事件以達成關閉的效果

修改后的代碼

 var $alertOkButton;
function _f(_10,_11,_12){
var win=$("<div class=\"messager-body\"></div>").appendTo("body");
win.append(_11);
if(_12){
var tb=$("<div class=\"messager-button\"></div>").appendTo(win);
for(var _13 in _12){

   $alertOkButton = $("<a></a>").attr("href", "javascript:void(0)").text(_13).css("margin-left", 10);
                $alertOkButton.bind("click", eval(_12[_13])).appendTo(tb).linkbutton();
}
}

接下來代碼已經改好了，使用方法，如下：

我們打開alert.html

引入

        <script type="text/javascript" src="../../plugins/jquery.messager.js?v140218"></script>

后面加了？的效果，就是每次瀏覽器都是加載最新的，不會從緩存加，以防止你js修改了沒效果，就是因為緩存的原因

function alert1(){
            $.messager.alert('3秒后自動關閉','Here is a message!','alert',function(){},true,3000);
        }
        function alert2(){
            $.messager.alert('默認的500毫秒后自動關閉','Here is a error message!','error',function(){},true);
        }
        function alert3(){
            $.messager.alert('永不關閉','Here is a info message!','你需要手動關閉',function(){},false);
        }

效果圖：

到此為止，我相信大家應該知道怎么用了。

總結一下：

$.messager.alert()我們在后面拓展了2個方法，延遲關閉時間可選，前面有個，是否自動關閉，如果是true，你可以設置延遲時間，也可以不設置，那就是500毫秒，當然這個500你可以自己在源碼中再改改。如果是false，則是不啟用自動關閉

默認的原生自帶的寫法，都是不會自動關閉的，類似第三種寫法。

 

我自己辛苦琢磨出來的，雖然你使用起來很簡單了，還希望你們的一個小小的推薦，我才能有更多這些天對編程的熱情。謝謝你們

 

下面：修改好的jquery.messager.js 下載

 

寫到我這個年齡,我覺的我的時間很多都花在研究上了,所以現在很少能有時間寫寫博客,干自己愛干的事,這次能寫到這里也讓我感到很高興,謝謝你們也看到了這里,我會慢慢寫的,謝謝你們的支持.

我不知道我寫個是不是個多余，我不是做前端的，但我的前端也不差，我在合肥，剛剛離職，所以現在時間比較多吧..

========================================AaronYang.cnblogs.com 茗洋博客==================================================

相關聯的自己的EasyUI感覺比較好的解決方案的文章鏈接：

茗洋Easy UI 1.3.2 部分問題解決系列專題[Combo模糊匹配中文問題 修復]

茗洋Easy UI 部分問題解決系列專題[datagrid 復雜表頭]

EasyUI 的 combotree 加載數據后折疊起來，並且只允許單擊子節點的寫法