漫畫原創Jquery消息提示插件

dengjianbin 12年前發布 | 23K 次閱讀 jQuery對話框插件 jQuery插件
一共有4種提示操作：
1、錯誤（error） 
 2、 成功（succ） 
 3、消息（notice） 
4、等待（loading）

每個使用的元素加上以下3種屬性  
1、class必需為manhuaTip  
2、 ty類別必需為第一條的4種之一  
3、msg提示的消息
 
可以靈活設置響應事件和顯示時間
 
Jquery插件,Jquery資源,Jquery特效,div+css
Jquery插件,Jquery資源,Jquery特效,div+css
Jquery插件,Jquery資源,Jquery特效,div+css
Jquery插件,Jquery資源,Jquery特效,div+css

插件源代碼如下：
$(function() {
    $.fn.manhuaTip = function(options) {
        var defaults = {
            Event : "click",
            timeOut : 2000
        };
        var options = $.extend(defaults,options);
        var $tip = $(this);
        //文本框綁定事件
        $tip.live(options.Event,function(e){    
            var type = $(this).attr('ty');      
            var msg = $(this).attr('msg');
            var tipHtml = '';
            if (type =='loading'){
                tipHtml = '<img alt="" src="images/loading.gif">'+(msg ? msg : '正在提交您的請求，請稍候...');
            } else if (type =='notice'){
                tipHtml = '<span class="gtl_ico_hits"></span>'+msg
            } else if (type =='error'){
                tipHtml = '<span class="gtl_ico_fail"></span>'+msg
            } else if (type =='succ'){
                tipHtml = '<span class="gtl_ico_succ"></span>'+msg
            }
            if ($('.msgbox_layer_wrap')) {
                $('.msgbox_layer_wrap').remove();
            }
            if (st){
                clearTimeout(st);
            }
            $("body").prepend("<div class='msgbox_layer_wrap'><span id='mode_tips_v2' style='z-index: 10000;' class='msgbox_layer'><span class='gtl_ico_clear'></span>"+tipHtml+"<span class='gtl_end'></span></span></div>");
            $(".msgbox_layer_wrap").show();
            var st = setTimeout(function (){
                $(".msgbox_layer_wrap").hide();
                clearTimeout(st);
            },options.timeOut);
        }); 
    }
});
 本文由用戶 dengjianbin 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！