add topbar dropdown js

2025-10-29 00:06:04 -04:00 · 2011-08-27 21:46:50 -07:00 · 2011-08-27 21:46:50 -07:00 · ed96f181c8
commit ed96f181c8
parent e91353f362
5 changed files with 132 additions and 128 deletions
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@ -131,6 +131,7 @@ div.quickstart form textarea {
 #footer p.right {
  float: right;
 }
+
 /* Special grid styles
 -------------------------------------------------- */
 .show-grid {
--- a/docs/assets/js/jquery/jquery.tipsy.js
+++ b/docs/assets/js/jquery/jquery.tipsy.js
@ -1,104 +0,0 @@
-(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);
--- a/examples/assets/css/bootstrap-js.css
+++ b/examples/assets/css/bootstrap-js.css
@ -0,0 +1,36 @@
+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;
+}
--- a/examples/assets/js/bootstrap-dropdown.js
+++ b/examples/assets/js/bootstrap-dropdown.js
@ -0,0 +1,22 @@
+(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 )
--- a/examples/bootstrap-js.html
+++ b/examples/bootstrap-js.html
@ -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>