mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-18 05:58:25 +01:00
adds twipsy js to regular index for positioning
This commit is contained in:
Jacob Thornton
parent
39fc13093e
commit
a8d4475827
8
bootstrap-1.3.0.css
vendored
8
bootstrap-1.3.0.css
vendored
@ -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: Sat Sep 10 13:17:50 PDT 2011
|
||||
* Date: Sat Sep 10 14:46:06 PDT 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).
|
||||
@ -2030,6 +2030,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
-moz-opacity: 0.8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.twipsy.fade.in {
|
||||
filter: alpha(opacity=80);
|
||||
-khtml-opacity: 0.8;
|
||||
-moz-opacity: 0.8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.twipsy.above .twipsy-arrow {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
|
||||
3
bootstrap-1.3.0.min.css
vendored
3
bootstrap-1.3.0.min.css
vendored
@ -280,7 +280,8 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
||||
.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;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;margin-bottom:0;text-align:right;}.modal-footer:before,.modal-footer:after{display:table;content:"";}
|
||||
.modal-footer:after{clear:both;}
|
||||
.modal-footer .btn{margin-left:5px;}
|
||||
.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.above .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{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
|
||||
.twipsy.above .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.below .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;}
|
||||
|
||||
@ -46,7 +46,7 @@ section > .row {
|
||||
font-weight: bold;
|
||||
}
|
||||
#masthead {
|
||||
margin-top: 40px;
|
||||
padding-top: 40px;
|
||||
}
|
||||
#masthead h1,
|
||||
#masthead p {
|
||||
@ -175,6 +175,7 @@ section > .row {
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.075);
|
||||
}
|
||||
.diagram {
|
||||
height: 140px;
|
||||
padding: 4px;
|
||||
}
|
||||
.mini-layout {
|
||||
|
||||
@ -42,42 +42,15 @@ $(document).ready(function(){
|
||||
// POSITION STATIC TWIPSIES
|
||||
// ========================
|
||||
|
||||
$('.twipsies.well a').each(function () {
|
||||
var type = this.title
|
||||
, $anchor = $(this)
|
||||
, $twipsy = $('.twipsy.' + type)
|
||||
|
||||
, twipsy = {
|
||||
width: $twipsy.width() + 10
|
||||
, height: $twipsy.height() + 10
|
||||
}
|
||||
|
||||
, anchor = {
|
||||
position: $anchor.position()
|
||||
, width: $anchor.width()
|
||||
, height: $anchor.height()
|
||||
}
|
||||
|
||||
, offset = {
|
||||
above: {
|
||||
top: anchor.position.top - twipsy.height
|
||||
, left: anchor.position.left + (anchor.width/2) - (twipsy.width/2)
|
||||
}
|
||||
, below: {
|
||||
top: anchor.position.top + anchor.height
|
||||
, left: anchor.position.left + (anchor.width/2) - (twipsy.width/2)
|
||||
}
|
||||
, left: {
|
||||
top: anchor.position.top + (anchor.height/2) - (twipsy.height/2)
|
||||
, left: anchor.position.left - twipsy.width - 5
|
||||
}
|
||||
, right: {
|
||||
top: anchor.position.top + (anchor.height/2) - (twipsy.height/2)
|
||||
, left: anchor.position.left + anchor.width + 5
|
||||
}
|
||||
}
|
||||
|
||||
$twipsy.css(offset[type])
|
||||
});
|
||||
$(".twipsies a").each(function () {
|
||||
$(this)
|
||||
.twipsy({
|
||||
live: false
|
||||
, placement: $(this).attr('title')
|
||||
, trigger: 'manual'
|
||||
, offset: 2
|
||||
})
|
||||
.trigger('twipsy:show')
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script>$(function () { prettyPrint() })</script>
|
||||
<script src="../js/bootstrap-dropdown.js"></script>
|
||||
<script src="../js/bootstrap-twipsy.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
<script src="assets/js/application-scrollspy.js"></script>
|
||||
|
||||
@ -1356,22 +1357,6 @@
|
||||
<p class="muted" style="margin-bottom: 0">
|
||||
Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="above">rem</a> quae aut veritatis quasi quae.
|
||||
</p>
|
||||
<div class="twipsy below">
|
||||
<div class="twipsy-arrow"></div>
|
||||
<div class="twipsy-inner">below!</div>
|
||||
</div>
|
||||
<div class="twipsy right">
|
||||
<div class="twipsy-arrow"></div>
|
||||
<div class="twipsy-inner">right!</div>
|
||||
</div>
|
||||
<div class="twipsy left">
|
||||
<div class="twipsy-arrow"></div>
|
||||
<div class="twipsy-inner">left!</div>
|
||||
</div>
|
||||
<div class="twipsy above">
|
||||
<div class="twipsy-arrow"></div>
|
||||
<div class="twipsy-inner">above!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1437,15 +1422,15 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
|
||||
<td>This plugin is for adding dropdown to the bootstrap nav.</td>
|
||||
<td>This plugin is for adding dropdowns to the bootstrap topbar or tabbed navigations.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
|
||||
<td>This plugin adds quick, dynamic tab and pill functionality.</td>
|
||||
<td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td>
|
||||
<td>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!</td>
|
||||
<td>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 local title storage!</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./javascript.html#popover">bootstrap-popover.js</a></td>
|
||||
|
||||
@ -829,6 +829,9 @@ input[type=submit].btn {
|
||||
font-size: 11px;
|
||||
z-index: 1000;
|
||||
.opacity(80);
|
||||
&.fade.in {
|
||||
.opacity(80);
|
||||
}
|
||||
&.above .twipsy-arrow { #popoverArrow > .above(); }
|
||||
&.left .twipsy-arrow { #popoverArrow > .left(); }
|
||||
&.below .twipsy-arrow { #popoverArrow > .below(); }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user