new plugin "collapse" for collapsible lists and "accordion" like support
This commit is contained in:
Jacob Thornton
parent
96adf8f918
commit
98fddaa355
|
|
@ -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 Nov 24 13:45:21 PST 2011
|
||||
* Date: Fri Nov 25 12:09:37 PST 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).
|
||||
|
|
@ -1879,6 +1879,32 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
|||
.fade.in {
|
||||
opacity: 1;
|
||||
}
|
||||
.collapse {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.collapse.height {
|
||||
-webkit-transition: height 0.35s ease;
|
||||
-moz-transition: height 0.35s ease;
|
||||
-ms-transition: height 0.35s ease;
|
||||
-o-transition: height 0.35s ease;
|
||||
transition: height 0.35s ease;
|
||||
height: 0;
|
||||
}
|
||||
.collapse.height.in {
|
||||
height: auto;
|
||||
}
|
||||
.collapse.width {
|
||||
-webkit-transition: width 0.35s ease;
|
||||
-moz-transition: width 0.35s ease;
|
||||
-ms-transition: width 0.35s ease;
|
||||
-o-transition: width 0.35s ease;
|
||||
transition: width 0.35s ease;
|
||||
width: 0;
|
||||
}
|
||||
.collapse.width.in {
|
||||
width: auto;
|
||||
}
|
||||
.label {
|
||||
padding: 1px 3px 2px;
|
||||
font-size: 9.75px;
|
||||
|
|
|
|||
|
|
@ -278,6 +278,8 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
|||
.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;}
|
||||
.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
|
||||
.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;}
|
||||
.collapse{position:relative;overflow:hidden;}.collapse.height{-webkit-transition:height 0.35s ease;-moz-transition:height 0.35s ease;-ms-transition:height 0.35s ease;-o-transition:height 0.35s ease;transition:height 0.35s ease;height:0;}.collapse.height.in{height:auto;}
|
||||
.collapse.width{-webkit-transition:width 0.35s ease;-moz-transition:width 0.35s ease;-ms-transition:width 0.35s ease;-o-transition:width 0.35s ease;transition:width 0.35s ease;width:0;}.collapse.width.in{width:auto;}
|
||||
.label{padding:1px 3px 2px;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;background-color:#bfbfbf;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
|
||||
.label.warning{background-color:#f89406;}
|
||||
.label.success{background-color:#46a546;}
|
||||
|
|
|
|||
|
|
@ -473,3 +473,19 @@ h2 + table {
|
|||
}
|
||||
}
|
||||
|
||||
#accordion dt a{
|
||||
display:block;
|
||||
padding: 9px 15px;
|
||||
line-height: 1;
|
||||
background-color: whiteSmoke;
|
||||
border: 1px solid #EEE;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
|
||||
#accordion dt:first-child a {
|
||||
border-top-color:#eee;
|
||||
}
|
||||
|
||||
#accordion dd p {
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -37,6 +37,7 @@
|
|||
<script src="../js/bootstrap-twipsy.js"></script>
|
||||
<script src="../js/bootstrap-popover.js"></script>
|
||||
<script src="../js/bootstrap-buttons.js"></script>
|
||||
<script src="../js/bootstrap-collapse.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
// twipsy demo
|
||||
|
|
@ -141,6 +142,10 @@
|
|||
<td><a href="./javascript.html#buttons">bootstrap-buttons.js</a></td>
|
||||
<td>This plugin offers additional functionality for managing button state.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./javascript.html#collapse">bootstrap-collapse.js</a></td>
|
||||
<td>The collapse plugin offers simple, generic collapsible element support for making accordions and other collapsible ui components.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Is javascript necessary?</h3>
|
||||
|
|
@ -166,7 +171,7 @@
|
|||
</div>
|
||||
<div class="span9 columns">
|
||||
<h3>Using bootstrap-modal</h3>
|
||||
<pre class="prettyprint linenums">$('#my-modal').modal(options)</pre>
|
||||
<pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
|
||||
<h3>Options</h3>
|
||||
<table class="striped-table">
|
||||
<thead>
|
||||
|
|
@ -208,18 +213,18 @@
|
|||
<h4>.modal(options)</h4>
|
||||
<p>Activates your content as a modal. Accepts an optional options <code>object</code>.
|
||||
<pre class="prettyprint linenums">
|
||||
$('#my-modal').modal({
|
||||
$('#myModal').modal({
|
||||
keyboard: false
|
||||
})</pre>
|
||||
<h4>.modal('toggle')</h4>
|
||||
<p>Manually toggles a modal.</p>
|
||||
<pre class="prettyprint linenums">$('#my-modal').modal('toggle')</pre>
|
||||
<pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre>
|
||||
<h4>.modal('show')</h4>
|
||||
<p>Manually opens a modal.</p>
|
||||
<pre class="prettyprint linenums">$('#my-modal').modal('show')</pre>
|
||||
<pre class="prettyprint linenums">$('#myModal').modal('show')</pre>
|
||||
<h4>.modal('hide')</h4>
|
||||
<p>Manually hides a modal.</p>
|
||||
<pre class="prettyprint linenums">$('#my-modal').modal('hide')</pre>
|
||||
<pre class="prettyprint linenums">$('#myModal').modal('hide')</pre>
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
|
||||
<table class="striped-table">
|
||||
|
|
@ -250,7 +255,7 @@ $('#my-modal').modal({
|
|||
</table>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
$('#my-modal').bind('hidden', function () {
|
||||
$('#myModal').bind('hidden', function () {
|
||||
// do something ...
|
||||
})</pre>
|
||||
<h3>Demo</h3>
|
||||
|
|
@ -504,7 +509,7 @@ $('.tabs a').bind('change', function (e) {
|
|||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="my-tab-content" class="tab-content">
|
||||
<div id="myTabContent" class="tab-content">
|
||||
<div class="active tab-pane" id="home">
|
||||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||||
</div>
|
||||
|
|
@ -851,39 +856,147 @@ $('.tabs a').bind('change', function (e) {
|
|||
</section>
|
||||
|
||||
|
||||
<!-- Collapsible
|
||||
<!-- Collapse
|
||||
================================================== -->
|
||||
|
||||
<section id="collapsible">
|
||||
<section id="collapse">
|
||||
<div class="page-header">
|
||||
<h1>Collapsible <small>bootstrap-collapsible.js</small></h1>
|
||||
<h1>collapse <small>bootstrap-collapse.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<p>collapsible collapsible collapsible bitches.</p>
|
||||
<p>The collapse plugin offers simple, flexible collapsible element support for making accordions and other collapsible ui components.</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>Using bootstrap-collapse.js</h3>
|
||||
<pre class="prettyprint linenums">$(".collapse").collapse()</pre>
|
||||
<h3>Options</h3>
|
||||
<table class="striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>parent</td>
|
||||
<td>selector</td>
|
||||
<td>false</td>
|
||||
<td>If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toggle</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Toggles the collapsible element on invocation</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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>
|
||||
<p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<button class="btn danger" data-toggle="collapse" data-target="#demo">
|
||||
simple collapsible
|
||||
</button>
|
||||
|
||||
<div id="demo" class="collapse height in"> … </div></pre>
|
||||
<p><span class="label notice">Notice</span> To add accordion like group management to a collapsible control just add the additional data attribute <code>data-parent="#selector"</code>. Refer to the demo below to see this in action.</p>
|
||||
<h3>Methods</h3>
|
||||
<h4>.collapse(options)</h4>
|
||||
<p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
|
||||
<pre class="prettyprint linenums">
|
||||
$('#myCollapsible').collapse({
|
||||
toggle: false
|
||||
})</pre>
|
||||
<h4>.collapse('toggle')</h4>
|
||||
<p>Toggles a collapsible element to shown or hidden.</p>
|
||||
<h4>.collapse('show')</h4>
|
||||
<p>Shows a collapsible element.</p>
|
||||
<h4>.collapse('hide')</h4>
|
||||
<p>Hides a collapsible element.</p>
|
||||
<h3>Events</h3>
|
||||
<p>
|
||||
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
|
||||
</p>
|
||||
<table class="striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown</td>
|
||||
<td>This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide</td>
|
||||
<td>
|
||||
This event is fired immediately when the <code>hide</code> method has been called.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden</td>
|
||||
<td>This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
$('#myCollapsible').bind('hidden', function () {
|
||||
// do something ...
|
||||
})</pre>
|
||||
<h3>Demo</h3>
|
||||
|
||||
<button data-toggle="collapse"></butotn>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- single collapse -->
|
||||
<p>
|
||||
<button class="btn danger" data-toggle="collapse" data-target="#collapseDemoWrap">
|
||||
simple collapsible
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<div id="collapseDemoWrap" class="collapse height">
|
||||
<!-- group collapse -->
|
||||
<dl id="accordion" >
|
||||
<dt data-toggle="collapse" data-target="#collapseOne" data-parent="#accordion">
|
||||
<a href="#">Collapsible Group Item #1</a>
|
||||
</dt>
|
||||
<dd id="collapseOne" class="collapse height">
|
||||
<p>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</p>
|
||||
</dd>
|
||||
<dt data-toggle="collapse" data-target="#collapseTwo" data-parent="#accordion" >
|
||||
<a href="#">Collapsible Group Item #2</a>
|
||||
</dt>
|
||||
<dd id="collapseTwo" class="collapse height">
|
||||
<p>
|
||||
Blog +1 eiusmod, williamsburg chambray craft beer brooklyn. Trust fund squid whatever, sunt hoodie skateboard mustache 3 wolf moon art party wes anderson ad leggings officia. Skateboard keytar incididunt gluten-free retro sartorial, single-origin coffee et viral. Art party blog sunt, readymade fugiat 8-bit aesthetic ex echo park fanny pack keytar. Thundercats sustainable labore, mustache adipisicing tattooed dolore aute occaecat velit 8-bit raw denim letterpress. In occaecat freegan, next level single-origin coffee chambray excepteur nihil duis exercitation adipisicing ex sartorial twee squid. You probably haven't heard of them fugiat ea retro eiusmod quis cosby sweater, +1 fap sapiente biodiesel banksy.
|
||||
</p>
|
||||
</dd>
|
||||
<dt data-toggle="collapse" data-target="#collapseThree" data-parent="#accordion" >
|
||||
<a href="#">Collapsible Group Item #3</a>
|
||||
</dt>
|
||||
<dd id="collapseThree" class="collapse height">
|
||||
<p>
|
||||
Tempor gentrify pariatur nihil salvia, irony synth incididunt odio commodo brunch aute. Four loko est vice echo park wes anderson jean shorts, tempor ea vero locavore. Seitan DIY dolore readymade williamsburg viral. Dolor fap master cleanse delectus, ad butcher labore duis vice mollit cillum exercitation eu banh mi. Austin banksy 3 wolf moon locavore sed, helvetica next level VHS you probably haven't heard of them ethical odio. Incididunt locavore minim, do seitan consequat qui thundercats labore before they sold out retro laborum. Esse twee readymade laboris fap vice, voluptate DIY.
|
||||
</p>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Footer
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,127 @@
|
|||
/* =============================================================
|
||||
* 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( $ ){
|
||||
|
||||
"use strict"
|
||||
|
||||
var Collapse = function ( element, options ) {
|
||||
this.$element = $(element)
|
||||
this.settings = $.extend({}, $.fn.collapse.defaults, options)
|
||||
|
||||
if (this.settings["parent"]) {
|
||||
this.$parent = $(this.settings["parent"])
|
||||
}
|
||||
|
||||
this.settings.toggle && this.toggle()
|
||||
}
|
||||
|
||||
Collapse.prototype = {
|
||||
|
||||
dimension: function () {
|
||||
var hasWidth = this.$element.hasClass('width')
|
||||
return hasWidth ? 'width' : 'height'
|
||||
}
|
||||
|
||||
, show: function () {
|
||||
var dimension = this.dimension()
|
||||
, scroll = $.camelCase(['scroll', dimension].join('-'))
|
||||
|
||||
this.$parent && this.$parent.find('.in').collapse('hide')
|
||||
|
||||
this.$element[dimension](0)
|
||||
this.transition('addClass', 'show', 'shown')
|
||||
this.$element[dimension](this.$element[0][scroll])
|
||||
|
||||
}
|
||||
|
||||
, hide: function () {
|
||||
var dimension = this.dimension()
|
||||
this.reset(this.$element[dimension]())
|
||||
this.transition('removeClass', 'hide', 'hidden')
|
||||
this.$element[dimension](0)
|
||||
}
|
||||
|
||||
, reset: function ( size ) {
|
||||
var dimension = this.dimension()
|
||||
|
||||
this.$element
|
||||
.removeClass('collapse')
|
||||
[dimension](size || '')
|
||||
[0].offsetWidth
|
||||
|
||||
this.$element.addClass('collapse')
|
||||
}
|
||||
|
||||
, transition: function ( method, startEvent, completeEvent ) {
|
||||
var that = this
|
||||
, complete = function () {
|
||||
if (startEvent == 'show') that.reset()
|
||||
that.$element.trigger(completeEvent)
|
||||
}
|
||||
|
||||
this.$element
|
||||
.trigger(startEvent)
|
||||
[method]('in')
|
||||
|
||||
$.support.transition && this.$element.hasClass('collapse') ?
|
||||
this.$element.one($.support.transition.end, complete) :
|
||||
complete()
|
||||
}
|
||||
|
||||
, toggle: function () {
|
||||
this[this.$element.hasClass('in') ? 'hide' : 'show']()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* COLLAPSIBLE PLUGIN DEFINITION
|
||||
* ============================== */
|
||||
|
||||
$.fn.collapse = function ( option ) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
, data = $this.data('collapse')
|
||||
, options = typeof option == 'object' && option
|
||||
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
|
||||
if (typeof option == 'string') data[option]()
|
||||
})
|
||||
}
|
||||
|
||||
$.fn.collapse.defaults = {
|
||||
toggle: true
|
||||
}
|
||||
|
||||
$.fn.collapse.Collapse = Collapse
|
||||
|
||||
|
||||
/* COLLAPSIBLE DATA-API
|
||||
* ==================== */
|
||||
|
||||
$(function () {
|
||||
$('body').delegate('[data-toggle=collapse]', 'click.collapse.data-api', function ( e ) {
|
||||
var $this = $(this)
|
||||
, target = $this.attr('data-target')
|
||||
, option = $(target).data('collapse') ? 'toggle' : $this.data()
|
||||
e.preventDefault()
|
||||
$(target).collapse(option)
|
||||
})
|
||||
})
|
||||
|
||||
})( window.jQuery || window.ender )
|
||||
|
|
@ -631,14 +631,6 @@ input[type=submit].btn {
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// PATTERN ANIMATIONS
|
||||
// ------------------
|
||||
|
||||
|
|
@ -650,6 +642,21 @@ input[type=submit].btn {
|
|||
}
|
||||
}
|
||||
|
||||
.collapse {
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
&.height {
|
||||
.transition(height .35s ease);
|
||||
height: 0;
|
||||
&.in { height: auto; }
|
||||
}
|
||||
&.width {
|
||||
.transition(width .35s ease);
|
||||
width: 0;
|
||||
&.in { width: auto; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// LABELS
|
||||
// ------
|
||||
|
|
|
|||
Loading…
Reference in New Issue