Skip to content

B
bootstrap
Commit ed96f181 authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

add topbar dropdown js

parent e91353f3
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 128 deletions
docs/assets/css/docs.css
View file @ ed96f181
......@@ -131,6 +131,7 @@ div.quickstart form textarea {
#footer p.right {
float: right;
}
/* Special grid styles
-------------------------------------------------- */
.show-grid {
......
docs/assets/js/jquery/jquery.tipsy.js deleted 100644 → 0
View file @ e91353f3
(function($) {
$.fn.tipsy = function(options) {
options = $.extend({}, $.fn.tipsy.defaults, options);
return this.each(function() {
var opts = $.fn.tipsy.elementOptions(this, options);
$(this).hover(function() {
$.data(this, 'cancel.tipsy', true);
var tip = $.data(this, 'active.tipsy');
if (!tip) {
tip = $('<div class="tipsy"><div class="tipsy-inner"/></div>');
tip.css({position: 'absolute', zIndex: 100000});
$.data(this, 'active.tipsy', tip);
}
if ($(this).attr('title') || typeof($(this).attr('original-title')) != 'string') {
$(this).attr('original-title', $(this).attr('title') || '').removeAttr('title');
}
var title;
if (typeof opts.title == 'string') {
title = $(this).attr(opts.title == 'title' ? 'original-title' : opts.title);
} else if (typeof opts.title == 'function') {
title = opts.title.call(this);
}
tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback);
var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight});
tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity
tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight;
var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(this) : opts.gravity;
switch (gravity.charAt(0)) {
case 'n':
tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north');
break;
case 's':
tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south');
break;
case 'e':
tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east');
break;
case 'w':
tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west');
break;
}
if (opts.fade) {
tip.css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: 0.8});
} else {
tip.css({visibility: 'visible'});
}
}, function() {
$.data(this, 'cancel.tipsy', false);
var self = this;
setTimeout(function() {
if ($.data(this, 'cancel.tipsy')) return;
var tip = $.data(self, 'active.tipsy');
if (opts.fade) {
tip.stop().fadeOut(function() { $(this).remove(); });
} else {
tip.remove();
}
}, 100);
});
});
};
// Overwrite this method to provide options on a per-element basis.
// For example, you could store the gravity in a 'tipsy-gravity' attribute:
// return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
// (remember - do not modify 'options' in place!)
$.fn.tipsy.elementOptions = function(ele, options) {
return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
};
$.fn.tipsy.defaults = {
fade: false,
fallback: '',
gravity: 'n',
html: false,
title: 'title'
};
$.fn.tipsy.autoNS = function() {
return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
};
$.fn.tipsy.autoWE = function() {
return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
};
})(jQuery);
examples/assets/css/bootstrap-js.css 0 → 100644
View file @ ed96f181
body {
padding-bottom: 60px;
}
/* Topbar special styles
-------------------------------------------------- */
div.topbar-wrapper {
position: relative;
height: 40px;
margin: 5px 0 15px;
}
div.topbar-wrapper div.topbar {
position: absolute;
margin: 0 -20px;
}
div.topbar-wrapper div.topbar .fill {
padding-left: 20px;
padding-right: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
div.topbar-wrapper .container {
width: auto;
}
/* Pretty Print
-------------------------------------------------- */
PRE.prettyprint {
overflow: hidden;
}
section {
padding-top: 60px;
}
\ No newline at end of file
examples/assets/js/bootstrap-dropdown.js 0 → 100644
View file @ ed96f181
(function( $ ){
/* DROPDOWN PLUGIN DEFINITION
* ========================== */
function clearMenus() {
$('a.menu').parent('li').removeClass('open')
}
$(window).bind("click", clearMenus)
$.fn.dropdown = function ( options ) {
return this.each(function () {
$(this).delegate('a.menu', 'click', function (e) {
clearMenus()
$(this).parent('li').toggleClass('open')
return false
})
})
}
})( jQuery || ender )
\ No newline at end of file
examples/bootstrap-js.html
View file @ ed96f181
......@@ -17,10 +17,11 @@
<script src="assets/js/bootstrap-alerts.js"></script>
<script src="assets/js/bootstrap-twipsy.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<!-- <script src="assets/js/bootstrap-dropdown.js"></script> -->
<script src="assets/js/bootstrap-dropdown.js"></script>
<!-- Le styles -->
<link href="../bootstrap-1.1.1.css" rel="stylesheet">
<link href="assets/css/bootstrap-js.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
......@@ -29,7 +30,7 @@
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body style="padding: 60px 0">
<body>
<!-- Topbar
================================================== -->
......@@ -38,8 +39,9 @@
<div class="container">
<h3><a href="#">Bootstrap JS</a></h3>
<ul>
<li class="active"><a href="#javascript">Getting Started</a></li>
<li><a href="#javascript">Getting Started</a></li>
<li><a href="#modal">Modals</a></li>
<li><a href="#dropdown">Dropdown</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#twipsy">Twipsy</a></li>
<li><a href="#popover">Popover</a></li>
......@@ -126,7 +128,7 @@ $('#modal-content').modal({
</div>
</div>
<button id="modal-from-element" class="btn">Launch Modal</button>
<button id="modal-from-element" class="btn danger">Launch Modal</button>
<script>
$(function () {
......@@ -185,6 +187,72 @@ $('#modal-content').modal({
</div>
</section>
<!-- Dropdown
================================================== -->
<section id="dropdown">
<div class="page-header">
<h1>Drop Down <small>bootstrap-dropdown.js</h1>
</div>
<div class="row">
<div class="span4 columns">
<p>This plugin is for adding dropdown to the bootstrap nav.</p>
<a href="assets/js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a>
</div>
<div class="span12 columns">
<h2>Using boostrap-dropdown.js</h2>
<pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
<h3>Method</h3>
<h4>$().dropdown</h4>
<p>
Activates menus for given topbar navigation.
</p>
<h3>Demo</h3>
<script>
$(function () {
$('#topbar-example').dropdown()
})
</script>
<div class="topbar-wrapper">
<div id="topbar-example" class="topbar">
<div class="fill">
<div class="container">
<h3><a href="#">Project Name</a></h3>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<form action="">
<input type="text" placeholder="Search" />
</form>
<ul class="nav secondary-nav">
<li class="menu">
<a href="#" class="menu">Dropdown 1</a>
<ul class="menu-dropdown">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
<li class="menu">
<a href="#" class="menu">Dropdown 2</a>
<ul class="menu-dropdown">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Tips
================================================== -->
......@@ -265,7 +333,7 @@ $('#modal-content').modal({
<h4>$().popover</h4>
<p>Initializes popovers for an element collection.</p>
<h3>Demo</h3>
<a href="#" class="btn" rel="popover" data-title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover</a>
<a href="#" class="btn danger" rel="popover" data-title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover</a>
<script>
$(function () {
$("a[rel=popover]").popover({
......@@ -277,25 +345,6 @@ $('#modal-content').modal({
</div>
</section>
<!-- Section
================================================== -->
<!--
<section id="section">
<div class="page-header">
<h1></h1>
</div>
<div class="row">
<div class="span4 columns">
<p></p>
</div>
<div class="span12 columns">
<h3></h3>
<p></p>
</div>
</div>
</section>
-->
</div>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment