提示语组件
<h4>1.提示语组件相关代码</h4>
<p>本文提示语分两种组件类型进行介绍：toastr、messenger，可根据需求选择不同样式</p>
<h5>1.1.toastr提示语</h5>
<ul>
<li>css文件引入：
<pre><code class="language-java"><link rel="stylesheet" href="/css/plugins/toastr/toastr.min.css"></code></pre></li>
<li>js文件引入：
<pre><code class="language-java"><script src="/js/plugins/toastr/toastr.min.js"></script></code></pre></li>
</ul>
<p>html代码：</p>
<pre><code class="language-java"><button type="button" class="btn btn-success" title="success" id="success">
success
</button></code></pre>
<blockquote>
<p>按钮是为了触发事件，在真实场景下只要有事件就可以通过js唤起提示框</p>
</blockquote>
<p>js代码：</p>
<pre><code class="language-java">$("#success").click(function(){
toastr.options = {
closeButton: false,
debug: false,
progressBar: true,
positionClass: "toast-top-center",
onclick: null,
showDuration: "3000",
hideDuration: "1000",
timeOut: "2000",
extendedTimeOut: "1000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut"
};
toastr.success("提交数据成功")
});</code></pre>
<blockquote>
<p>toastr.success 成功
toastr.info 提示信息
toastr.warning 警告
toastr.error 错误信息</p>
</blockquote>
<h5>1.2.提示语（message）</h5>
<ul>
<li>css文件引入：
<pre><code class="language-java"><link rel="stylesheet" href="/css/plugins/toastr/messenger/messenger.css">
<link rel="stylesheet" href="/css/plugins/toastr/messenger/messenger-theme-future.css"></code></pre></li>
<li>js文件引入：
<pre><code class="language-java"><script src="/js/plugins/toastr/messenger/messenger.js"></script></code></pre></li>
</ul>
<p>html代码：</p>
<pre><code class="language-java"><button onclick="showSuccess();" type="button" class="btn btn-default">操作成功</button></code></pre>
<p>js代码：</p>
<pre><code class="language-java">$(function () {
$._messengerDefaults = {
extraClasses: 'messenger-fixed messenger-theme-future messenger-on-top'
};
})
function showSuccess() {
$.globalMessenger().post({
message: "操作成功",//提示信息
type: 'success',//消息类型。error、info、success
hideAfter: 2,//多长时间消失
showCloseButton:true,//是否显示关闭按钮
hideOnNavigate: true //是否隐藏导航
});
}</code></pre>