add build tool for js + rename twipsy to tooltip + lots of little doc cleanup
This commit is contained in:
Jacob Thornton
parent
51e4e77034
commit
6f2f947a43
2
Makefile
2
Makefile
|
|
@ -31,7 +31,7 @@ uglify:
|
|||
uglifyjs -o js/min/bootstrap-scrollspy.js js/bootstrap-scrollspy.js;\
|
||||
uglifyjs -o js/min/bootstrap-tabs.js js/bootstrap-tab.js;\
|
||||
uglifyjs -o js/min/bootstrap-transitions.js js/bootstrap-transition.js;\
|
||||
uglifyjs -o js/min/bootstrap-twipsy.js js/bootstrap-twipsy.js;\
|
||||
uglifyjs -o js/min/bootstrap-tooltip.js js/bootstrap-tooltip.js;\
|
||||
else \
|
||||
echo "You must have the UGLIFYJS minifier installed in order to minify Bootstrap's js."; \
|
||||
echo "You can install it by running: npm install uglify-js -g"; \
|
||||
|
|
|
|||
|
|
@ -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: Mon Jan 9 09:15:32 PST 2012
|
||||
* Date: Wed Jan 11 20:37:24 PST 2012
|
||||
*/
|
||||
html, body {
|
||||
margin: 0;
|
||||
|
|
@ -2208,7 +2208,7 @@ i {
|
|||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.twipsy {
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: 1020;
|
||||
display: block;
|
||||
|
|
@ -2219,24 +2219,24 @@ i {
|
|||
-moz-opacity: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.twipsy.in {
|
||||
.tooltip.in {
|
||||
filter: alpha(opacity=80);
|
||||
-moz-opacity: 0.8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.twipsy.top {
|
||||
.tooltip.top {
|
||||
margin-top: -2px;
|
||||
}
|
||||
.twipsy.right {
|
||||
.tooltip.right {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.twipsy.bottom {
|
||||
.tooltip.bottom {
|
||||
margin-top: 2px;
|
||||
}
|
||||
.twipsy.left {
|
||||
.tooltip.left {
|
||||
margin-left: -2px;
|
||||
}
|
||||
.twipsy.top .twipsy-arrow {
|
||||
.tooltip.top .tooltip-arrow {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
|
|
@ -2244,7 +2244,7 @@ i {
|
|||
border-right: 5px solid transparent;
|
||||
border-top: 5px solid #000000;
|
||||
}
|
||||
.twipsy.left .twipsy-arrow {
|
||||
.tooltip.left .tooltip-arrow {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -5px;
|
||||
|
|
@ -2252,7 +2252,7 @@ i {
|
|||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid #000000;
|
||||
}
|
||||
.twipsy.bottom .twipsy-arrow {
|
||||
.tooltip.bottom .tooltip-arrow {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
|
|
@ -2260,7 +2260,7 @@ i {
|
|||
border-right: 5px solid transparent;
|
||||
border-bottom: 5px solid #000000;
|
||||
}
|
||||
.twipsy.right .twipsy-arrow {
|
||||
.tooltip.right .tooltip-arrow {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -5px;
|
||||
|
|
@ -2268,7 +2268,7 @@ i {
|
|||
border-bottom: 5px solid transparent;
|
||||
border-right: 5px solid #000000;
|
||||
}
|
||||
.twipsy-inner {
|
||||
.tooltip-inner {
|
||||
max-width: 200px;
|
||||
padding: 3px 8px;
|
||||
color: white;
|
||||
|
|
@ -2279,7 +2279,7 @@ i {
|
|||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.twipsy-arrow {
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
|
@ -2619,6 +2619,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
|||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.btn-group.open .dropdown-menu.large {
|
||||
top: 40px;
|
||||
}
|
||||
.btn-group.open .dropdown-toggle {
|
||||
background-image: none;
|
||||
-webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
|
|
|
|||
|
|
@ -412,17 +412,17 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
|
|||
.modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;}
|
||||
.modal-footer:after{clear:both;}
|
||||
.modal-footer .btn{float:right;margin-left:5px;}
|
||||
.twipsy{position:absolute;z-index:1020;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
|
||||
.twipsy.top{margin-top:-2px;}
|
||||
.twipsy.right{margin-left:2px;}
|
||||
.twipsy.bottom{margin-top:2px;}
|
||||
.twipsy.left{margin-left:-2px;}
|
||||
.twipsy.top .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
|
||||
.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
|
||||
.twipsy.bottom .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
|
||||
.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
|
||||
.twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
|
||||
.twipsy-arrow{position:absolute;width:0;height:0;}
|
||||
.tooltip{position:absolute;z-index:1020;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.tooltip.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
|
||||
.tooltip.top{margin-top:-2px;}
|
||||
.tooltip.right{margin-left:2px;}
|
||||
.tooltip.bottom{margin-top:2px;}
|
||||
.tooltip.left{margin-left:-2px;}
|
||||
.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
|
||||
.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
|
||||
.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
|
||||
.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
|
||||
.tooltip-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
|
||||
.tooltip-arrow{position:absolute;width:0;height:0;}
|
||||
.popover{position:absolute;top:0;left:0;z-index:1010;display:none;padding:5px;}.popover.top{margin-top:-5px;}
|
||||
.popover.right{margin-left:5px;}
|
||||
.popover.bottom{margin-top:5px;}
|
||||
|
|
@ -460,7 +460,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
|||
.btn-group .btn.large:last-child,.btn-group .large.dropdown-toggle{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;}
|
||||
.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;}
|
||||
.btn-group .dropdown-toggle{padding-left:8px;padding-right:8px;-webkit-box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);}
|
||||
.btn-group.open .dropdown-menu{display:block;top:30px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
|
||||
.btn-group.open .dropdown-menu{display:block;top:30px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.btn-group.open .dropdown-menu.large{top:40px;}
|
||||
.btn-group.open .dropdown-toggle{background-image:none;-webkit-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);}
|
||||
.btn .caret{margin-top:6px;margin-left:0;}
|
||||
.primary .caret,.danger .caret,.info .caret,.success .caret{border-top-color:#fff;filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}
|
||||
|
|
@ -518,4 +518,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
|
|||
.show{display:block;}
|
||||
.invisible{visibility:hidden;}
|
||||
.hidden{display:none;visibility:hidden;}
|
||||
@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
|
||||
@media (max-width:480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width:768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width:768px) and (max-width:940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
|
||||
|
|
|
|||
|
|
@ -466,7 +466,7 @@ form.well {
|
|||
/* Icons
|
||||
------------------------- */
|
||||
.the-icons {
|
||||
|
||||
|
||||
}
|
||||
.the-icons i {
|
||||
display: block;
|
||||
|
|
@ -481,6 +481,13 @@ form.well {
|
|||
width: 100px;
|
||||
}
|
||||
|
||||
#javascript input[type='checkbox'] {
|
||||
display: inline;
|
||||
margin-left: 6px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
|
||||
/* Responsive Docs
|
||||
-------------------------------------------------- */
|
||||
|
|
|
|||
|
|
@ -48,18 +48,18 @@ $(function(){
|
|||
setTimeout(function () { $(el).select() }, 0)
|
||||
})
|
||||
|
||||
if ($.fn.twipsy) {
|
||||
if ($.fn.tooltip) {
|
||||
|
||||
// position static twipsies for components page
|
||||
if ($(".twipsies a").length) {
|
||||
$(window).on('load resize', function () {
|
||||
$(".twipsies a").each(function () {
|
||||
$(this)
|
||||
.twipsy({
|
||||
.tooltip({
|
||||
placement: $(this).attr('title')
|
||||
, trigger: 'manual'
|
||||
})
|
||||
.twipsy('show')
|
||||
.tooltip('show')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -67,7 +67,7 @@ $(function(){
|
|||
// add tipsies to grid for scaffolding
|
||||
if ($('#grid-system').length) {
|
||||
|
||||
$('#grid-system').twipsy({
|
||||
$('#grid-system').tooltip({
|
||||
selector: '.show-grid > div'
|
||||
, title: function () { return $(this).width() + 'px' }
|
||||
})
|
||||
|
|
@ -75,4 +75,79 @@ $(function(){
|
|||
}
|
||||
}
|
||||
|
||||
// javascript build logic
|
||||
|
||||
var inputs = $("#javascript input")
|
||||
|
||||
// toggle all plugin checkboxes
|
||||
$('#selectAll').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
inputs.attr('checked', !inputs.is(':checked'))
|
||||
})
|
||||
|
||||
// handle build button dropdown
|
||||
var buildTypes = $('#javascriptBuilder .dropdown-menu li').on('click', function () {
|
||||
buildTypes.removeClass('active')
|
||||
$(this).addClass('active')
|
||||
})
|
||||
|
||||
// request built javascript
|
||||
$('#javascriptBuild').on('click', function () {
|
||||
|
||||
var names = $("#javascript input:checked")
|
||||
.map(function () { return this.value })
|
||||
.toArray()
|
||||
|
||||
if (names[names.length - 1] == 'bootstrap-transition.js') {
|
||||
names.unshift(names.pop())
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: 'POST'
|
||||
, dataType: 'jsonpi'
|
||||
, params: {
|
||||
branch: '2.0-wip'
|
||||
, dir: 'js'
|
||||
, filenames: names
|
||||
, compress: buildTypes.first().hasClass('active')
|
||||
}
|
||||
, url: "http://bootstrap.herokuapp.com"
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
|
||||
// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi
|
||||
// by the talented Ben Vinegar
|
||||
!function($) {
|
||||
$.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) {
|
||||
var url = opts.url;
|
||||
|
||||
return {
|
||||
send: function(_, completeCallback) {
|
||||
var name = 'jQuery_iframe_' + jQuery.now(),
|
||||
iframe, form;
|
||||
|
||||
iframe = $('<iframe>')
|
||||
.attr('name', name)
|
||||
.appendTo('head');
|
||||
|
||||
form = $('<form>')
|
||||
.attr('method', opts.type) // GET or POST
|
||||
.attr('action', url)
|
||||
.attr('target', name);
|
||||
|
||||
$.each(opts.params, function(k, v) {
|
||||
$('<input>')
|
||||
.attr('type', 'hidden')
|
||||
.attr('name', k)
|
||||
.attr('value', v)
|
||||
.appendTo(form);
|
||||
});
|
||||
|
||||
form.appendTo('body').submit();
|
||||
}
|
||||
};
|
||||
});
|
||||
}(jQuery);
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<a class="btn primary" href="#">Action</a>
|
||||
<a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<a class="btn danger" href="#">Danger</a>
|
||||
<a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
|
|
@ -214,7 +214,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Nav, Tabs, & Pills
|
||||
|
|
@ -331,7 +331,7 @@
|
|||
<pre class="prettyprint linenums">
|
||||
<ul class="nav tabs">
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle"
|
||||
<a class="dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
href="#">
|
||||
Dropdown
|
||||
|
|
@ -363,7 +363,7 @@
|
|||
<pre class="prettyprint linenums">
|
||||
<ul class="nav pills">
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle"
|
||||
<a class="dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
href="#">
|
||||
Dropdown
|
||||
|
|
@ -483,7 +483,7 @@
|
|||
<p><a class="btn" href="./javascript.html/#tabs">Get the javascript →</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Straightforward markup</h3>
|
||||
<p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
|
|
@ -509,7 +509,7 @@
|
|||
<div class="span4">
|
||||
<p>Swap the order of your HTML—placing <code>.tabs</code> after <code>.tab-content</code>—for tabs on the bottom.</p>
|
||||
</div>
|
||||
-->
|
||||
-->
|
||||
<div class="span4">
|
||||
<h4>Tabs on the bottom</h4>
|
||||
<p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
|
||||
|
|
@ -1035,7 +1035,7 @@
|
|||
</pre>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Block messages -->
|
||||
|
|
@ -1195,7 +1195,7 @@
|
|||
<script src="../js/bootstrap-dropdown.js"></script>
|
||||
<script src="../js/bootstrap-tab.js"></script>
|
||||
<script src="../js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../js/bootstrap-twipsy.js"></script>
|
||||
<script src="../js/bootstrap-tooltip.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,6 @@
|
|||
</header>
|
||||
|
||||
|
||||
|
||||
<!-- Using Javascript w/ Bootstrap
|
||||
================================================== -->
|
||||
<section id="javascript">
|
||||
|
|
@ -63,61 +62,100 @@
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#modals">Modals</a></h3>
|
||||
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#modals">Modals</a><input checked="true" value="bootstrap-modal.js" type="checkbox"></h3>
|
||||
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#dropdowns">Dropdowns</a></h3>
|
||||
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#dropdowns">Dropdowns</a><input checked="true" value="bootstrap-dropdown.js" type="checkbox"></h3>
|
||||
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#scrollspy">Scrollspy</a></h3>
|
||||
<p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#scrollspy">Scrollspy</a><input checked="true" value="bootstrap-scrollspy.js" type="checkbox"></h3>
|
||||
<p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#tabs">Togglable tabs</a></h3>
|
||||
<p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#tabs">Togglable tabs</a><input checked="true" value="bootstrap-tab.js" type="checkbox"></h3>
|
||||
<p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#twipsy">Twipsy tooltips</a></h3>
|
||||
<p>A new take on the jQuery Tipsy plugin, Twipsy uses CSS3 animations, data attributes for titles, and the new event API in jQuery 1.7.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#tooltips">Tooltips</a><input checked="true" value="bootstrap-tooltip.js" type="checkbox"></h3>
|
||||
<p>A new take on the jQuery Tipsy plugin, Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small></h3>
|
||||
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
|
||||
<p class="muted"><strong>*</strong> Requires <a href="#twipsy">Twipsy</a> to be included</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small><input checked="true" value="bootstrap-popover.js" type="checkbox"></h3>
|
||||
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
|
||||
<p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#alerts">Alert messages</a></h3>
|
||||
<p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#alerts">Alert messages</a><input checked="true" value="bootstrap-alert.js" type="checkbox"></h3>
|
||||
<p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#buttons">Buttons</a></h3>
|
||||
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#buttons">Buttons</a><input checked="true" value="bootstrap-button.js" type="checkbox"></h3>
|
||||
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#collapse">Collapse</a></h3>
|
||||
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#collapse">Collapse</a><input checked="true" value="bootstrap-collapse.js" type="checkbox"></h3>
|
||||
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#carousel">Carousel</a></h3>
|
||||
<p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#carousel">Carousel</a><input checked="true" value="bootstrap-carousel.js" type="checkbox"></h3>
|
||||
<p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
|
||||
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#typeahead">Typeahead</a><input checked="true" value="bootstrap-typeahead.js" type="checkbox"></h3>
|
||||
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small></h3>
|
||||
<p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p>
|
||||
<p class="muted"><strong>*</strong> Required for animation in plugins</p>
|
||||
<label>
|
||||
<h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small><input value="bootstrap-transition.js" checked="true" type="checkbox"></h3>
|
||||
<p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p>
|
||||
<p class="muted"><strong>*</strong> Required for animation in plugins</p>
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row">
|
||||
<div class="span5">
|
||||
<div class="btn-group" id="javascriptBuilder">
|
||||
<a id="javascriptBuild" class="btn primary large" href="#">Download Source</a>
|
||||
<a class="btn primary large dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu large">
|
||||
<li class="active"><a href="#">Compressed</a></li>
|
||||
<li><a href="#">Uncompressed</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<a id="selectAll" href="#" style="float:right">Select/Unselect All Plugins</a>
|
||||
<p class="muted"><span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
|
||||
</section>
|
||||
|
||||
|
|
@ -169,8 +207,8 @@
|
|||
<h4>Popover in a modal</h4>
|
||||
<p>This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
|
||||
|
||||
<h4>Twipsy tooltips in a modal</h4>
|
||||
<p><a href="#" class="twipsy-test" title="Tooltip">This link</a> and <a href="#" class="twipsy-test" title="Tooltip">that link</a> should have Twipsy tooltips on hover.</p>
|
||||
<h4>Tooltips in a modal</h4>
|
||||
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn primary">Save changes</a>
|
||||
|
|
@ -596,30 +634,29 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Twipsy
|
||||
<!-- Tooltips
|
||||
================================================== -->
|
||||
<section id="twipsy">
|
||||
<section id="tooltips">
|
||||
<div class="page-header">
|
||||
<h1>Twipsy <small>bootstrap-twipsy.js</small></h1>
|
||||
<h1>Tooltips <small>bootstrap-tooltip.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<h3>About Twipsy tooltips</h3>
|
||||
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, data-attributes for local title storage, and now jquery 1.7's new event api!</p>
|
||||
<a href="../js/bootstrap-twipsy.js" target="_blank" class="btn">Download file</a>
|
||||
<h3>About Tooltips</h3>
|
||||
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p>
|
||||
<a href="../js/bootstrap-tooltip.js" target="_blank" class="btn">Download file</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
<h2>Example use of Twipsy</h2>
|
||||
<h2>Example use of Tooltips</h2>
|
||||
<p>Hover over the links below to see tooltips:</p>
|
||||
<div class="twipsy-demo well">
|
||||
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel='twipsy' title="first twipsy">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='twipsy' title='Another twipsy'>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='twipsy' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='twipsy' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||
<div class="tooltip-demo well">
|
||||
<p class="muted" style="margin-bottom: 0;">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.
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
<h2>Using bootstrap-twipsy.js</h2>
|
||||
<p>Trigger the Twipsy tooltips via javascript:</p>
|
||||
<pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
|
||||
<h2>Using bootstrap-tooltip.js</h2>
|
||||
<p>Trigger the tooltip via javascript:</p>
|
||||
<pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
|
||||
<h3>Options</h3>
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
|
|
@ -647,7 +684,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||
<td>selector</td>
|
||||
<td>string</td>
|
||||
<td>false</td>
|
||||
<td>If a selector is provided, twipsy objects will be delegated to the specified targets.</td>
|
||||
<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
|
|
@ -673,18 +710,18 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><span class="label notice">Notice</span> Individual twipsy instance options can alternatively be specified through the use of data attributes.</code></p>
|
||||
<p><span class="label notice">Notice</span> Individual tooltip instance options can alternatively be specified through the use of data attributes.</code></p>
|
||||
<h3>Markup</h3>
|
||||
<p>For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
|
||||
<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
|
||||
<h3>Methods</h3>
|
||||
<h4>$().twipsy(options)</h4>
|
||||
<p>Attaches a twipsy handler to an element collection.</p>
|
||||
<h4>.twipsy('show')</h4>
|
||||
<p>Reveals an elements twipsy.</p>
|
||||
<pre class="prettyprint linenums">$('#element').twipsy('show')</pre>
|
||||
<h4>.twipsy('hide')</h4>
|
||||
<p>Hides an elements twipsy.</p>
|
||||
<pre class="prettyprint linenums">$('#element').twipsy('hide')</pre>
|
||||
<h4>$().tooltip(options)</h4>
|
||||
<p>Attaches a tooltip handler to an element collection.</p>
|
||||
<h4>.tooltip('show')</h4>
|
||||
<p>Reveals an elements tooltip.</p>
|
||||
<pre class="prettyprint linenums">$('#element').tooltip('show')</pre>
|
||||
<h4>.tooltip('hide')</h4>
|
||||
<p>Hides an elements tooltip.</p>
|
||||
<pre class="prettyprint linenums">$('#element').tooltip('hide')</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -701,7 +738,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||
<div class="span3 columns">
|
||||
<h3>About popovers</h3>
|
||||
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
|
||||
<p class="muted"><strong>*</strong> Requires <a href="#twipsy">Twipsy</a> to be included</p>
|
||||
<p class="muted"><strong>*</strong> Requires <a href="#tooltip">Tooltip</a> to be included</p>
|
||||
<a href="../js/bootstrap-popover.js" target="_blank" class="btn">Download file</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
|
|
@ -741,7 +778,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||
<td>selector</td>
|
||||
<td>string</td>
|
||||
<td>false</td>
|
||||
<td>if a selector is provided, twipsy objects will be delegated to the specified targets</td>
|
||||
<td>if a selector is provided, tooltip objects will be delegated to the specified targets</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>trigger</td>
|
||||
|
|
@ -776,7 +813,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||
<p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p>
|
||||
<h3>Markup</h3>
|
||||
<p>
|
||||
For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just specify a the selector option.
|
||||
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.
|
||||
</p>
|
||||
<h3>Methods</h3>
|
||||
<h4>$().popover(options)</h4>
|
||||
|
|
@ -1302,7 +1339,7 @@ $('#myCollapsible').on('hidden', function () {
|
|||
<script src="../js/bootstrap-dropdown.js"></script>
|
||||
<script src="../js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../js/bootstrap-tab.js"></script>
|
||||
<script src="../js/bootstrap-twipsy.js"></script>
|
||||
<script src="../js/bootstrap-tooltip.js"></script>
|
||||
<script src="../js/bootstrap-popover.js"></script>
|
||||
<script src="../js/bootstrap-button.js"></script>
|
||||
<script src="../js/bootstrap-collapse.js"></script>
|
||||
|
|
@ -1311,11 +1348,11 @@ $('#myCollapsible').on('hidden', function () {
|
|||
<script src="assets/js/application.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
// twipsy demo
|
||||
$('.twipsy-demo.well').twipsy({
|
||||
selector: "a[rel=twipsy]"
|
||||
// tooltip demo
|
||||
$('.tooltip-demo.well').tooltip({
|
||||
selector: "a[rel=tooltip]"
|
||||
})
|
||||
$('.twipsy-test').twipsy()
|
||||
$('.tooltip-test').tooltip()
|
||||
|
||||
// popover demo
|
||||
$("a[rel=popover]")
|
||||
|
|
|
|||
|
|
@ -399,15 +399,15 @@
|
|||
</dl>
|
||||
<dl class="span2">
|
||||
<dt>Javascript plugins</dt>
|
||||
<dd><a href="./javascript.html#transitions">Transitions</a></dd>
|
||||
<dd><a href="./javascript.html#modals">Modals</a></dd>
|
||||
<dd><a href="./javascript.html#dropdowns">Dropdowns</a></dd>
|
||||
<dd><a href="./javascript.html#transition">Transition</a></dd>
|
||||
<dd><a href="./javascript.html#modal">Modal</a></dd>
|
||||
<dd><a href="./javascript.html#dropdown">Dropdown</a></dd>
|
||||
<dd><a href="./javascript.html#scrollspy">Scrollspy</a></dd>
|
||||
<dd><a href="./javascript.html#tabs">Tabs</a></dd>
|
||||
<dd><a href="./javascript.html#twipsy">Twipsy tooltips</a></dd>
|
||||
<dd><a href="./javascript.html#popovers">Popovers</a></dd>
|
||||
<dd><a href="./javascript.html#alerts">Alerts</a></dd>
|
||||
<dd><a href="./javascript.html#buttons">Buttons</a></dd>
|
||||
<dd><a href="./javascript.html#tab">Tab</a></dd>
|
||||
<dd><a href="./javascript.html#tooltip">Tooltip</a></dd>
|
||||
<dd><a href="./javascript.html#popover">Popover</a></dd>
|
||||
<dd><a href="./javascript.html#alerts">Alert</a></dd>
|
||||
<dd><a href="./javascript.html#buttons">Button</a></dd>
|
||||
<dd><a href="./javascript.html#collapse">Collapse</a></dd>
|
||||
<dd><a href="./javascript.html#carousel">Carousel</a></dd>
|
||||
<dd><a href="./javascript.html#typeahead">Typeahead</a></dd>
|
||||
|
|
@ -433,7 +433,7 @@
|
|||
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="../js/bootstrap-transition.js"></script>
|
||||
<script src="../js/bootstrap-twipsy.js"></script>
|
||||
<script src="../js/bootstrap-tooltip.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -26,10 +26,10 @@
|
|||
this.init('popover', element, options)
|
||||
}
|
||||
|
||||
/* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js
|
||||
========================================= */
|
||||
/* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js
|
||||
========================================== */
|
||||
|
||||
Popover.prototype = $.extend({}, $.fn.twipsy.Constructor.prototype, {
|
||||
Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, {
|
||||
|
||||
constructor: Popover
|
||||
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
|
||||
$.fn.popover.Constructor = Popover
|
||||
|
||||
$.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, {
|
||||
$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
|
||||
placement: 'right'
|
||||
, content: ''
|
||||
, template: '<div class="popover"><div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div></div>'
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
/* ==========================================================
|
||||
* bootstrap-twipsy.js v2.0.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#twipsy
|
||||
/* ===========================================================
|
||||
* bootstrap-tooltip.js v2.0.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#tooltip
|
||||
* Inspired by the original jQuery.tipsy by Jason Frame
|
||||
* ==========================================================
|
||||
* ===========================================================
|
||||
* Copyright 2011 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
|
@ -22,16 +22,16 @@
|
|||
|
||||
"use strict"
|
||||
|
||||
/* TWIPSY PUBLIC CLASS DEFINITION
|
||||
* ============================== */
|
||||
/* TOOLTIP PUBLIC CLASS DEFINITION
|
||||
* =============================== */
|
||||
|
||||
var Twipsy = function ( element, options ) {
|
||||
this.init('twipsy', element, options)
|
||||
var Tooltip = function ( element, options ) {
|
||||
this.init('tooltip', element, options)
|
||||
}
|
||||
|
||||
Twipsy.prototype = {
|
||||
Tooltip.prototype = {
|
||||
|
||||
constructor: Twipsy
|
||||
constructor: Tooltip
|
||||
|
||||
, init: function ( type, element, options ) {
|
||||
var eventIn
|
||||
|
|
@ -154,7 +154,7 @@
|
|||
|
||||
, setContent: function () {
|
||||
var $tip = this.tip()
|
||||
$tip.find('.twipsy-inner').html(this.getTitle())
|
||||
$tip.find('.tooltip-inner').html(this.getTitle())
|
||||
$tip.removeClass('fade in top bottom left right')
|
||||
}
|
||||
|
||||
|
|
@ -242,29 +242,29 @@
|
|||
}
|
||||
|
||||
|
||||
/* TWIPSY PLUGIN DEFINITION
|
||||
* ======================== */
|
||||
/* TOOLTIP PLUGIN DEFINITION
|
||||
* ========================= */
|
||||
|
||||
$.fn.twipsy = function ( option ) {
|
||||
$.fn.tooltip = function ( option ) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
, data = $this.data('twipsy')
|
||||
, data = $this.data('tooltip')
|
||||
, options = typeof option == 'object' && option
|
||||
if (!data) $this.data('twipsy', (data = new Twipsy(this, options)))
|
||||
if (!data) $this.data('tooltip', (data = new Tooltip(this, options)))
|
||||
if (typeof option == 'string') data[option]()
|
||||
})
|
||||
}
|
||||
|
||||
$.fn.twipsy.Constructor = Twipsy
|
||||
$.fn.tooltip.Constructor = Tooltip
|
||||
|
||||
$.fn.twipsy.defaults = {
|
||||
$.fn.tooltip.defaults = {
|
||||
animation: true
|
||||
, delay: 0
|
||||
, selector: false
|
||||
, placement: 'top'
|
||||
, trigger: 'hover'
|
||||
, title: ''
|
||||
, template: '<div class="twipsy"><div class="twipsy-arrow"></div><div class="twipsy-inner"></div></div>'
|
||||
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
|
||||
}
|
||||
|
||||
}( window.jQuery )
|
||||
|
|
@ -156,11 +156,13 @@
|
|||
break
|
||||
|
||||
case 38: // up arrow
|
||||
if (!this.shown) return
|
||||
e.preventDefault()
|
||||
this.prev()
|
||||
break
|
||||
|
||||
case 40: // down arrow
|
||||
if (!this.shown) return
|
||||
e.preventDefault()
|
||||
this.next()
|
||||
break
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<script src="../../js/bootstrap-modal.js"></script>
|
||||
<script src="../../js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../../js/bootstrap-tab.js"></script>
|
||||
<script src="../../js/bootstrap-twipsy.js"></script>
|
||||
<script src="../../js/bootstrap-tooltip.js"></script>
|
||||
<script src="../../js/bootstrap-popover.js"></script>
|
||||
<script src="../../js/bootstrap-typeahead.js"></script>
|
||||
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
<script src="unit/bootstrap-modal.js"></script>
|
||||
<script src="unit/bootstrap-scrollspy.js"></script>
|
||||
<script src="unit/bootstrap-tab.js"></script>
|
||||
<script src="unit/bootstrap-twipsy.js"></script>
|
||||
<script src="unit/bootstrap-tooltip.js"></script>
|
||||
<script src="unit/bootstrap-popover.js"></script>
|
||||
<script src="unit/bootstrap-typeahead.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,62 +1,62 @@
|
|||
$(function () {
|
||||
|
||||
module("bootstrap-twipsy")
|
||||
module("bootstrap-tooltip")
|
||||
|
||||
test("should be defined on jquery object", function () {
|
||||
var div = $("<div></div>")
|
||||
ok(div.twipsy, 'popover method is defined')
|
||||
ok(div.tooltip, 'popover method is defined')
|
||||
})
|
||||
|
||||
test("should return element", function () {
|
||||
var div = $("<div></div>")
|
||||
ok(div.twipsy() == div, 'document.body returned')
|
||||
ok(div.tooltip() == div, 'document.body returned')
|
||||
})
|
||||
|
||||
test("should expose default settings", function () {
|
||||
ok(!!$.fn.twipsy.defaults, 'defaults is defined')
|
||||
ok(!!$.fn.tooltip.defaults, 'defaults is defined')
|
||||
})
|
||||
|
||||
test("should remove title attribute", function () {
|
||||
var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>').twipsy()
|
||||
ok(!twipsy.attr('title'), 'title tag was removed')
|
||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()
|
||||
ok(!tooltip.attr('title'), 'title tag was removed')
|
||||
})
|
||||
|
||||
test("should add data attribute for referencing original title", function () {
|
||||
var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>').twipsy()
|
||||
equals(twipsy.attr('data-original-title'), 'Another twipsy', 'original title preserved in data attribute')
|
||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()
|
||||
equals(tooltip.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute')
|
||||
})
|
||||
|
||||
test("should place tooltips relative to placement option", function () {
|
||||
$.support.transition = false
|
||||
var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>')
|
||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.twipsy({placement: 'bottom'})
|
||||
.twipsy('show')
|
||||
.tooltip({placement: 'bottom'})
|
||||
.tooltip('show')
|
||||
|
||||
ok($(".twipsy").hasClass('fade bottom in'), 'has correct classes applied')
|
||||
twipsy.twipsy('hide')
|
||||
ok($(".tooltip").hasClass('fade bottom in'), 'has correct classes applied')
|
||||
tooltip.tooltip('hide')
|
||||
})
|
||||
|
||||
test("should always allow html entities", function () {
|
||||
$.support.transition = false
|
||||
var twipsy = $('<a href="#" rel="twipsy" title="<b>@fat</b>"></a>')
|
||||
var tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"></a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.twipsy('show')
|
||||
.tooltip('show')
|
||||
|
||||
ok($('.twipsy b').length, 'b tag was inserted')
|
||||
twipsy.twipsy('hide')
|
||||
ok(!$(".twipsy").length, 'twipsy removed')
|
||||
ok($('.tooltip b').length, 'b tag was inserted')
|
||||
tooltip.tooltip('hide')
|
||||
ok(!$(".tooltip").length, 'tooltip removed')
|
||||
})
|
||||
|
||||
test("should respect custom classes", function () {
|
||||
var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>')
|
||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.twipsy({ template: '<div class="twipsy some-class"><div class="twipsy-arrow"/><div class="twipsy-inner"/></div>'})
|
||||
.twipsy('show')
|
||||
.tooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'})
|
||||
.tooltip('show')
|
||||
|
||||
ok($('.twipsy').hasClass('some-class'), 'custom class is present')
|
||||
twipsy.twipsy('hide')
|
||||
ok(!$(".twipsy").length, 'twipsy removed')
|
||||
ok($('.tooltip').hasClass('some-class'), 'custom class is present')
|
||||
tooltip.tooltip('hide')
|
||||
ok(!$(".tooltip").length, 'tooltip removed')
|
||||
})
|
||||
|
||||
})
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
// Components: Popovers
|
||||
@import "modals.less";
|
||||
@import "twipsy.less";
|
||||
@import "tooltip.less";
|
||||
@import "popovers.less";
|
||||
|
||||
// Components: Buttons & Alerts
|
||||
|
|
|
|||
|
|
@ -90,6 +90,7 @@
|
|||
display: block;
|
||||
top: 30px;
|
||||
.border-radius(5px);
|
||||
&.large { top: 40px; }
|
||||
}
|
||||
.btn-group.open .dropdown-toggle {
|
||||
background-image: none;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// TWIPSY
|
||||
// ------
|
||||
// TOOLTIP
|
||||
// ------=
|
||||
|
||||
.twipsy {
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: @zindexTwipsy;
|
||||
z-index: @zindexTooltip;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
padding: 5px;
|
||||
|
|
@ -14,12 +14,12 @@
|
|||
&.right { margin-left: 2px; }
|
||||
&.bottom { margin-top: 2px; }
|
||||
&.left { margin-left: -2px; }
|
||||
&.top .twipsy-arrow { #popoverArrow > .top(); }
|
||||
&.left .twipsy-arrow { #popoverArrow > .left(); }
|
||||
&.bottom .twipsy-arrow { #popoverArrow > .bottom(); }
|
||||
&.right .twipsy-arrow { #popoverArrow > .right(); }
|
||||
&.top .tooltip-arrow { #popoverArrow > .top(); }
|
||||
&.left .tooltip-arrow { #popoverArrow > .left(); }
|
||||
&.bottom .tooltip-arrow { #popoverArrow > .bottom(); }
|
||||
&.right .tooltip-arrow { #popoverArrow > .right(); }
|
||||
}
|
||||
.twipsy-inner {
|
||||
.tooltip-inner {
|
||||
max-width: 200px;
|
||||
padding: 3px 8px;
|
||||
color: white;
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
background-color: @black;
|
||||
.border-radius(4px);
|
||||
}
|
||||
.twipsy-arrow {
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
|
||||
@zindexDropdown: 1000;
|
||||
@zindexPopover: 1010;
|
||||
@zindexTwipsy: 1020;
|
||||
@zindexTooltip: 1020;
|
||||
@zindexFixedNavbar: 1030;
|
||||
@zindexModalBackdrop: 1040;
|
||||
@zindexModal: 1050;
|
||||
|
|
|
|||
Loading…
Reference in New Issue