Team:Evry/Notebook/test

From 2014.igem.org

(Difference between revisions)
Line 198: Line 198:
<!--END menu -->
<!--END menu -->
 +
</body>
 +
</html>
 +
 +
<html>
 +
<head>
 +
  <title>Dropdown</title>
 +
  <link rel="stylesheet" type="text/css" href="/home/wdigan/Desktop/testhtml/bootstrap-3.2.0/dist/css/bootstrap.min.css">
 +
</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="/home/wdigan/Desktop/testhtml/bootstrap-3.2.0/js/tests/vendor/jquery.min.js"></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>
</body>
</html>
</html>

Revision as of 16:10, 20 August 2014

Dropdown

Dropdown Bootstrap Visual Test

Retrieved from "http://2014.igem.org/Team:Evry/Notebook/test"