弹出自动关闭的提示框可以在不同位置，显示不同的效果，有类似iphone效果

弹出自动关闭的提示框可以在不同位置，显示不同的效果，有类似iphone效果

 

演示

 

 

XML/HTML Code

<div>
  <input type="button" onclick="$.jGrowl('Default Positioning');" value="Default"/>
  <input type="button" onclick="$('#one').jGrowl('Bottom Right Positioning');" value="Bottom Right"/>
  <input type="button" onclick="$('#two').jGrowl('Bottom Left Positioning');" value="Bottom Left"/>
</div>
<div><a href="sideways.html" target="_blank">在同一行显示</a></div>
<div><a href="jgrowl-pool.html" target="_blank">在指定位置显示</a></div>
<div><a href="jgrowl.html" target="_blank">在一个页面显示各种不同的效果</a></div>
<div id="one" class="jGrowl bottom-right"></div>
<div id="two" class="jGrowl bottom-left"></div>

--------------------------------------------------------

 

JavaScript Code

<script type="text/javascript">

        // In case you don't have firebug...
        if(typeof console === "undefined") {
            console = { log: function() { } };
        }

        (function($){

            $(document).ready(function(){
                // This value can be true, false or a function to be used as a callback when the closer is clciked
                $.jGrowl.defaults.closer = function() {
                    console.log("Closing everything!", this);
                };

                // A callback for logging notifications.
                $.jGrowl.defaults.log = function(e,m,o) {
                    $('#logs').append("<div><strong>#" + $(e).attr('id') + "</strong> <em>" + (new Date()).getTime() + "</em>: " + m + " (" + o.theme + ")</div>")
                }

                $.jGrowl("Hello world!");
                $.jGrowl("This notification will live a little longer.", { life: 1000 });
                $.jGrowl("Sticky notification with a header", { header: 'A Header', sticky: true });
                $.jGrowl("Custom theme, and a whole bunch of callbacks...", {
                    theme:  'manilla',
                    speed:  'slow',
                    beforeOpen: function(e,m,o) {
                        console.log("I am going to be opened!", this);
                    },
                    open: function(e,m,o) {
                        console.log("I have been opened!", this);
                    },
                    beforeClose: function(e,m,o) {
                        console.log("I am going to be closed!", this);
                    },
                    close: function(e,m,o) {
                        console.log("I have been closed!", this);
                    }
                });

                $.jGrowl("Custom animation test...", {
                    theme: 'manilla',
                    speed: 'slow',
                    animateOpen: {
                        height: "show"
                    },
                    animateClose: {
                        height: "hide"
                    }
                });

                $.jGrowl("Looks like the iPhone.", {
                    sticky: true,
                    header: 'iPhone',
                    theme: 'iphone'
                });


                $.jGrowl("This message will not open because we have a callback that returns false.", {
                    beforeOpen: function() {
                        console.log("Going to open a notification, but not really...");
                    },
                    open: function() {
                        return false;
                    }
                });

                $.jGrowl("This message will not close because we have a callback that returns false.", {
                    beforeClose: function() {
                        return false;
                    }
                });

                $.jGrowl.defaults.closerTemplate = '<div>hide all notifications</div>';

                $('#test1').jGrowl("Testing a custom container (this one is sticky, and will also be prepended).", {
                    closer: false,
                    sticky: true,
                    glue: 'before',
                    speed: 2000,
                    animateOpen: {
                        height: "show",
                        width: "show"
                    },
                    animateClose: {
                        height: "hide",
                        width: "show"
                    }
                });

                $('#test1').jGrowl("Another custom container test.", {
                    glue: 'before',
                    speed: 2000,
                    animateOpen: {
                        height: "show",
                        width: "show"
                    },
                    animateClose: {
                        height: "hide",
                        width: "show"
                    }
                });

                $('#test2').jGrowl("Trying a background image.", {
                    theme: 'smoke',
                    closer: false
                });
            });
        })(jQuery);

        </script>

 

XML/HTML Code

<p><a href="javascript:void(0);" onclick="$.jGrowl('One more message...');">Click here to create a message on demand in the #jGrowl container in the top-right corner of the screen.</a></p>

        <p><a href="javascript:void(0);" onclick="$('#test1').jGrowl('shutdown');">Shutdown jGrowl for the #test1 container in the top-left corner of the screen.</a></p>

        <p><a href="javascript:void(0);" onclick="$('#test1').jGrowl('close');">Close all in #test1.</a></p>


        <div id="logs"><h3>Log:</h3></div>

        <hr />


        <div id="test1" class="top-left"></div>
        <div id="test2" class="bottom-left"></div>

 

原文地址:http://www.freejs.net/article_jquerywenzi_207.html

评论

1 楼 zzjmates 2014-06-09  

说白了，就是一个弹出对话框插件