Categories: JavaScript | Tags: , , | Views: 7,101

 

前面用prototype写过一个div提示框(链接), 功能上还是有所限制. 现在用jquery改版了这个提示框, 增加的功能有:

1. N秒后自动关闭提示框

2. N关闭提示框执行一定的操作(可以设定)

3. 背景渐变暗

4. 支持ajax的get操作

5. 支持嵌入iframe

效果图可以见带即时验证的jQuery表单插件的后两张截图.

// JavaScript Document
$.showAlert = function(o){
    var s = {
        alertwidth: '360',  // width
        alertheight: '200', //height
        alertautoclose: -1, // auto close alert after alertautoclose
        alerttitle: '提示', // title of alert
        alertwrapperclass: '', 
        alerttitleclass: '',
        alertmainclass: '',
        alertcontent: 'text:', // support  text: url: get: iframe: (url=get)
        alertbgclass: '',
        alertcloseevent: ''  // event after close
    };
    if(o) $.extend(s,o);
    var dragFlag = false;
    var startX = 0;
    var startY = 0;
    var main = $('<div style="padding:12px; text-align:center; color:red" id="alertmain" class="'+s.alertmainclass+'"></div>');
    var title = $('<div style="background-color:#222; border:1px solid #aaa; height:18px; padding:8px 5px 5px 12px; color:white; font-weight:bold; cursor:move;" id="alerttitle" class="'+s.alerttitleclass+'"></div>');
    var titlespan = $('<span style="width:'+(s.alertwidth-48)+'px; float:left;">'+s.alerttitle+'</span>');
    var closespan = $('<input value=× style="border:1px solid #eee; color:#eee; background-color:#222; cursor:pointer; width:20px; margin-bottom:3px;" type=button>');
    var wrapper = $('<div style="width:'+s.alertwidth+'px; height:'+s.alertheight+'px; position:absolute; top:'+(document.documentElement.clientHeight - s.alertheight)/2+'px; left:'+($('body').width() - s.alertwidth)/2+'px; z-index:10000; border:1px solid #222; background-color:white;" id="alertwrapper" class="'+s.alertwrapperclass+'"></div>');
    var bg = $('<div id="alertbg" style="position:absolute; top:0; left:0; z-index:9999; background-color:#999; width:'+$('body').width()+'px; height:'+$('body').height()+'px;" class="'+s.alertbgclass+'"></div>');
    if(s.alertcontent.substr(0,5) == 'text:'){
        main.html(s.alertcontent.substr(5));
    } else if(s.alertcontent.substr(0,4) == 'url:' || s.alertcontent.substr(0,4) == 'get:'){
        var alerturl = s.alertcontent.substr(4);
        main.ajaxStart(function(){
            main.html("Loading...");
        });
        $.get(
            alerturl,
            null,
            function(data){ main.html(data); }
        );    
    } else if(s.alertcontent.substr(0,7) == 'iframe:'){
        var alertsrc =     s.alertcontent.substr(7);
        var alertiframe = $('<iframe src="'+alertsrc+'" width="'+(s.alertwidth-25)+'" height="'+(s.alertheight-50)+'px" scrolling="auto" frameborder="0" marginheight="0" marginwidth="0"></iframe>');
        alertiframe.appendTo(main);
    }
    bg.appendTo($('body'));
    wrapper.appendTo($('body'));
    title.appendTo(wrapper);
    titlespan.appendTo(title);
    titlespan.after(closespan);
    main.appendTo(wrapper);
    bg.animate({opacity:0.6});
    function closealert(){
        wrapper.remove();
        bg.remove();
        eval(s.alertcloseevent);
    }
    function autoclosealert(){
        if(s.alertautoclose>=0){
            titlespan.html(s.alerttitle+'    <font style="font-weight:normal;color:#ff6" >'+s.alertautoclose+' 秒后自动关闭...</font>');
            s.alertautoclose --;
            if(s.alertautoclose == -1) closealert();
        }
        setTimeout(autoclosealert,1000);
    }
    autoclosealert();
    closespan.click(function(){
        closealert();
    });
    title.mousedown(function(e){
        dragFlag = true;
        startX = e.pageX - parseInt(wrapper.css('left'));
        startY = e.pageY - parseInt(wrapper.css('top'));
    });
    title.mousemove(function(e){
        if(dragFlag){
            wrapper.css('left', e.pageX - startX)
                   .css('top',  e.pageY - startY);      
        }
    });
    title.mouseup(function(e){
        dragFlag = false;           
    });
    title.mouseout(function(e){
        if(e.target == this) dragFlag = false;         
    });
    return this;
}

 

RELATED POSTS:

  1. 实现div提示框且背景变暗的JS类
  2. 带即时验证的jQuery表单插件
  3. jQuery插件:音标辅助输入1.0
  4. jQuery插件:jquery.ecombo 1.0
  5. jQuery插件:不超过50行的评分插件jquery.rate 1.0
  6. 简单写了个jquery的鼠标提示文字插件
  1. 影子008
    October 7th, 2009 at 20:48
    Reply | Quote | #1

    IE 8以下版本中不能使用

;) :| :x :twisted: :roll: :oops: :o :mrgreen: :lol: :idea: :evil: :cry: :arrow: :P :D :?: :? :) :( :!: 8O 8)

你可以使用@somebody:开头, 来邮件通知somebody你回复了他的留言(用户名区分大小写).