2012-01-14 6 views
1

jquery 알림을 표시하고 싶지만 클릭시 onclick이 실행됩니다. 페이지로드시 필요합니다. 나는 함수를 볼 수있다 : onclick="return showSuccessMessage(). onload로 변경하려고 시도했지만 도움이되지 않았습니다. 어떤 아이디어?페이지로드시 jquery 알림 (onclick이 아님)

코드 :

<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

+0

아니요 .. 아니요.하지만 많은 양의 코드 스 니펫이 포함 된 답변에 주석이 적절하지 않기 때문에 새로운 질문을하거나 질문을 작성하는 것이 좋습니다. – PrimosK

0

을 바로 자바 스크립트를 사용 : 내부 자바 스크립트와

HMTL

<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

관련 문제