Commit d7e3bf72 authored by Jacob Thornton's avatar Jacob Thornton

add selector option to alerts, update modal settings strategy

parent 7e01ff8a
......@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Thu Sep 22 12:52:42 PDT 2011
* Date: Tue Oct 4 15:28:53 PDT 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
......@@ -173,7 +173,7 @@ textarea {
/* Variables.less
* Variables to customize the look and feel of Bootstrap
* ----------------------------------------------------- */
/* Variables.less
/* Mixins.less
* Snippets of reusable CSS to develop faster and keep code readable
* ----------------------------------------------------------------- */
/*
......
......@@ -195,7 +195,6 @@ $('#my-modal').bind('hidden', function () {
</div>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Launch Modal</button>
</div>
</div>
</section>
......@@ -659,6 +658,26 @@ $('#.tabs').bind('change', function (e) {
<pre class="prettyprint linenums">$(".alert-message").alert()</pre>
<h3>Markup</h3>
<p>Just add a <code>data-alert</code> attribute to your alert messages to automatically give them close functionality.</p>
<h3>Options</h3>
<table class="zebra-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>selector</td>
<td>string</td>
<td>'.close'</td>
<td>What selector to target for closing an alert.</td>
</tr>
</tbody>
</table>
<h3>Methods</h3>
<h4>$().alert()</h4>
<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>
......
......@@ -51,9 +51,10 @@
/* ALERT CLASS DEFINITION
* ====================== */
var Alert = function ( content, selector ) {
var Alert = function ( content, options ) {
this.settings = $.extend({}, $.fn.alert.defaults, options)
this.$element = $(content)
.delegate(selector || '.close', 'click', this.close)
.delegate(this.settings.selector, 'click', this.close)
}
Alert.prototype = {
......@@ -92,13 +93,19 @@
return $this.data('alert')[options]()
}
$(this).data('alert', new Alert( this ))
$(this).data('alert', new Alert( this, options ))
})
}
$.fn.alert.defaults = {
selector: '.close'
}
$(document).ready(function () {
new Alert($('body'), '.alert-message[data-alert] .close')
new Alert($('body'), {
selector: '.alert-message[data-alert] .close'
})
})
}( window.jQuery || window.ender );
\ No newline at end of file
......@@ -53,12 +53,10 @@
* ============================= */
var Modal = function ( content, options ) {
this.settings = $.extend({}, $.fn.modal.defaults)
this.settings = $.extend({}, $.fn.modal.defaults, options)
this.$element = $(content)
.delegate('.close', 'click.modal', $.proxy(this.hide, this))
$.extend( this.settings, options )
if ( this.settings.show ) {
this.show()
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment