2012-01-14 60 views
1

我想顯示jquery通知,但此刻它被觸發onclick。我想在頁面加載。我可以看到一個函數:onclick="return showSuccessMessage()。試圖改變onload,但它沒有幫助。有任何想法嗎??頁面加載jquery通知,而不是onclick

代碼:

HMTL內部的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> 

JQUERY:

/** 
* 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));  
} 

回答

1

就這樣稱呼它:

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

難道是很難做出的通知推送內容了嗎? – user1149048 2012-01-14 10:05:07

+0

不,它不是..但它會更好地要求/創建一個新的問題,因爲評論是不適合的方式,以大量的代碼片段的答案... – PrimosK 2012-01-14 10:24:18

0

採用了直板的javascript:

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

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

或者jQuery的:

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

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

</script> 
+0

難道要很難做出通知推下內容? – user1149048 2012-01-14 10:05:40

相關問題