diff options
| -rw-r--r-- | docs/javascript.html | 42 | ||||
| -rw-r--r-- | js/README.md | 89 | ||||
| -rw-r--r-- | js/bootstrap-alerts.js | 45 | ||||
| -rw-r--r-- | js/bootstrap-buttons.js | 25 | ||||
| -rw-r--r-- | js/bootstrap-collapsible.js | 37 | ||||
| -rw-r--r-- | js/bootstrap-dropdown.js | 2 | ||||
| -rw-r--r-- | js/bootstrap-modal.js | 6 |
7 files changed, 201 insertions, 45 deletions
diff --git a/docs/javascript.html b/docs/javascript.html index 28f5e30356..f5f0520c3a 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -39,7 +39,6 @@ <script src="../js/bootstrap-buttons.js"></script> <script> $(function () { - // twipsy demo $("a[rel=twipsy]").twipsy({ live: true @@ -200,9 +199,9 @@ </tbody> </table> <h3>Markup</h3> - <p>You can activate modals on your page easily without having to write a single line of javascript. Just give an element a <code>data-controls-modal</code> attribute which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as data attributes.</p> + <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as additoinal data attributes.</p> <pre class="prettyprint linenums"> -<a class="btn" data-controls-modal="my-modal" data-backdrop="true" >Launch Modal</a> +<a class="btn" data-toggle="modal" data-target="my-modal" >Launch Modal</a> </pre> <p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p> <h3>Methods</h3> @@ -269,7 +268,9 @@ $('#my-modal').bind('hidden', function () { <a href="#" class="btn" data-modal-dismiss="true" >Close</a> </div> </div> - <button data-controls-modal="modal-from-dom" class="btn danger">Launch Modal</button> + <button data-toggle="modal" data-target="modal-from-dom" class="btn danger"> + Launch Modal + </button> </div> </div> </section> @@ -849,6 +850,39 @@ $('.tabs a').bind('change', function (e) { </section> + <!-- Collapsible + ================================================== --> + + <section id="collapsible"> + <div class="page-header"> + <h1>Collapsible <small>bootstrap-collapsible.js</small></h1> + </div> + <div class="row"> + <div class="span3 columns"> + <p>collapsible collapsible collapsible bitches.</p> + <a href="../js/bootstrap-collapsible.js" target="_blank" class="btn primary">Download</a> + </div> + <div class="span9 columns"> + <h3>Using bootstrap-collapsible.js</h3> + <pre class="prettyprint linenums">$(".collapsible").collapsible()</pre> + <h3>Markup</h3> + <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p> + <pre class="prettyprint linenums"><a class="close" data-dismiss="alert" href="#">&times;</a></pre> + <h3>Methods</h3> + + <h3>Demo</h3> + + <button data-toggle="collapse"></butotn> + <div> + + </div> + + + </div> + </div> + </section> + + <!-- Footer ================================================== --> <footer class="footer"> diff --git a/js/README.md b/js/README.md new file mode 100644 index 0000000000..98be75421d --- /dev/null +++ b/js/README.md @@ -0,0 +1,89 @@ +2.0 BOOTSTRAP JS PHILSOPHY +These are the highlevel design rules which guide the developement of Bootstrap's js plugins. + +--- + +### DATA-ATTRIBUTE API + +We believe you should be able to use all plugins provided by bootstrap purely through the markup api without writing a single line of javascript. + +We acknoledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute api by unbinding all events on the body namespaced with `'data-api'`. This looks like this: + + $('body').unbind('.data-api') + +To target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this: + + $('body').unbind('.alert.data-api') + +--- + +### PROGRAMATIC API + +We also believe you should be able to use all plugins provided by bootstrap purely through the JS api. + +All pubilc APIs should be a single, chainable method, and return the collection acted upon. + + $(".btn.danger").button("toggle").addClass("fat") + +All methods should accept an optional options object, a string which targets a particular method, or null which innitiates the default behavior: + + $("#myModal").modal() // initialized with defaults + +--- + +### PLUGIN OPTIONS + +Options should be sparse and add universal value. We should pick the right defaults. + +All plugins should have a default object which can be modified to effect all instance's default options. The defaults object should be available via `$.fn.plugin.defaults`. + + $.fn.modal.defaults = { … } + +An options definiton should take the following form: + + *noun*: *adjective* - describes or modifies a quality of an instance + +examples: + + backdrop: true + keyboard: false + placement: 'above' + +--- + +### PLUGIN EVENTS + +All events should have an infinitive and past participle form. The infinitive is fired just before an action takes place, the past participle on completion of the action. + + show | shown + hide | hidden + change | changed + +--- + + +### DATA ATTRIBUTES + +Data attributes should take the following form: + +data-*(verb)* - defines main interaction +data-target - defined on controller element (if element interacts with an element other than self) +data-*(noun)* - defines options for element invocation + +examples: + + // control other targets + data-toggle="modal" data-target="#foo" + data-toggle="view" data-target="#foo" + + // defined on element they control + data-spy="scroll" + + data-dismiss="modal" + data-dismiss="alert" + + data-toggle="dropdown" + + data-toggle="button" + data-toggle="buttons-checkbox" + data-toggle="buttons-radio"
\ No newline at end of file diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js index 600440e40e..565f831936 100644 --- a/js/bootstrap-alerts.js +++ b/js/bootstrap-alerts.js @@ -25,25 +25,22 @@ /* ALERT CLASS DEFINITION * ====================== */ - var Alert = function ( content, options ) { - if (options == 'close') return this.close.call(content) - this.settings = $.extend({}, $.fn.alert.defaults, options) - this.$element = $(content) - .delegate(this.settings.selector, 'click', this.close) - } + var dismiss = '[data-dismiss="alert"]' + , Alert = function ( el, close ) { + $(el).delegate(dismiss, 'click', this.close) + } Alert.prototype = { - close: function (e) { + close: function ( e ) { var $element = $(this) - , className = 'alert-message' - $element = $element.hasClass(className) ? $element : $element.parent() + $element = $element.hasClass('alert-message') ? $element : $element.parent() e && e.preventDefault() $element.removeClass('in') - function removeElement () { + function removeElement() { $element.remove() } @@ -59,32 +56,22 @@ * ======================= */ $.fn.alert = function ( options ) { - return this.each(function () { var $this = $(this) - , data - - if ( typeof options == 'string' ) { - - data = $this.data('alert') - - if (typeof data == 'object') { - return data[options].call( $this ) - } - - } - - $(this).data('alert', new Alert( this, options )) - + , data = $this.data('alert') + if (!data) $this.data('alert', (data = new Alert(this))) + if (typeof options == 'string') data[options].call($this) }) } - $.fn.alert.defaults = { - selector: '[data-dismiss="alert"]' - } + $.fn.alert.Alert = Alert + + + /* ALERT DATA-API + * ============== */ $(function () { - new Alert( $('body') ) + $('body').delegate(dismiss, 'click.alert.data-api', Alert.prototype.close) }) }( window.jQuery || window.ender );
\ No newline at end of file diff --git a/js/bootstrap-buttons.js b/js/bootstrap-buttons.js index 759a65f842..5ca678df8b 100644 --- a/js/bootstrap-buttons.js +++ b/js/bootstrap-buttons.js @@ -21,6 +21,11 @@ "use strict" + /* BUTTON PUBLIC CLASS DEFINITION + * ============================== */ + + var Button + function setState(el, state) { var d = 'disabled' , $el = $(el) @@ -43,15 +48,17 @@ var $el = $(el) , $parent = $el.parent('[data-toggle="buttons-radio"]') - if ($parent) { - $parent - .find('.active') - .removeClass('active') - } + $parent && $parent + .find('.active') + .removeClass('active') $el.toggleClass('active') } + + /* BUTTON PLUGIN DEFINITION + * ======================== */ + $.fn.button = function(options) { return this.each(function () { if (options == 'toggle') return toggle(this) @@ -63,8 +70,14 @@ loadingText: 'loading...' } + $.fn.button.Button = Button + + + /* BUTTON DATA-API + * =============== */ + $(function () { - $('body').delegate('[data-toggle^=button]', 'click', function (e) { + $('body').delegate('[data-toggle^=button]', 'click.button.data-api', function (e) { $(e.srcElement).button('toggle') }) }) diff --git a/js/bootstrap-collapsible.js b/js/bootstrap-collapsible.js new file mode 100644 index 0000000000..273eb22720 --- /dev/null +++ b/js/bootstrap-collapsible.js @@ -0,0 +1,37 @@ +/* ============================================================= + * bootstrap-collapsible.js v2.0.0 + * http://twitter.github.com/bootstrap/javascript.html#collapsible + * ============================================================= + * Copyright 2011 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============================================================ */ + +(function( $ ){ + + var Collapsible = function ( element, options ) {} + + Collapsible.prototype = {} + + /* collapsible PLUGIN DEFINITION + * ======================= */ + + $.fn.collapsible = function ( options ) { + + return this.each(function () { + new Collapsible(this, options) + }) + } + + +})( window.jQuery || window.ender )
\ No newline at end of file diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index bb7d11b1fa..ef243fc6f6 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -59,7 +59,7 @@ * =================================== */ $(function () { - $('html').bind("click", clearMenus) + $('html').bind("click.dropdown.data-api", clearMenus) $('body').dropdown(s) }) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index e15b1237ce..16c805a4e7 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -194,10 +194,6 @@ }) } - if ( options === true ) { - return modal - } - if ( typeof options == 'string' ) { modal[options]() } else if ( modal ) { @@ -220,7 +216,7 @@ * ========================== */ $(document).ready(function () { - $('body').delegate('[data-controls-modal]', 'click', function (e) { + $('body').delegate('[data-controls-modal]', 'click.modal.data-api', function (e) { e.preventDefault() var $this = $(this) $('#' + $this.attr('data-controls-modal')).modal( $this.data() ) |