#footer p.right {
float: right;
}
+
/* Special grid styles
-------------------------------------------------- */
.show-grid {
+++ /dev/null
-(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);
--- /dev/null
+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
--- /dev/null
+(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
<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">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
- <body style="padding: 60px 0">
+ <body>
<!-- Topbar
================================================== -->
<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>
</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 () {
</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
================================================== -->
<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({
</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
projects / thirdparty / bootstrap.git / commitdiff
