mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-28 14:29:07 +02:00
Code Issues Releases Wiki Activity

markdownify js alerts

Browse Source
This commit is contained in:
Mark Otto
2014-07-13 00:53:59 -07:00
parent d1f699765e
commit 5a823fba7e
1 changed files with 72 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
docs/javascript/alerts.md
View File

@@ -3,20 +3,22 @@ layout: page
title: Alerts title: Alerts
--- ---
<div class="bs-docs-section"> Add dismiss functionality to all alert messages with this plugin.
<h1 id="alerts" class="page-header">Alert messages <small>alert.js</small></h1>
<h2 id="alerts-examples">Example alerts</h2> ## Examples
<p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-example"> {% example html %}
<div class="alert alert-warning alert-dismissible fade in" role="alert"> <div class="alert alert-warning alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div> </div>
</div><!-- /example --> {% endexample %}
<div class="bs-example"> {% example html %}
<div class="alert alert-danger alert-dismissible fade in" role="alert"> <div class="alert alert-danger alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4>Oh snap! You got an error!</h4> <h4>Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
@@ -24,31 +26,45 @@ title: Alerts
<button type="button" class="btn btn-danger">Take this action</button> <button type="button" class="btn btn-danger">Take this action</button>
<button type="button" class="btn btn-secondary">Or do this</button> <button type="button" class="btn btn-secondary">Or do this</button>
</p> </p>
</div> </div>
</div><!-- /example --> {% endexample %}
## Usage
<h2 id="alerts-usage">Usage</h2> Enable dismissal of an alert via JavaScript:
<p>Enable dismissal of an alert via JavaScript:</p>
{% highlight js %}$(".alert").alert(){% endhighlight %}
<h3>Markup</h3> {% highlight js %}
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p> $(".alert").alert()
{% highlight html %}<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>{% endhighlight %} {% endhighlight %}
<h3>Methods</h3> ### Markup
<h4>$().alert()</h4> Just add `data-dismiss="alert"` to your close button to automatically give an alert close functionality.
<p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
<h4>.alert('close')</h4> {% highlight html %}
<p>Closes an alert.</p> <button type="button" class="close" data-dismiss="alert">
{% highlight js %}$(".alert").alert('close'){% endhighlight %} <span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
{% endhighlight %}
### Methods
<h3>Events</h3> #### $().alert()
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
<div class="table-responsive"> Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the `.fade` and `.in` class already applied to them.
#### .alert('close')
Closes an alert.
{% highlight js %}$(".alert").alert('close'){% endhighlight %}
### Events
Bootstrap's alert class exposes a few events for hooking into alert functionality.
<div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
@@ -67,10 +83,10 @@ title: Alerts
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.table-responsive --> </div>
{% highlight js %} {% highlight js %}
$('#my-alert').on('closed.bs.alert', function () { $('#my-alert').on('closed.bs.alert', function () {
// do something… // do something…
}) })
{% endhighlight %} {% endhighlight %}
</div>