diff options
Diffstat (limited to 'docs/templates/pages/javascript.mustache')
| -rw-r--r-- | docs/templates/pages/javascript.mustache | 89 |
1 files changed, 69 insertions, 20 deletions
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 7fd4c98d0..1ae3ffa5a 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -129,9 +129,9 @@ <h2>{{_i}}Static example{{/i}}</h2> <p>{{_i}}Below is a statically rendered modal.{{/i}}</p> <div class="well modal-example" style="background-color: #888; border: none;"> - <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1"> + <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1; max-width: 100%;"> <div class="modal-header"> - <a href="#" class="close" data-dismiss="modal">×</a> + <button class="close" data-dismiss="modal">×</button> <h3>{{_i}}Modal header{{/i}}</h3> </div> <div class="modal-body"> @@ -149,7 +149,7 @@ <!-- sample modal content --> <div id="myModal" class="modal hide fade"> <div class="modal-header"> - <a class="close" data-dismiss="modal" >×</a> + <button class="close" data-dismiss="modal">×</button> <h3>{{_i}}Modal Heading{{/i}}</h3> </div> <div class="modal-body"> @@ -226,7 +226,7 @@ <pre class="prettyprint linenums"> <div class="modal" id="myModal"> <div class="modal-header"> - <a class="close" data-dismiss="modal">×</a> + <button class="close" data-dismiss="modal">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> @@ -416,6 +416,20 @@ $('#myModal').on('hidden', function () { </li> ... </ul></pre> + <p>{{_i}}To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.{{/i}}</p> +<pre class="prettyprint linenums"> +<ul class="nav nav-pills"> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"> + {{_i}}Dropdown{{/i}} + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + ... + </ul> + </li> +</ul> +</pre> <h3>{{_i}}Methods{{/i}}</h3> <h4>$().dropdown()</h4> <p>{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}</p> @@ -494,6 +508,14 @@ $('#myModal').on('hidden', function () { <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}Navbar links must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>.{{/i}} </div> + <h3>{{_i}}Methods{{/i}}</h3> + <h4>.scrollspy('refresh')</h4> + <p>{{_i}}When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:{{/i}}</p> +<pre class="prettyprint linenums"> +$('[data-spy="scroll"]').each(function () { + var $spy = $(this).scrollspy('refresh') +}); +</pre> <h3>{{_i}}Options{{/i}}</h3> <table class="table table-bordered table-striped"> <thead> @@ -513,6 +535,21 @@ $('#myModal').on('hidden', function () { </tr> </tbody> </table> + <h3>{{_i}}Events{{/i}}</h3> + <table class="table table-bordered table-striped"> + <thead> + <tr> + <th style="width: 150px;">{{_i}}Event{{/i}}</th> + <th>{{_i}}Description{{/i}}</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{_i}}activate{{/i}}</td> + <td>{{_i}}This event fires whenever a new item becomes activated by the scrollspy.{{/i}}</td> + </tr> + </tbody> + </table> </div> </div> </section> @@ -533,7 +570,7 @@ $('#myModal').on('hidden', function () { <div class="span9 columns"> <h2>{{_i}}Example tabs{{/i}}</h2> <p>{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}</p> - <ul id="tab" class="nav nav-tabs"> + <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li> <li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li> <li class="dropdown"> @@ -560,10 +597,21 @@ $('#myModal').on('hidden', function () { </div> <hr> <h2>{{_i}}Using bootstrap-tab.js{{/i}}</h2> - <p>{{_i}}Enable tabbable tabs via javascript:{{/i}}</p> - <pre class="prettyprint linenums">$('#myTab').tab('show')</pre> + <p>{{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}</p> + <pre class="prettyprint linenums"> +$('#myTab a').click(function (e) { + e.preventDefault(); + $(this).tab('show'); +})</pre> + <p>{{_i}}You can activate individual tabs in several ways:{{/i}}</p> +<pre class="prettyprint linenums"> +$('#myTab a[href="#profile"]').tab('show'); // Select tab by name +$('#myTab a:first').tab('show'); // Select first tab +$('#myTab a:last').tab('show'); // Select last tab +$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed) +</pre> <h3>{{_i}}Markup{{/i}}</h3> - <p>{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.{{/i}}</p> + <p>{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the bootstrap tab styling.{{/i}}</p> <pre class="prettyprint linenums"> <ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li> @@ -574,10 +622,10 @@ $('#myModal').on('hidden', function () { <h3>{{_i}}Methods{{/i}}</h3> <h4>$().tab</h4> <p> - {{_i}}Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.{{/i}} + {{_i}}Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.{{/i}} </p> <pre class="prettyprint linenums"> -<ul class="nav nav-tabs"> +<ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">{{_i}}Home{{/i}}</a></li> <li><a href="#profile">{{_i}}Profile{{/i}}</a></li> <li><a href="#messages">{{_i}}Messages{{/i}}</a></li> @@ -593,7 +641,7 @@ $('#myModal').on('hidden', function () { <script> $(function () { - $('.tabs a:last').tab('show') + $('#myTab a:last').tab('show'); }) </script></pre> <h3>{{_i}}Events{{/i}}</h3> @@ -642,7 +690,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h2>{{_i}}Example use of Tooltips{{/i}}</h2> <p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p> <div class="tooltip-demo well"> - <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> 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 <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel="tooltip" title="Another one here too">really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}} + <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> 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 <a href="#" rel="tooltip" title="Another tooltip">have a</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 <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}} </p> </div> <hr> @@ -695,7 +743,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <td>{{_i}}number | object{{/i}}</td> <td>0</td> <td> - <p>{{_i}}delay showing and hiding the tooltip (ms){{/i}}</p> + <p>{{_i}}delay showing and hiding the tooltip (ms) - does not apply to manual trigger type{{/i}}</p> <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p> <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p> </td> @@ -804,7 +852,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <td>{{_i}}number | object{{/i}}</td> <td>0</td> <td> - <p>{{_i}}delay showing and hiding the popover (ms){{/i}}</p> + <p>{{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}</p> <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p> <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p> </td> @@ -817,7 +865,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </div> <h3>{{_i}}Markup{{/i}}</h3> <p> - {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.{{/i}} + {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}} </p> <h3>{{_i}}Methods{{/i}}</h3> <h4>$().popover({{_i}}options{{/i}})</h4> @@ -853,11 +901,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h2>{{_i}}Example alerts{{/i}}</h2> <p>{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}</p> <div class="alert fade in"> - <a class="close" data-dismiss="alert" href="#">×</a> + <button class="close" data-dismiss="alert">×</button> <strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}} </div> <div class="alert alert-block alert-error fade in"> - <a class="close" data-dismiss="alert" href="#">×</a> + <button class="close" data-dismiss="alert">×</button> <h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4> <p>{{_i}}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.{{/i}}</p> <p> @@ -963,7 +1011,7 @@ $('#my-alert').bind('closed', function () { <hr> <h2>{{_i}}Using bootstrap-button.js{{/i}}</h2> <p>{{_i}}Enable buttons via javascript:{{/i}}</p> - <pre class="prettyprint linenums">$('.tabs').button()</pre> + <pre class="prettyprint linenums">$('.nav-tabs').button()</pre> <h3>{{_i}}Markup{{/i}}</h3> <p>{{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}</p> <pre class="prettyprint linenums"> @@ -1025,7 +1073,8 @@ $('#my-alert').bind('closed', function () { <h3>{{_i}}About{{/i}}</h3> <p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p> <a href="assets/js/bootstrap-collapse.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a> - </div> + <p class="muted"><strong>*</strong> {{_i}}Requires the Transitions plugin to be included.{{/i}}</p> + </div> <div class="span9 columns"> <h2>{{_i}}Example accordion{{/i}}</h2> <p>{{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}</p> @@ -1232,7 +1281,7 @@ $('#myCollapsible').on('hidden', function () { <td>{{_i}}interval{{/i}}</td> <td>{{_i}}number{{/i}}</td> <td>5000</td> - <td>{{_i}}The amount of time to delay between automatically cycling an item.{{/i}}</td> + <td>{{_i}}The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.{{/i}}</td> </tr> <tr> <td>{{_i}}pause{{/i}}</td> |