From dcf75697ecd243517b23d8ef440f772d91f699c0 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jul 2012 18:28:39 -0700 Subject: some progress on affix plugin --- docs/templates/layout.mustache | 1 + docs/templates/pages/base-css.mustache | 2 +- docs/templates/pages/components.mustache | 2 +- docs/templates/pages/customize.mustache | 2 +- docs/templates/pages/extend.mustache | 2 +- docs/templates/pages/getting-started.mustache | 2 +- docs/templates/pages/javascript.mustache | 103 ++++++++++++++++++++++---- docs/templates/pages/scaffolding.mustache | 2 +- 8 files changed, 95 insertions(+), 21 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 879e939a1..23e84e64c 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -121,6 +121,7 @@ + {{#production}} diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 481974591..bce47f2bd 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -14,7 +14,7 @@ ================================================== -->
-
    +
    • {{_i}}Typography{{/i}}
    • {{_i}}Code{{/i}}
    • {{_i}}Tables{{/i}}
      • diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 9b1e60521..c4ca32016 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -14,7 +14,7 @@ ================================================== -->
      -
        +
        • {{_i}}Dropdowns{{/i}}
        • {{_i}}Button groups{{/i}}
        • {{_i}}Button dropdowns{{/i}}
          • diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache index 8d14be78c..34758a207 100644 --- a/docs/templates/pages/customize.mustache +++ b/docs/templates/pages/customize.mustache @@ -14,7 +14,7 @@ ================================================== -->
          -
            +
            • {{_i}}1. Choose components{{/i}}
            • {{_i}}2. Select jQuery plugins{{/i}}
            • {{_i}}3. Customize variables{{/i}}
              • diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache index e32833b0e..51b14270d 100644 --- a/docs/templates/pages/extend.mustache +++ b/docs/templates/pages/extend.mustache @@ -14,7 +14,7 @@ ================================================== -->
              -
                +
                • {{_i}}Built with LESS{{/i}}
                • {{_i}}Compiling Bootstrap{{/i}}
                • {{_i}}Use as static assets{{/i}}
                  • diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index e3f2c7ae7..0e6349e02 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -12,7 +12,7 @@
                  -
                    +
                    • {{_i}}Download{{/i}}
                    • {{_i}}File structure{{/i}}
                    • {{_i}}What's included{{/i}}
                      • diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 062e02863..c5afdfb06 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -14,7 +14,8 @@ ================================================== -->
                      -

                      {{_i}}Individual or compiled{{/i}}

                      -

                      {{_i}}If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of these plugins.{{/i}}

                      +

                      {{_i}}If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of the plugins listed on this page.{{/i}}

                      {{_i}}Data attributes{{/i}}

                      -

                      {{_i}}...{{/i}}

                      +

                      {{_i}}You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.{{/i}}

                      + +

                      {{_i}}That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:{{/i}} + +

                      +  $('body').off('.data-api')
+
                      + +

                      {{_i}}Alternatively, to target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:{{/i}}

                      + +
                      +  $('body').off('.alert.data-api')
+

                      {{_i}}Programmatic API{{/i}}

                      -

                      {{_i}}...{{/i}}

                      +

                      {{_i}}We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.{{/i}}

                      + +
                      +  $(".btn.danger").button("toggle").addClass("fat")
+
                      + +

                      {{_i}}All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):{{/i}}

                      +
                      +  $("#myModal").modal()                       // initialized with defaults
+  $("#myModal").modal({ keyboard: false })   // initialized with no keyboard
+  $("#myModal").modal('show')                // initializes and invokes show immediately
                      
+
                      - {{! Thought: consider porting much of the JS readme here? }} +

                      {{_i}}Each plugin also exposes it's raw constructor on a `Constructor` property: $.fn.popover.Constructor. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel=popover]').data('popover').{{/i}}

                      + + +

                      {{_i}}Events{{/i}}

                      +

                      {{_i}}Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and it's past participle form (ex. shown) is trigger on the completion of an action.{{/i}}

                      + +

                      {{_i}}All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.{{/i}}

                      + +
                      +  $('#myModal').on('show', function (e) {
+      if (!data) return e.preventDefault() // stops modal from being shown
+  })
+
                      @@ -1512,23 +1548,60 @@ $('.carousel').carousel({ ================================================== -->
                      -

                      - {{_i}}Affix{{/i}} - {{_i}}Make an element stick in place{{/i}} -

                      +

                      {{_i}}Affix{{/i}} bootstrap-affix.js

                      -

                      {{_i}}...{{/i}}

                      -

                      {{_i}}...{{/i}}

                      -
                      +

                      {{_i}}Example{{/i}}

                      +

                      {{_i}}The subnavigation on the left is a live demo of the affix plugin.{{/i}}

                      + +
                      + +

                      {{_i}}Usage{{/i}}

                      + +

                      {{_i}}Via data attributes{{/i}}

                      +

                      {{_i}}To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. When the affix offsets are satisified, an .affix class is added to the element. {{/i}}

                      + + 
                      <div data-spy="affix">...</body>
                      + +
                      + {{_i}}Heads up!{{/i}} + {{_i}}It's up to you to maintain the dimensions of an element when toggling between relative and fixed positions. To see how this is done, refer to this pages subnavigation.{{/i}}
                      + +

                      {{_i}}Via javascript{{/i}}

                      +

                      {{_i}}Call the affix plugin via javascript:{{/i}}

                      + 
                      $('#navbar').affix()
                      + +

                      {{_i}}Methods{{/i}}

                      +

                      .scrollspy('refresh')

                      +

                      {{_i}}When using affix in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:{{/i}}

                      -...
+$('[data-spy="affix"]').each(function () {
+  $(this).affix('refresh')
+});
                      -
                      - +

                      {{_i}}Options{{/i}}

                      +

                      {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-offset-y="".{{/i}}

                      + + + + + + + + + + + + + + + + + +
                      {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
                      {{_i}}offset{{/i}}{{_i}}number | object{{/i}}{{_i}}10{{/i}}{{_i}}Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object offset: { x: 10 }.{{/i}}
                      {{! /span9 }}
                  {{! row}} diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 4b9d4c5b2..4759277ee 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -15,7 +15,7 @@ ================================================== -->
                  -