Question

我愿表示 j笑通知,但此时此刻,该通知遭到发射。我想上页。我可以看到以下功能:onclick=”return show SuccessMessage(。可能改用上载,但它会提供帮助。任何想法?

The code:

HMTL with Internal javascript:

<div class="container">


                        Demo: <input type="button" class="button" value="Show Success Message" onclick="return showSuccessMessage()"/>
                        <script type="text/javascript">
                            function showSuccessMessage(){
                                showNotification({
                                    type : "success",
                                    message: "This is a sample success notification"
                                });    
                            }                                
                        </script>
                    </li>

    </div>

请求:

/**
 * Javascript functions to show top nitification
 * Error/Success/Info/Warning messages
 * Developed By: Ravi Tamada
 * url: http://androidhive.info
 * © androidhive.info
 * 
 * Created On: 10/4/2011
 * version 1.0
 * 
 * Usage: call this function with params 
 showNotification(params);
 **/

function showNotification(params){
    // options array
    var options = { 
         showAfter : 0, // number of sec to wait after page loads
         duration : 0, // display duration
         autoClose  : false, // flag to autoClose notification message
         type  :  success , // type of info message error/success/info/warning
         message :   , // message to dispaly
         link_notification  :   , // link flag to show extra description
         description  :    // link to desciption to display on clicking link message
    }; 
    // Extending array from params
    $.extend(true, options, params);

    var msgclass =  succ_bg ; // default success message will shown
    if(options[ type ] ==  error ){
        msgclass =  error_bg ; // over write the message to error message
    } else if(options[ type ] ==  information ){
        msgclass =  info_bg ; // over write the message to information message
    } else if(options[ type ] ==  warning ){
        msgclass =  warn_bg ; // over write the message to warning message
    } 

    // Parent Div container
    var container =  <div id="info_message" class=" +msgclass+ "><div class="center_auto"><div class="info_message_text message_area"> ;
    container += options[ message ];
    container +=  </div><div class="info_close_btn button_area" onclick="return closeNotification()"></div><div class="clearboth"></div> ;
    container +=  </div><div class="info_more_descrption"></div></div> ;

    $notification = $(container);

    // Appeding notification to Body
    $( body ).append($notification);

    var divHeight = $( div#info_message ).height();
    // see CSS top to minus of div height
    $( div#info_message ).css({
        top :  - +divHeight+ px 
    });

    // showing notification message, default it will be hidden
    $( div#info_message ).show();

    // Slide Down notification message after startAfter seconds
    slideDownNotification(options[ showAfter ], options[ autoClose ],options[ duration ]);

    $( .link_notification ).live( click , function(){
        $( .info_more_descrption ).html(options[ description ]).slideDown( fast );
    });

}
// function to close notification message
// slideUp the message
function closeNotification(duration){
    var divHeight = $( div#info_message ).height();
    setTimeout(function(){
        $( div#info_message ).animate({
            top:  - +divHeight
        }); 
        // removing the notification from body
        setTimeout(function(){
            $( div#info_message ).remove();
        },200);
    }, parseInt(duration * 1000));   



}

// sliding down the notification
function slideDownNotification(startAfter, autoClose, duration){    
    setTimeout(function(){
        $( div#info_message ).animate({
            top: 0
        }); 
        if(autoClose){
            setTimeout(function(){
                closeNotification(duration);
            }, duration);
        }
    }, parseInt(startAfter * 1000));    
}

Answer 1

仅这样说:

<script type="text/javascript">
    $(document).ready(function() {
       showNotification({
            type : "success",
            message: "This is a sample success notification"
       }); 
    });
</script>

Answer 2

采用直截了当的 j:

<script type="text/javascript">
    function showSuccessMessage(){
        showNotification({
            type : "success",
            message: "This is a sample success notification"
        });    
    } 

    window.onload = function() { 
        showSuccessMessage();
    }
</script>

Or jquery:

<script type="text/javascript">
    function showSuccessMessage(){
        showNotification({
            type : "success",
            message: "This is a sample success notification"
        });    
    } 

    $(window).load(function(){
        showSuccessMessage();
    });

</script>

友情链接