<!DOCTYPE html><html><head><metacharset="utf-8"/><title>toastr示例</title><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1"><linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.css"rel="stylesheet"><linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap-theme.css"rel="stylesheet"><linkhref="build/toastr.css"rel="stylesheet"type="text/css"/><style>.row{margin-left: 0;}</style></head><bodyclass="container"><sectionclass="row"><h1>toastr</h1><divclass="well row"><divclass="row"><divclass="span4"><divclass="control-group"><divclass="controls"><labelclass="control-label"for="title">Title</label><inputid="title"type="text"class="input-large"placeholder="Enter a title ..."/><labelclass="control-label"for="message">Message</label><textareaclass="input-large"id="message"rows="3"placeholder="Enter a message ..."></textarea></div></div><divclass="control-group"><divclass="controls"><labelclass="checkbox"for="closeButton"><inputid="closeButton"type="checkbox"value="checked"class="input-mini"/>Close Button
</label></div><divclass="controls"><labelclass="checkbox"for="addBehaviorOnToastClick"><inputid="addBehaviorOnToastClick"type="checkbox"value="checked"class="input-mini"/>Add behavior on toast click
</label></div><divclass="controls"><labelclass="checkbox"for="addBehaviorOnToastCloseClick"><inputdisabledid="addBehaviorOnToastCloseClick"type="checkbox"value="checked"class="input-mini"/>Add behavior on toast close button click
</label></div><divclass="controls"><labelclass="checkbox"for="debugInfo"><inputid="debugInfo"type="checkbox"value="checked"class="input-mini"/>Debug
</label></div><divclass="controls"><labelclass="checkbox"for="progressBar"><inputid="progressBar"type="checkbox"value="checked"class="input-mini"/>Progress Bar
</label></div><divclass="controls"><labelclass="checkbox"for="rtl"><inputid="rtl"type="checkbox"value="checked"class="input-mini"/>Right-To-Left
</label></div><divclass="controls"><labelclass="checkbox"for="preventDuplicates"><inputid="preventDuplicates"type="checkbox"value="checked"class="input-mini"/>Prevent Duplicates
</label></div><divclass="controls"><labelclass="checkbox"for="addClear"><inputid="addClear"type="checkbox"value="checked"class="input-mini"/>Add button to force clearing a toast, ignoring focus
</label></div><divclass="controls"><labelclass="checkbox"for="newestOnTop"><inputid="newestOnTop"type="checkbox"value="checked"class="input-mini"/>Newest on top
</label></div></div></div><divclass="span2"><divclass="control-group"id="toastTypeGroup"><divclass="controls"><label>Toast Type</label><labelclass="radio"><inputtype="radio"name="toasts"value="success"checked/>Success
</label><labelclass="radio"><inputtype="radio"name="toasts"value="info"/>Info
</label><labelclass="radio"><inputtype="radio"name="toasts"value="warning"/>Warning
</label><labelclass="radio"><inputtype="radio"name="toasts"value="error"/>Error
</label></div></div><divclass="control-group"id="positionGroup"><divclass="controls"><label>Position</label><labelclass="radio"><inputtype="radio"name="positions"value="toast-top-right"checked/>Top Right
</label><labelclass="radio"><inputtype="radio"name="positions"value="toast-bottom-right"/>Bottom Right
</label><labelclass="radio"><inputtype="radio"name="positions"value="toast-bottom-left"/>Bottom Left
</label><labelclass="radio"><inputtype="radio"name="positions"value="toast-top-left"/>Top Left
</label><labelclass="radio"><inputtype="radio"name="positions"value="toast-top-full-width"/>Top Full Width
</label><labelclass="radio"><inputtype="radio"name="positions"value="toast-bottom-full-width"/>Bottom Full Width
</label><labelclass="radio"><inputtype="radio"name="positions"value="toast-top-center"/>Top Center
</label><labelclass="radio"><inputtype="radio"name="positions"value="toast-bottom-center"/>Bottom Center
</label></div></div></div><divclass="span2"><divclass="control-group"><divclass="controls"><labelclass="control-label"for="showEasing">Show Easing</label><inputid="showEasing"type="text"placeholder="swing, linear"class="input-mini"value="swing"/><labelclass="control-label"for="hideEasing">Hide Easing</label><inputid="hideEasing"type="text"placeholder="swing, linear"class="input-mini"value="linear"/><labelclass="control-label"for="showMethod">Show Method</label><inputid="showMethod"type="text"placeholder="show, fadeIn, slideDown"class="input-mini"value="fadeIn"/><labelclass="control-label"for="hideMethod">Hide Method</label><inputid="hideMethod"type="text"placeholder="hide, fadeOut, slideUp"class="input-mini"value="fadeOut"/></div></div></div><divclass="span3"><divclass="control-group"><divclass="controls"><labelclass="control-label"for="showDuration">Show Duration</label><inputid="showDuration"type="number"placeholder="ms"class="input-mini"value="300"/><labelclass="control-label"for="hideDuration">Hide Duration</label><inputid="hideDuration"type="number"placeholder="ms"class="input-mini"value="1000"/><labelclass="control-label"for="timeOut">Time out</label><inputid="timeOut"type="number"placeholder="ms"class="input-mini"value="5000"/><labelclass="control-label"for="extendedTimeOut">Extended time out</label><inputid="extendedTimeOut"type="number"placeholder="ms"class="input-mini"value="1000"/></div></div></div></div><divclass="row"><buttontype="button"class="btn btn-primary"id="showtoast">Show Toast</button><buttontype="button"class="btn btn-danger"id="cleartoasts">Clear Toasts</button><buttontype="button"class="btn btn-danger"id="clearlasttoast">Clear Last Toast</button></div><divclass="row"style='margin-top: 25px;'><preid='toastrOptions'></pre></div></div></section><footerclass="row"><h2>Links</h2><ul><li><ahref="http://nuget.org/packages/toastr">NuGet</a></li><li><ahref="https://github.com/CodeSeven/toastr">GitHub</a></li></ul></footer><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script><scriptsrc="toastr.js"></script><scripttype="text/javascript">$(function(){var i =-1;var toastCount =0;var $toastlast;vargetMessage=function(){var msgs =['My name is Inigo Montoya. You killed my father. Prepare to die!','<div><input class="input-small" value="textbox"/> <a href="http://johnpapa.net" target="_blank">This is a hyperlink</a></div><div><button type="button" id="okBtn" class="btn btn-primary">Close me</button><button type="button" id="surpriseBtn" class="btn" style="margin: 0 8px 0 8px">Surprise me</button></div>','Are you the six fingered man?','Inconceivable!','I do not think that means what you think it means.','Have fun storming the castle!'];
i++;if(i === msgs.length){
i =0;}return msgs[i];};vargetMessageWithClearButton=function(msg){
msg = msg ? msg :'Clear itself?';
msg +='<br /><br /><button type="button" class="btn clear">Yes</button>';return msg;};$('#closeButton').click(function(){if($(this).is(':checked')){$('#addBehaviorOnToastCloseClick').prop('disabled',false);}else{$('#addBehaviorOnToastCloseClick').prop('disabled',true);$('#addBehaviorOnToastCloseClick').prop('checked',false);}});$('#showtoast').click(function(){var shortCutFunction =$("#toastTypeGroup input:radio:checked").val();var msg =$('#message').val();var title =$('#title').val()||'';var $showDuration =$('#showDuration');var $hideDuration =$('#hideDuration');var $timeOut =$('#timeOut');var $extendedTimeOut =$('#extendedTimeOut');var $showEasing =$('#showEasing');var $hideEasing =$('#hideEasing');var $showMethod =$('#showMethod');var $hideMethod =$('#hideMethod');var toastIndex = toastCount++;var addClear =$('#addClear').prop('checked');
toastr.options ={
closeButton:$('#closeButton').prop('checked'),
debug:$('#debugInfo').prop('checked'),
newestOnTop:$('#newestOnTop').prop('checked'),
progressBar:$('#progressBar').prop('checked'),
rtl:$('#rtl').prop('checked'),
positionClass:$('#positionGroup input:radio:checked').val()||'toast-top-right',
preventDuplicates:$('#preventDuplicates').prop('checked'),
onclick:null};if($('#addBehaviorOnToastClick').prop('checked')){
toastr.options.onclick=function(){alert('You can perform some custom action after a toast goes away');};}if($('#addBehaviorOnToastCloseClick').prop('checked')){
toastr.options.onCloseClick=function(){alert('You can perform some custom action when the close button is clicked');};}if($showDuration.val().length){
toastr.options.showDuration =parseInt($showDuration.val());}if($hideDuration.val().length){
toastr.options.hideDuration =parseInt($hideDuration.val());}if($timeOut.val().length){
toastr.options.timeOut = addClear ?0:parseInt($timeOut.val());}if($extendedTimeOut.val().length){
toastr.options.extendedTimeOut = addClear ?0:parseInt($extendedTimeOut.val());}if($showEasing.val().length){
toastr.options.showEasing = $showEasing.val();}if($hideEasing.val().length){
toastr.options.hideEasing = $hideEasing.val();}if($showMethod.val().length){
toastr.options.showMethod = $showMethod.val();}if($hideMethod.val().length){
toastr.options.hideMethod = $hideMethod.val();}if(addClear){
msg =getMessageWithClearButton(msg);
toastr.options.tapToDismiss =false;}if(!msg){
msg =getMessage();}$('#toastrOptions').text('Command: toastr["'+ shortCutFunction
+'"]("'+ msg
+(title ?'", "'+ title :'')+'")\n\ntoastr.options = '+JSON.stringify(toastr.options,null,2));var $toast = toastr[shortCutFunction](msg, title);// Wire up an event handler to a button in the toast, if it exists
$toastlast = $toast;if(typeof $toast ==='undefined'){return;}if($toast.find('#okBtn').length){
$toast.delegate('#okBtn','click',function(){alert('you clicked me. i was toast #'+ toastIndex +'. goodbye!');
$toast.remove();});}if($toast.find('#surpriseBtn').length){
$toast.delegate('#surpriseBtn','click',function(){alert('Surprise! you clicked me. i was toast #'+ toastIndex +'. You could perform an action here.');});}if($toast.find('.clear').length){
$toast.delegate('.clear','click',function(){
toastr.clear($toast,{ force:true});});}});functiongetLastToast(){return $toastlast;}$('#clearlasttoast').click(function(){
toastr.clear(getLastToast());});$('#cleartoasts').click(function(){
toastr.clear();});})</script></body></html>