Team:Evry/Notebook/test
From 2014.igem.org
(Difference between revisions)
(46 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | ||
<html> | <html> | ||
- | <head> | + | <head> |
+ | <title>Dropdown</title> | ||
+ | <style> | ||
+ | {{:Team:Evry/Notebook/test}} | ||
+ | <\style> | ||
+ | </head> | ||
+ | <body> | ||
- | + | <div class="container"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <div class="page-header"> | |
- | + | <h1>Dropdown <small>Bootstrap Visual Test</small></h1> | |
- | + | </div> | |
- | + | ||
+ | <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"> | ||
+ | <div class="container-fluid"> | ||
+ | <div class="navbar-header"> | ||
+ | <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse"> | ||
+ | <span class="sr-only">Toggle navigation</span> | ||
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | </button> | ||
+ | <a class="navbar-brand" href="#">Project Name</a> | ||
+ | </div> | ||
+ | <div class="collapse navbar-collapse bs-example-js-navbar-collapse"> | ||
+ | <ul class="nav navbar-nav"> | ||
+ | <li class="dropdown"> | ||
+ | <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> | ||
+ | <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> | ||
+ | <li role="presentation" class="divider"></li> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> | ||
+ | <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> | ||
+ | <li role="presentation" class="divider"></li> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="nav navbar-nav navbar-right"> | ||
+ | <li id="fat-menu" class="dropdown"> | ||
+ | <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> | ||
+ | <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> | ||
+ | <li role="presentation" class="divider"></li> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </nav> | ||
- | + | <ul class="nav nav-pills"> | |
- | + | <li class="active"><a href="#">Regular link</a></li> | |
- | + | <li class="dropdown"> | |
- | + | <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> | |
+ | <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4"> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> | ||
+ | <li role="presentation" class="divider"></li> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a> | ||
+ | <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5"> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> | ||
+ | <li role="presentation" class="divider"></li> | ||
+ | <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
- | + | <!-- JavaScript Includes --> | |
- | + | <script src="https://2014.igem.org/Team:Evry/JS2&action=raw"></script> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | < | + | <script> |
- | /* | + | /* ======================================================================== |
- | + | * Bootstrap: dropdown.js v3.2.0 | |
- | + | * http://getbootstrap.com/javascript/#dropdowns | |
- | + | * ======================================================================== | |
- | + | * Copyright 2011-2014 Twitter, Inc. | |
- | + | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |
- | + | * ======================================================================== */ | |
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | +function ($) { | |
+ | 'use strict'; | ||
- | + | // DROPDOWN CLASS DEFINITION | |
+ | // ========================= | ||
+ | var backdrop = '.dropdown-backdrop' | ||
+ | var toggle = '[data-toggle="dropdown"]' | ||
+ | var Dropdown = function (element) { | ||
+ | $(element).on('click.bs.dropdown', this.toggle) | ||
+ | } | ||
- | + | Dropdown.VERSION = '3.2.0' | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | . | + | Dropdown.prototype.toggle = function (e) { |
- | + | var $this = $(this) | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | . | + | if ($this.is('.disabled, :disabled')) return |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | var $parent = getParent($this) | |
- | . | + | var isActive = $parent.hasClass('open') |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | clearMenus() | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | if (!isActive) { | |
- | . | + | if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) { |
- | + | // if mobile we use a backdrop because click events don't delegate | |
- | + | $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus) | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | + | var relatedTarget = { relatedTarget: this } | |
- | + | $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget)) | |
- | } | + | |
- | + | if (e.isDefaultPrevented()) return | |
- | + | ||
- | + | ||
- | + | $this.trigger('focus') | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | $parent | |
- | + | .toggleClass('open') | |
- | + | .trigger('shown.bs.dropdown', relatedTarget) | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | return false | ||
+ | } | ||
+ | Dropdown.prototype.keydown = function (e) { | ||
+ | if (!/(38|40|27)/.test(e.keyCode)) return | ||
+ | var $this = $(this) | ||
- | + | e.preventDefault() | |
- | + | e.stopPropagation() | |
- | + | if ($this.is('.disabled, :disabled')) return | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | var $parent = getParent($this) | ||
+ | var isActive = $parent.hasClass('open') | ||
+ | |||
+ | if (!isActive || (isActive && e.keyCode == 27)) { | ||
+ | if (e.which == 27) $parent.find(toggle).trigger('focus') | ||
+ | return $this.trigger('click') | ||
+ | } | ||
+ | |||
+ | var desc = ' li:not(.divider):visible a' | ||
+ | var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc) | ||
+ | |||
+ | if (!$items.length) return | ||
+ | |||
+ | var index = $items.index($items.filter(':focus')) | ||
+ | |||
+ | if (e.keyCode == 38 && index > 0) index-- // up | ||
+ | if (e.keyCode == 40 && index < $items.length - 1) index++ // down | ||
+ | if (!~index) index = 0 | ||
+ | |||
+ | $items.eq(index).trigger('focus') | ||
+ | } | ||
+ | |||
+ | function clearMenus(e) { | ||
+ | if (e && e.which === 3) return | ||
+ | $(backdrop).remove() | ||
+ | $(toggle).each(function () { | ||
+ | var $parent = getParent($(this)) | ||
+ | var relatedTarget = { relatedTarget: this } | ||
+ | if (!$parent.hasClass('open')) return | ||
+ | $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget)) | ||
+ | if (e.isDefaultPrevented()) return | ||
+ | $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget) | ||
+ | }) | ||
+ | } | ||
+ | |||
+ | function getParent($this) { | ||
+ | var selector = $this.attr('data-target') | ||
+ | |||
+ | if (!selector) { | ||
+ | selector = $this.attr('href') | ||
+ | selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7 | ||
+ | } | ||
+ | |||
+ | var $parent = selector && $(selector) | ||
+ | |||
+ | return $parent && $parent.length ? $parent : $this.parent() | ||
+ | } | ||
+ | |||
+ | |||
+ | // DROPDOWN PLUGIN DEFINITION | ||
+ | // ========================== | ||
+ | |||
+ | function Plugin(option) { | ||
+ | return this.each(function () { | ||
+ | var $this = $(this) | ||
+ | var data = $this.data('bs.dropdown') | ||
+ | |||
+ | if (!data) $this.data('bs.dropdown', (data = new Dropdown(this))) | ||
+ | if (typeof option == 'string') data[option].call($this) | ||
+ | }) | ||
+ | } | ||
+ | |||
+ | var old = $.fn.dropdown | ||
+ | |||
+ | $.fn.dropdown = Plugin | ||
+ | $.fn.dropdown.Constructor = Dropdown | ||
+ | |||
+ | |||
+ | // DROPDOWN NO CONFLICT | ||
+ | // ==================== | ||
+ | |||
+ | $.fn.dropdown.noConflict = function () { | ||
+ | $.fn.dropdown = old | ||
+ | return this | ||
+ | } | ||
+ | |||
+ | |||
+ | // APPLY TO STANDARD DROPDOWN ELEMENTS | ||
+ | // =================================== | ||
+ | |||
+ | $(document) | ||
+ | .on('click.bs.dropdown.data-api', clearMenus) | ||
+ | .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) | ||
+ | .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle) | ||
+ | .on('keydown.bs.dropdown.data-api', toggle + ', [role="menu"], [role="listbox"]', Dropdown.prototype.keydown) | ||
+ | |||
+ | }(jQuery); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | <script > | ||
+ | /* ======================================================================== | ||
+ | * Bootstrap: transition.js v3.2.0 | ||
+ | * http://getbootstrap.com/javascript/#transitions | ||
+ | * ======================================================================== | ||
+ | * Copyright 2011-2014 Twitter, Inc. | ||
+ | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | ||
+ | * ======================================================================== */ | ||
+ | |||
+ | |||
+ | +function ($) { | ||
+ | 'use strict'; | ||
+ | |||
+ | // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/) | ||
+ | // ============================================================ | ||
+ | |||
+ | function transitionEnd() { | ||
+ | var el = document.createElement('bootstrap') | ||
+ | |||
+ | var transEndEventNames = { | ||
+ | WebkitTransition : 'webkitTransitionEnd', | ||
+ | MozTransition : 'transitionend', | ||
+ | OTransition : 'oTransitionEnd otransitionend', | ||
+ | transition : 'transitionend' | ||
+ | } | ||
+ | |||
+ | for (var name in transEndEventNames) { | ||
+ | if (el.style[name] !== undefined) { | ||
+ | return { end: transEndEventNames[name] } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | return false // explicit for ie8 ( ._.) | ||
+ | } | ||
+ | |||
+ | // http://blog.alexmaccaw.com/css-transitions | ||
+ | $.fn.emulateTransitionEnd = function (duration) { | ||
+ | var called = false | ||
+ | var $el = this | ||
+ | $(this).one('bsTransitionEnd', function () { called = true }) | ||
+ | var callback = function () { if (!called) $($el).trigger($.support.transition.end) } | ||
+ | setTimeout(callback, duration) | ||
+ | return this | ||
+ | } | ||
+ | |||
+ | $(function () { | ||
+ | $.support.transition = transitionEnd() | ||
+ | |||
+ | if (!$.support.transition) return | ||
+ | |||
+ | $.event.special.bsTransitionEnd = { | ||
+ | bindType: $.support.transition.end, | ||
+ | delegateType: $.support.transition.end, | ||
+ | handle: function (e) { | ||
+ | if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments) | ||
+ | } | ||
+ | } | ||
+ | }) | ||
+ | |||
+ | }(jQuery); | ||
+ | |||
+ | </script> | ||
+ | </body> | ||
</html> | </html> |
Latest revision as of 16:51, 20 August 2014