Team:Evry/Notebook/test

From 2014.igem.org

(Difference between revisions)
 
(47 intermediate revisions not shown)
Line 1: Line 1:
 +
<html>
<html>
-
   <head>
+
<head>
 +
   <title>Dropdown</title>
 +
  <style>
 +
{{:Team:Evry/Notebook/test}}
 +
<\style>
 +
</head>
 +
<body>
-
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
<div class="container">
-
<script>
+
-
var main = function() {
+
-
  $('.icon-menu').click(function() {
+
-
    $('.menu').animate({
+
-
      left: "0px"
+
-
    }, 200);
+
-
    $('body').animate({
+
  <div class="page-header">
-
      left: "285px"
+
     <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
-
     }, 200);
+
   </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>
-
   $('.icon-close').click(function() {
+
   <ul class="nav nav-pills">
-
    $('.menu').animate({
+
    <li class="active"><a href="#">Regular link</a></li>
-
       left: "0px"
+
    <li class="dropdown">
-
     }, 200);
+
      <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>
-
    $('body').animate({
+
<!-- JavaScript Includes -->
-
      left: "-285px"
+
<script src="https://2014.igem.org/Team:Evry/JS2&action=raw"></script>
-
    }, 200);
+
-
  });
+
-
};
+
-
$(document).ready(main)
+
-
</script>
 
-
   
 
-
<style>
+
<script>
-
/* Initial body */
+
/* ========================================================================
-
body {
+
* Bootstrap: dropdown.js v3.2.0
-
  left: 0;
+
* http://getbootstrap.com/javascript/#dropdowns
-
  margin: 0;
+
* ========================================================================
-
  overflow: hidden;
+
* Copyright 2011-2014 Twitter, Inc.
-
  position: relative;
+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
-
}
+
* ======================================================================== */
-
/* Initial menu */
 
-
.menu {
 
-
  background: #04084E;
 
-
  left: 0px;  /* start off behind the scenes */
 
-
  height: 25%;
 
-
  position: fixed;
 
-
  width: 0px;
 
-
}
 
-
/* Basic styling */
+
+function ($) {
 +
  'use strict';
-
.jumbotron {
+
  // DROPDOWN CLASS DEFINITION
 +
  // =========================
 +
  var backdrop = '.dropdown-backdrop'
 +
  var toggle  = '[data-toggle="dropdown"]'
 +
  var Dropdown = function (element) {
 +
    $(element).on('click.bs.dropdown', this.toggle)
 +
  }
-
/*  background-image: url('/home/wdigan/Desktop/igem/wiki/imagewiki/BernardEvry.JPG'); */
+
  Dropdown.VERSION = '3.2.0'
-
background: rgb(240,249,255); /* Old browsers */
+
-
background: -moz-linear-gradient(left, rgba(240,249,255,1) 0%, rgba(203,235,255,1) 47%, rgba(161,219,255,1) 100%); /* FF3.6+ */
+
-
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(240,249,255,1)), color-stop(47%,rgba(203,235,255,1)), color-stop(100%,rgba(161,219,255,1))); /* Chrome,Safari4+ */
+
-
background: -webkit-linear-gradient(left, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Chrome10+,Safari5.1+ */
+
-
background: -o-linear-gradient(left, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Opera 11.10+ */
+
-
background: -ms-linear-gradient(left, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* IE10+ */
+
-
background: linear-gradient(to right, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* W3C */
+
-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=1 ); /* IE6-9 */
+
-
  height: 100%;
+
-
  -webkit-background-size: cover;
+
-
    -moz-background-size: cover;
+
-
      -o-background-size: cover;
+
-
          background-size: cover;
+
-
}
+
-
.menu ul {
+
  Dropdown.prototype.toggle = function (e) {
-
  border-top: 4px solid #636366;
+
    var $this = $(this)
-
  list-style: none;
+
-
  margin: 0;
+
-
  padding: 0;
+
-
}
+
-
.menu li {
+
    if ($this.is('.disabled, :disabled')) return
-
  border-bottom: 1px solid #636366;
+
-
  font-family: 'Open Sans', sans-serif;
+
-
  line-height: 20px;
+
-
  padding-bottom: 3px;
+
-
  padding-left: 20px;
+
-
  padding-top: 3px;
+
-
}
+
-
/*icon tab*/
+
    var $parent  = getParent($this)
-
.menu a {
+
    var isActive = $parent.hasClass('open')
-
  color: white;
+
-
  font-size: 15px;
+
-
  text-decoration: none;
+
-
  text-transform: uppercase;
+
-
}
+
-
.icon-close {
+
    clearMenus()
-
  cursor: pointer;
+
-
  padding-left:5px;
+
-
  padding-top: 5px;
+
-
}
+
-
/*contents tab*/
+
    if (!isActive) {
-
.icon-menu {
+
      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
-
  color: black;
+
        // if mobile we use a backdrop because click events don't delegate
-
  cursor: pointer;
+
        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
-
  font-family: 'Open Sans', sans-serif;
+
      }
-
  font-size: 25px;
+
-
  padding-bottom: 25px;
+
-
  padding-left: 25px;
+
-
  padding-top: 25px;
+
-
  text-decoration: none;
+
-
  text-transform: uppercase;
+
-
}
+
-
.icon-menu i {
+
      var relatedTarget = { relatedTarget: this }
-
  margin-right: 5px;
+
      $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
-
}
+
-
</style>
+
      if (e.isDefaultPrevented()) return
-
  </head>
+
-
  <body>
+
-
    <div class="menu">
+
       $this.trigger('focus')
-
        
+
-
      <!-- Menu icon -->
+
-
      <div class="icon-close">
+
-
        <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
+
-
      </div>
+
-
       <!-- Menu -->
+
       $parent
-
      <ul>
+
         .toggleClass('open')
-
         <li><a href="#">Cell characterization</a></li>
+
         .trigger('shown.bs.dropdown', relatedTarget)
-
         <li><a href="#">Transformation</a></li>
+
     }
-
        <li><a href="#">RNA sequencing</a></li>
+
-
        <li><a href="#">Sensing</a></li>
+
-
        <li><a href="#">Interlabstudy</a></li>
+
-
        <li><a href="#">Protocols</a></li>
+
-
      </ul>
+
-
     </div>
+
 +
    return false
 +
  }
 +
  Dropdown.prototype.keydown = function (e) {
 +
    if (!/(38|40|27)/.test(e.keyCode)) return
 +
    var $this = $(this)
-
     <!-- Main body -->
+
     e.preventDefault()
-
     <div class="jumbotron">
+
     e.stopPropagation()
-
      <div class="icon-menu">
+
     if ($this.is('.disabled, :disabled')) return
-
        <i class="fa fa-bars"></i>
+
-
        Contents
+
-
      </div>
+
-
      
+
-
+
-
  </body>
+
 +
    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

Dropdown