From fb8987148aeae4b9aa2b4c28fa3ad5346b8c56b1 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 6 Sep 2011 23:20:56 -0700 Subject: move javascript from examples into docs --- docs/assets/css/docs.css | 25 +++ docs/assets/js/bootstrap-alerts.js | 72 ++++++++ docs/assets/js/bootstrap-dropdown.js | 24 +++ docs/assets/js/bootstrap-modal.js | 157 +++++++++++++++++ docs/assets/js/bootstrap-popover.js | 67 +++++++ docs/assets/js/bootstrap-twipsy.js | 288 ++++++++++++++++++++++++++++++ docs/index.html | 12 +- docs/javascript.html | 330 +++++++++++++++++++++++++++++++++++ 8 files changed, 969 insertions(+), 6 deletions(-) create mode 100644 docs/assets/js/bootstrap-alerts.js create mode 100644 docs/assets/js/bootstrap-dropdown.js create mode 100644 docs/assets/js/bootstrap-modal.js create mode 100644 docs/assets/js/bootstrap-popover.js create mode 100644 docs/assets/js/bootstrap-twipsy.js create mode 100644 docs/javascript.html (limited to 'docs') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 7918de1b9..2c1ebd731 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -213,6 +213,31 @@ div.topbar-wrapper div.topbar .topbar-inner { border-radius: 4px; } +/* Topbar special styles for js +-------------------------------------------------- */ +#bootstrap-js div.topbar-wrapper { + position: relative; + height: 40px; + margin: 5px 0 15px; +} + +#bootstrap-js div.topbar-wrapper div.topbar { + position: absolute; + margin: 0 -20px; +} + +#bootstrap-js div.topbar-wrapper div.topbar .fill { + padding-left: 20px; + padding-right: 20px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +#bootstrap-js div.topbar-wrapper .container { + width: auto; +} + /* Popover docs -------------------------------------------------- */ div.popover-well { diff --git a/docs/assets/js/bootstrap-alerts.js b/docs/assets/js/bootstrap-alerts.js new file mode 100644 index 000000000..e27ac6482 --- /dev/null +++ b/docs/assets/js/bootstrap-alerts.js @@ -0,0 +1,72 @@ +(function( $ ){ + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + var transitionEnd + + $(function () { + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + return support + })() + + // set CSS transition event type + if ( $.support.transition ) { + transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + } + + }) + + /* ALERT CLASS DEFINITION + * ====================== */ + + var Alert = function ( content ) { + var that = this + this.$element = $(content) + this.$element.delegate('.close', 'click', function (e) { + e.preventDefault() + that.close() + }) + } + + Alert.prototype = { + + close: function () { + var that = this + + this.$element.removeClass('in') + + function removeElement () { + that.$element.remove() + that.$element = null + } + + $.support.transition && this.$element.hasClass('fade') ? + this.$element.bind(transitionEnd, removeElement) : + removeElement() + } + + } + + + /* ALERT PLUGIN DEFINITION + * ======================= */ + + $.fn.alert = function ( options ) { + return this.each(function () { + new Alert(this) + }) + } + +})( jQuery || ender ) \ No newline at end of file diff --git a/docs/assets/js/bootstrap-dropdown.js b/docs/assets/js/bootstrap-dropdown.js new file mode 100644 index 000000000..9fbeb44b0 --- /dev/null +++ b/docs/assets/js/bootstrap-dropdown.js @@ -0,0 +1,24 @@ +(function( $ ){ + + /* DROPDOWN PLUGIN DEFINITION + * ========================== */ + + function clearMenus() { + $('a.menu').parent('li').removeClass('open') + } + + $(function () { + $('body').bind("click", clearMenus) + }) + + $.fn.dropdown = function ( options ) { + return this.each(function () { + $(this).delegate('a.menu', 'click', function (e) { + clearMenus() + $(this).parent('li').toggleClass('open') + return false + }) + }) + } + +})( jQuery || ender ) \ No newline at end of file diff --git a/docs/assets/js/bootstrap-modal.js b/docs/assets/js/bootstrap-modal.js new file mode 100644 index 000000000..4bc395e1c --- /dev/null +++ b/docs/assets/js/bootstrap-modal.js @@ -0,0 +1,157 @@ +(function( $ ){ + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + var transitionEnd + + $(function () { + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + return support + })() + + // set CSS transition event type + if ( $.support.transition ) { + transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + } + + }) + + + /* MODAL PUBLIC CLASS DEFINITION + * ============================= */ + + var Modal = function ( options ) { + this.settings = $.extend({}, $.fn.modal.defaults) + + if ( typeof options == 'string' ) { + this.settings.content = options + } else if ( options ) { + $.extend( this.settings, options ) + } + + return this + } + + Modal.prototype = { + + toggle: function () { + return this[!this.isOpen ? 'open' : 'close']() + } + + , open: function () { + var that = this + this.isOpen = true + + this.$element = $(this.settings.content) + + _.escape.call(this) + _.backdrop.call(this) + + this.$element + .delegate('.close', 'click', function (e) { e.preventDefault(); that.close() }) + .appendTo(document.body) + .show() + + setTimeout(function () { + that.$element.addClass('in') + that.$backdrop && that.$backdrop.addClass('in') + }, 1) + + return this + } + + , close: function () { + var that = this + + this.isOpen = false + + _.escape.call(this) + _.backdrop.call(this) + + this.$element.removeClass('in') + + function removeElement () { + that.$element.remove() + that.$element = null + } + + $.support.transition && this.$element.hasClass('fade') ? + this.$element.bind(transitionEnd, removeElement) : + removeElement() + + return this + } + + } + + + /* MODAL PRIVATE METHODS + * ===================== */ + + var _ = { + + backdrop: function () { + var that = this + , animate = this.$element.hasClass('fade') ? 'fade' : '' + if ( this.isOpen && this.settings.backdrop ) { + this.$backdrop = $('
') + .click(function () { that.close() }) + .appendTo(document.body) + } else if ( !this.isOpen && this.$backdrop ) { + this.$backdrop.removeClass('in') + + function removeElement() { + that.$backdrop.remove() + that.$backdrop = null + } + + $.support.transition && this.$element.hasClass('fade')? + this.$backdrop.bind(transitionEnd, removeElement) : + removeElement() + } + } + + , escape: function () { + var that = this + if ( this.isOpen && this.settings.closeOnEscape ) { + $('body').bind('keyup.modal.escape', function ( e ) { + if ( e.which == 27 ) { + that.close() + } + }) + } else if ( !this.isOpen ) { + $('body').unbind('keyup.modal.escape') + } + } + + } + + + /* MODAL PLUGIN DEFINITION + * ======================= */ + + $.fn.modal = function ( options ) { + options = options || {} + options.content = this + return new Modal(options) + } + + $.fn.modal.defaults = { + backdrop: false + , closeOnEscape: false + , content: false + } + +})( jQuery || ender ) \ No newline at end of file diff --git a/docs/assets/js/bootstrap-popover.js b/docs/assets/js/bootstrap-popover.js new file mode 100644 index 000000000..53284806f --- /dev/null +++ b/docs/assets/js/bootstrap-popover.js @@ -0,0 +1,67 @@ + /* EXTENDS BOOTSTRAP-TWIPSY.js + =========================== */ + +(function( $ ) { + + /* POPOVER PUBLIC CLASS DEFINITION + * ============================== */ + + var Popover = function ( element, options ) { + this.$element = $(element) + this.options = options + this.enabled = true + } + + Popover.prototype = $.extend({}, $.fn.twipsy.Twipsy.prototype, { + + setContent: function () { + var $tip = this.tip() + $tip.find('.title')[this.options.html ? 'html' : 'text'](this.getTitle()) + $tip.find('.content p')[this.options.html ? 'html' : 'text'](this.getContent()) + $tip[0].className = 'popover' + } + + , fixTitle: function () {} + + , getTitle: function () { + var title + if (typeof this.options.title == 'string') { + title = this.$element.attr('data-title') || this.options.title + } else if (typeof this.options.title == 'function') { + title = this.options.title.call(this.$element[0]) + } + return title + } + + , getContent: function () {content + var content + if (typeof this.options.content == 'string') { + content = this.$element.attr('data-content') || this.options.content + } else if (typeof this.options.content == 'function') { + content = this.options.content.call(this.$element[0]) + } + return content + } + + , tip: function() { + if (!this.$tip) { + this.$tip = $('
') + .html('

') + } + return this.$tip + } + + }) + + + /* POPOVER PLUGIN DEFINITION + * ======================= */ + + $.fn.popover = function (options) { + if (typeof options == 'object') options = $.extend({}, $.fn.popover.defaults, options) + $.fn.twipsy.initWith.call(this, options, Popover) + } + + $.fn.popover.defaults = $.extend({}, $.fn.twipsy.defaults, { content: '', placement: 'right'}) + +})( jQuery || ender ) \ No newline at end of file diff --git a/docs/assets/js/bootstrap-twipsy.js b/docs/assets/js/bootstrap-twipsy.js new file mode 100644 index 000000000..3d117a445 --- /dev/null +++ b/docs/assets/js/bootstrap-twipsy.js @@ -0,0 +1,288 @@ +/* Adapted from the original jQuery.tipsy by Jason Frame */ + +(function( $ ) { + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + var transitionEnd + + $(function () { + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + return support + })() + + // set CSS transition event type + if ( $.support.transition ) { + transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + } + + }) + + + /* TWIPSY PUBLIC CLASS DEFINITION + * ============================== */ + + var Twipsy = function ( element, options ) { + this.$element = $(element) + this.options = options + this.enabled = true + this.fixTitle() + } + + Twipsy.prototype = { + + show: function() { + var pos + , actualWidth + , actualHeight + , placement + , $tip + , tp + + if (this.getTitle() && this.enabled) { + $tip = this.tip() + this.setContent() + + if (this.options.animate) { + $tip.addClass('fade') + } + + $tip + .remove() + .css({ top: 0, left: 0, display: 'block' }) + .prependTo(document.body) + + pos = $.extend({}, this.$element.offset(), { + width: this.$element[0].offsetWidth + , height: this.$element[0].offsetHeight + }) + + actualWidth = $tip[0].offsetWidth + actualHeight = $tip[0].offsetHeight + placement = _.maybeCall(this.options.placement, this.$element[0]) + + switch (placement) { + case 'below': + tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'above': + tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'left': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset} + break + case 'right': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset} + break + } + + $tip + .css(tp) + .addClass(placement) + .addClass('in') + } + } + + , setContent: function () { + var $tip = this.tip() + $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle()) + $tip[0].className = 'twipsy' + } + + , hide: function() { + var that = this + , $tip = this.tip() + + $tip.removeClass('in') + + function removeElement () { + $tip.remove() + } + + $.support.transition && this.$tip.hasClass('fade') ? + $tip.bind(transitionEnd, removeElement) : + removeElement() + } + + , fixTitle: function() { + var $e = this.$element + if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { + $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title') + } + } + + , getTitle: function() { + var title + , $e = this.$element + , o = this.options + + this.fixTitle() + + if (typeof o.title == 'string') { + title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title) + } else if (typeof o.title == 'function') { + title = o.title.call($e[0]) + } + + title = ('' + title).replace(/(^\s*|\s*$)/, "") + + return title || o.fallback + } + + , tip: function() { + if (!this.$tip) { + this.$tip = $('
').html('
') + } + return this.$tip + } + + , validate: function() { + if (!this.$element[0].parentNode) { + this.hide() + this.$element = null + this.options = null + } + } + + , enable: function() { + this.enabled = true + } + + , disable: function() { + this.enabled = false + } + + , toggleEnabled: function() { + this.enabled = !this.enabled + } + + } + + + /* TWIPSY PRIVATE METHODS + * ====================== */ + + var _ = { + + maybeCall: function ( thing, ctx ) { + return (typeof thing == 'function') ? (thing.call(ctx)) : thing + } + + } + + + /* TWIPSY PLUGIN DEFINITION + * ======================== */ + + $.fn.twipsy = function (options) { + $.fn.twipsy.initWith.call(this, options, Twipsy) + } + + $.fn.twipsy.initWith = function (options, Constructor) { + + var twipsy + , binder + , eventIn + , eventOut + + if (options === true) { + return this.data('twipsy') + } else if (typeof options == 'string') { + twipsy = this.data('twipsy') + if (twipsy) { + twipsy[options]() + } + return this + } + + options = $.extend({}, $.fn.twipsy.defaults, options) + + function get(ele) { + var twipsy = $.data(ele, 'twipsy') + + if (!twipsy) { + twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options)) + $.data(ele, 'twipsy', twipsy) + } + + return twipsy + } + + function enter() { + var twipsy = get(this) + twipsy.hoverState = 'in' + + if (options.delayIn == 0) { + twipsy.show() + } else { + twipsy.fixTitle() + setTimeout(function() { + if (twipsy.hoverState == 'in') { + twipsy.show() + } + }, options.delayIn) + } + } + + function leave() { + var twipsy = get(this) + twipsy.hoverState = 'out' + if (options.delayOut == 0) { + twipsy.hide() + } else { + setTimeout(function() { + if (twipsy.hoverState == 'out') { + twipsy.hide() + } + }, options.delayOut) + } + } + + if (!options.live) { + this.each(function() { + get(this) + }) + } + + if (options.trigger != 'manual') { + binder = options.live ? 'live' : 'bind' + eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus' + eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur' + this[binder](eventIn, enter)[binder](eventOut, leave) + } + + return this + } + + $.fn.twipsy.Twipsy = Twipsy + + $.fn.twipsy.defaults = { + animate: true + , delayIn: 0 + , delayOut: 0 + , fallback: '' + , placement: 'above' + , html: false + , live: false + , offset: 0 + , title: 'title' + , trigger: 'hover' + } + + $.fn.twipsy.elementOptions = function(ele, options) { + return $.metadata ? $.extend({}, options, $(ele).metadata()) : options + } + +})( jQuery || ender ) \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 7d5803269..3a5773a96 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1307,17 +1307,17 @@ Lorem ipsum dolar sit amet illo error ipsum verita

Getting started

We've set out to make your interactive work with Bootstrap even more simple, offering several lightweight plugins for things like modals, tooltips, and other dynamic components. These plugins have been coded up to work with either jQuery or Ender, but we encourage you to extend and modify them to fit your development needs!

Do I need javascript?

-

The short answer is no... of course not! However, for those who need it, we've provided the plugins below to help you understand how to integrate bootstrap with javascript and to give you a quick lightweight option for dropping something in and getting the basic functionality right away! For more information on these plugins and to see demos of them in action, please refer to our plugin documentation page. +

The short answer is no... of course not! However, for those who need it, we've provided the plugins below to help you understand how to integrate bootstrap with javascript and to give you a quick lightweight option for dropping something in and getting the basic functionality right away! For more information on these plugins and to see demos of them in action, please refer to our plugin documentation page.

-
bootstrap-modal.js
+
bootstrap-modal.js
Our Modal plugin is a super slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.
-
bootstrap-alerts.js
+
bootstrap-alerts.js
The alert plugin is a super tiny class for adding close functionality to alerts.
-
bootstrap-dropdown.js
+
bootstrap-dropdown.js
This plugin is for adding dropdown to the bootstrap nav.
-
bootstrap-twipsy.js
+
bootstrap-twipsy.js
Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!
-
bootstrap-popover.js
+
bootstrap-popover.js
The popover plugin provides a simple interface for adding popovers to your application. It extends the boostrap-twipsy.js plugin, so be sure to grab that file as well when including popovers in your project!

diff --git a/docs/javascript.html b/docs/javascript.html new file mode 100644 index 000000000..8765b5770 --- /dev/null +++ b/docs/javascript.html @@ -0,0 +1,330 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Bootstrap JS

+ +
+
+
+ +
+ + + + + + + +
+
+

Alerts bootstrap-alerts.js

+
+
+
+

The alert plugin is a super tiny class for adding close functionality to alerts.

+ Download +
+
+

Using bootstrap-alert

+ 
$(".alert-message").alert()
+

Methods

+

$().alert

+

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.

+

Demo

+
+ × +

Holy guacamole! Best check yo self, you’re not looking too good.

+
+
+ × +

Oh snap! You got an error! 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.

+
+ Take this action Or do this +
+
+ +
+
+
+ + + + + + + +
+
+

Twipsy bootstrap-twipsy.js

+
+
+
+

Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!

+ Download +
+
+

Using bootstrap-twipsy.js

+ 
$('#example').twipsy(options)
+

Options

+
    +
  • animate (boolean) - apply a css fade transition to the tooltip.
    • +
  • delayIn (number) - delay before showing tooltip (ms).
    • +
  • delayOut (number) - delay before hiding tooltip (ms).
    • +
  • fallback (string) - fallback text to use when no tooltip text.
    • +
  • placement (string) - position of tooltip - above | below | left | right.
    • +
  • html (boolean) - is tooltip content HTML?
    • +
  • live (boolean) - use live event support?
    • +
  • offset (number) - pixel offset of tooltip from element.
    • +
  • title (string|function) - attribute/callback containing tooltip text.
    • +
  • trigger (string) - how tooltip is triggered - hover | focus | manual.
    • +
+

Methods

+

$().twipsy

+

Attaches a twipsy handler to an element collection.

+

Demo

+
+

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral. +

+
+ +
+
+
+ + + +
+
+

Popovers bootstrap-popover.js

+
+
+
+

The popover plugin provides a simple interface for adding popovers to your application. It extends the boostrap-twipsy.js plugin, so be sure to grab that file as well when including popovers in your project!

+ Download +
+
+

Using boostrap-popover.js

+ 
$('#example').popover(options)
+

Options

+
    +
  • animate (boolean) - apply a css fade transition to the popover.
    • +
  • delayIn (number) - delay before showing tooltip (ms).
    • +
  • delayOut (number) - delay before hiding tooltip (ms).
    • +
  • fallback (string) - fallback text to use when no tooltip text.
    • +
  • placement (string) - position of tooltip - above | below | left | right.
    • +
  • html (boolean) - is tooltip content HTML?
    • +
  • live (boolean) - use live event support?
    • +
  • offset (number) - pixel offset of tooltip from element.
    • +
  • title (string|function) - text for title in popover. Alternatively you can specify a data-title attribute.
    • +
  • content (string|function) - text for content in popover. Also you can specify a data-content attibute.
    • +
  • trigger (string) - how tooltip is triggered - hover | focus | manual.
    • +
+

Methods

+

$().popover

+

Initializes popovers for an element collection.

+

Demo

+ hover + +
+
+
+ +
+ + \ No newline at end of file -- cgit v1.2.3