Team:UESTC Life

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
==='''Abstract''':===
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
----
+
<html>
 +
    <head>
 +
        <title>Moleskine Notebook with jQuery Booklet</title>
 +
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 +
<meta http-equiv="X-UA-Compatible" content="IE=8" />
 +
        <meta name="description" content="Moleskine Notebook with jQuery Booklet" />
 +
        <meta name="keywords" content="jquery, book, flip, pages, moleskine, booklet, plugin, css3 "/>
-
{|align="justify"
+
<link href="https://2013.igem.org/Team:UESTC_Life/css/jquery.booklet.1.1.0.css?action=raw&ctype=text/css" type="text/css" rel="stylesheet" media="screen" />
-
|
+
<link rel="stylesheet" href="https://2013.igem.org/Team:UESTC_Life/css/style.css?action=raw&ctype=text/css" type="text/css" media="screen"/>
-
:Haloalkanes are widely used commercially. The majorty of these compounds have been shown to be serious pollutants as they are toxic and quite persistent in the environment, such as a man-made industrial chemical 1,2,3-Trichloropropane (TCP) and an organic pesticideγ-Hexachlorocyclohexane (Lindane，γ-HCH). These halogenated compounds have been introduced into our environment as a consequence of industrial waste disposal and widespread open use in agriculture, which need to be removed to low levels from waste streams and during sanitation of polluted sites. For this reason, the biodegradation of halogenated compounds is of great importance. In the project, several key enzymes in the biodegradation pathways of the two compounds were co-expressed in E. coli. As putting the different selected enzymes together, it will have a ability to degrade more halogenated compounds besides the both. To construct the efficient co-expression system and achieve biodegradation of γ-HCH and TCP, we adopt 2A peptide and polycistronic co-expression. Foot and mouth disease virus 2A peptide has been widely used for co-expression of multiple genes in eukaryote systems. However, the use of the 2A peptide in prokaryotes is limited, and so far only one paper described that F2A can work in E. coli as well. To explore whether the 2A peptides can work in our co-expression system, several vectors were constructed by using all three 2A peptides, respectively.  
+
<link href="https://2013.igem.org/Team:UESTC_Life/css/style_dock.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
-
|}  
+
 
-
[[File:Uestc_life.png|200px|right]]
+
<script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery-1.4.4.min.js?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery.easing.1.3.js?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery.booklet.1.1.0.min.js?action=raw&ctype=text/javascript"></script>
 +
<!--[if lte IE 7]>
 +
<style>
 +
/* Inline block fix */
 +
#dock ul {
 +
display: inline;
 +
zoom: 1;
 +
}
 +
 
 +
#dock li, #dock li a {
 +
display: inline;
 +
zoom: 1;
 +
}
 +
 
 +
/* Image quality fix */
 +
img {
 +
-ms-interpolation-mode: bicubic;
 +
}
 +
 
 +
#dock li a span {
 +
filter: alpha(opacity=40);
 +
}
 +
</style>
 +
<![endif]-->
 +
 +
<script>
 +
//library
 +
function distance(x0, y0, x1, y1) {
 +
var xDiff = x1-x0;
 +
var yDiff = y1-y0;
 +
 +
return Math.sqrt(xDiff*xDiff + yDiff*yDiff);
 +
}
 +
 +
$(document).ready(function() {
 +
var proximity = 180;
 +
var iconSmall = 48, iconLarge = 98; //css also needs changing to compensate with size
 +
var iconDiff = (iconLarge - iconSmall);
 +
var mouseX, mouseY;
 +
var dock = $("#dock");
 +
var animating = false, redrawReady = false;
 +
 +
$(document.body).removeClass("no_js");
 +
 +
//below are methods for maintaining a constant 60fps redraw for the dock without flushing
 +
$(document).bind("mousemove", function(e) {
 +
if (dock.is(":visible")) {
 +
mouseX = e.pageX;
 +
mouseY = e.pageY;
 +
 +
redrawReady = true;
 +
registerConstantCheck();
 +
}
 +
});
 +
 +
function registerConstantCheck() {
 +
if (!animating) {
 +
animating = true;
 +
 +
window.setTimeout(callCheck, 15);
 +
}
 +
}
 +
 +
function callCheck() {
 +
sizeDockIcons();
 +
 +
animating = false;
 +
 +
if (redrawReady) {
 +
redrawReady = false;
 +
registerConstantCheck();
 +
}
 +
}
 +
 +
//do the maths and resize each icon
 +
function sizeDockIcons() {
 +
dock.find("li").each(function() {
 +
//find the distance from the center of each icon
 +
var centerX = $(this).offset().left + ($(this).outerWidth()/2.0);
 +
var centerY = $(this).offset().top + ($(this).outerHeight()/2.0);
 +
 +
var dist = distance(centerX, centerY, mouseX, mouseY);
 +
 +
//determine the new sizes of the icons from the mouse distance from their centres
 +
var newSize =  (1 - Math.min(1, Math.max(0, dist/proximity))) * iconDiff + iconSmall;
 +
$(this).find("a").css({width: newSize});
 +
});
 +
}
 +
});
 +
</script>
 +
 +
 +
    </head>
 +
    <body>
 +
<script>
 +
Get_IE_Version();
 +
</script>
 +
<h1 class="title">Moleskine Notebook with jQuery Booklet</h1>
 +
<div class="book_wrapper">
 +
<a id="next_page_button"></a>
 +
<a id="prev_page_button"></a>
 +
<div id="loading" class="loading">Loading pages...</div>
 +
<div id="mybook" style="display:none;">
 +
<div class="b-load">
 +
<div>
 +
<img src="images/1.jpg" alt=""/>
 +
<h1>Slider Gallery</h1>
 +
<p>This tutorial is about creating a creative gallery with a
 +
slider for the thumbnails. The idea is to have an expanding
 +
thumbnails area which opens once an album is chosen.
 +
The thumbnails will scroll to the end and move back to
 +
the first image. The user can scroll through the thumbnails
 +
by using the slider controls. When a thumbnail is clicked,
 +
it moves to the center and the full image preview opens.</p>
 +
<a href="http://tympanus.net/codrops/2010/10/07/slider-gallery/" target="_blank" class="article">Article</a>
 +
<a href="http://tympanus.net/Tutorials/SliderGallery/" target="_blank" class="demo">Demo</a>
 +
</div>
 +
<div>
 +
<img src="images/2.jpg" alt="" />
 +
<h1>Animated Portfolio Gallery</h1>
 +
<p>Today we will create an animated portfolio gallery with jQuery.
 +
The gallery will contain a scroller for thumbnails and a
 +
content area where we will display details about the portfolio
 +
item. The image can be enlarged by clicking on it, making
 +
it appear as an overlay.</p>
 +
<a href="http://tympanus.net/codrops/2010/11/14/animated-portfolio-gallery/" target="_blank" class="article">Article</a>
 +
<a href="http://tympanus.net/Tutorials/AnimatedPortfolioGallery/" target="_blank" class="demo">Demo</a>
 +
</div>
 +
<div>
 +
<img src="images/3.jpg" alt="" />
 +
<h1>Annotation Overlay Effect</h1>
 +
<p>Today we will create a simple overlay effect to display annotations in e.g. portfolio
 +
items of a web designers portfolio. We got the idea from the wonderful
 +
portfolio of www.rareview.com where Flash is used to create the
 +
effect. We will use jQuery.</p>
 +
<a href="http://tympanus.net/codrops/2010/10/12/annotation-overlay-effect/" target="_blank" class="article">Article</a>
 +
<a href="http://tympanus.net/Tutorials/AnnotationOverlayEffect/" target="_blank" class="demo">Demo</a>
 +
</div>
 +
<div>
 +
<img src="images/4.jpg" alt="" />
 +
<h1>Bubbleriffic Image Gallery</h1>
 +
<p>In this tutorial we will create a bubbly image gallery that
 +
shows your images in a unique way. The idea is to show the
 +
thumbnails of albums in a rounded fashion allowing the
 +
user to scroll them automatically by moving the mouse.
 +
Clicking on a thumbnail will zoom in a big circle and
 +
the full image which will be automatically resized to
 +
fit into the screen.</p>
 +
<a href="http://tympanus.net/codrops/2010/12/10/bubbleriffic-image-gallery/" target="_blank" class="article">Article</a>
 +
<a href="http://tympanus.net/Tutorials/BubblerifficImageGallery/" target="_blank" class="demo">Demo</a>
 +
</div>
 +
<div>
 +
<img src="images/5.jpg" alt="" />
 +
<h1>Collapsing Site Navigation</h1>
 +
<p>Today we will create a collapsing menu that contains vertical
 +
navigation bars and a slide out content area. When hovering
 +
over a menu item, an image slides down from the top and a
 +
submenu slides up from the bottom. Clicking on one of the
 +
submenu items will make the whole menu collapse like a card
 +
deck and the respective content area will slide out.</p>
 +
<a href="http://tympanus.net/codrops/2010/09/06/collapsing-site-navigation/" target="_blank" class="article">Article</a>
 +
<a href="http://tympanus.net/Tutorials/CollapsingSiteNavigation/" target="_blank" class="demo">Demo</a>
 +
</div>
 +
<div>
 +
<img src="images/6.jpg" alt="" />
 +
<h1>Custom Animation Banner</h1>
 +
<p>In today’s tutorial we will be creating a custom animation banner with jQuery.
 +
The idea is to have different elements in a banner that will
 +
animate step-wise in a custom way.</p>
 +
<p>We will be using the jQuery Easing Plugin and the jQuery 2D
 +
Transform Plugin to create some nifty animations.</p>
 +
<a href="http://tympanus.net/codrops/2010/10/18/custom-animation-banner/" target="_blank" class="article">Article</a>
 +
<a href="http://tympanus.net/Tutorials/CustomAnimationBanner/" target="_blank" class="demo">Demo</a>
 +
</div>
 +
<div>
 +
<img src="images/7.jpg" alt="" />
 +
<h1>Full Page Image Gallery</h1>
 +
<p>In this tutorial we are going to create a stunning full page
 +
gallery with scrollable thumbnails and a scrollable full
 +
screen preview. The idea is to have a thumbnails bar at
 +
the bottom of the page that scrolls automatically when
 +
the user moves the mouse. When a thumbnail is clicked,
 +
it moves to the center of the page and the full screen
 +
image is loaded in the background.</p>
 +
<a href="http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/" target="_blank" class="article">Article</a>
 +
<a href="http://tympanus.net/Tutorials/FullPageImageGallery/" target="_blank" class="demo">Demo</a>
 +
</div>
 +
<div>
 +
<img src="images/8.jpg" alt="" />
 +
<h1>Hover Slide Effect</h1>
 +
<p>Today we will create a neat effect with some images using
 +
jQuery. The main idea is to have an image area with several
 +
images that slide out when we hover over them, revealing
 +
other images. The sliding effect will be random, i.e.
 +
the images will slide to the top or bottom, left or
 +
right, fading out or not. When we click on any area,
 +
all areas will slide their images out.</p>
 +
<a href="http://tympanus.net/codrops/2010/11/16/hover-slide-effect/" target="_blank" class="article">Article</a>
 +
<a href="http://tympanus.net/Tutorials/HoverSlideEffect/" target="_blank" class="demo">Demo</a>
 +
</div>
 +
<div>
 +
<img src="images/9.jpg" alt="" />
 +
<h1>Merging Image Boxes</h1>
 +
<p>Today we will show you a nice effect for images with jQuery.
 +
The idea is to have a set of rotated thumbnails that,
 +
once clicked, animate to form the selected image.
 +
You can navigate through the images with previous
 +
and next buttons and when the big image gets clicked
 +
it will scatter into the little box shaped thumbnails again.</p>
 +
<a href="http://tympanus.net/codrops/2010/11/30/merging-image-boxes/" target="_blank" class="article">Article</a>
 +
<a href="http://tympanus.net/Development/MergingImageBoxes/" target="_blank" class="demo">Demo</a>
 +
</div>
 +
<div>
 +
<img src="images/10.jpg" alt="" />
 +
<h1>Compact News Previewer</h1>
 +
<p>Today we will create a news previewer that let’s you
 +
show your latest articles or news in a compact way.
 +
The news previewer will show some list of articles
 +
on the left side and the preview of the article with a
 +
longer description on the right. Once a news on the left
 +
is clicked, the preview will slide in.</p>
 +
<a href="http://tympanus.net/codrops/2010/10/03/compact-news-previewer/" target="_blank" class="article">Article</a>
 +
<a href="http://tympanus.net/Tutorials/CompactNewsPreviewer/" target="_blank" class="demo">Demo</a>
 +
</div>
 +
<div>
 +
<img src="images/11.jpg" alt="" />
 +
<h1>Overlay Effect Menu</h1>
 +
<p>In this tutorial we are going to create a simple menu
 +
that will stand out once we hover over it by covering
 +
everything except the menu with a dark overlay.
 +
The menu will stay white and a submenu area will
 +
expand. We will create this effect using jQuery.</p>
 +
<a href="http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/" target="_blank" class="article">Article</a>
 +
<a href="http://tympanus.net/Tutorials/OverlayEffectMenu/" target="_blank" class="demo">Demo</a>
 +
</div>
 +
<div>
 +
<img src="images/12.jpg" alt="" />
 +
<h1>Polaroid Photobar Gallery</h1>
 +
<p>In this tutorial we are going to create an image gallery
 +
with a Polaroid look. We will have albums that will expand
 +
to sets of slightly rotated thumbnails that pop out on hover.
 +
The full image will slide in from the bottom once a thumbnail
 +
is clicked. In the full image view the user can navigate
 +
through the pictures or simply choose another thumbnail
 +
to be displayed.</p>
 +
<a href="http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/" target="_blank" class="article">Article</a>
 +
<a href="http://tympanus.net/Tutorials/PolaroidPhotobarGallery/" target="_blank" class="demo">Demo</a>
 +
</div>
 +
<div>
 +
<img src="images/13.jpg" alt="" />
 +
<h1>Pull Out Content Panel</h1>
 +
<p>In this tutorial we will create a content panel that
 +
slides out at a predefined scroll position. It will
 +
reveal a teaser with related content and it can be
 +
expanded to full page size to show more. A custom
 +
slider allows to scroll through many items in the
 +
panel.</p>
 +
<a href="http://tympanus.net/codrops/2010/11/01/pull-out-content-panel/" target="_blank" class="article">Article</a>
 +
<a href="http://tympanus.net/Tutorials/PullOutContentPanel/" target="_blank" class="demo">Demo</a>
 +
</div>
 +
<div>
 +
<img src="images/14.jpg" alt="" />
 +
<h1>Thumbnails Navigation Gallery</h1>
 +
<p>In this tutorial we are going to create an extraordinary
 +
gallery with scrollable thumbnails that slide out from a
 +
navigation. We are going to use jQuery and some CSS3
 +
properties for the style. The main idea is to have a
 +
menu of albums where each item will reveal a horizontal
 +
bar with thumbnails when clicked.</p>
 +
<a href="http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/" target="_blank" class="article">Article</a>
 +
<a href="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/" target="_blank" class="demo">Demo</a>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
 +
 
 +
        <!-- The JavaScript -->
 +
 
 +
        <script type="text/javascript">
 +
$(function() {
 +
var $mybook = $('#mybook');
 +
var $bttn_next = $('#next_page_button');
 +
var $bttn_prev = $('#prev_page_button');
 +
var $loading = $('#loading');
 +
var $mybook_images = $mybook.find('img');
 +
var cnt_images = $mybook_images.length;
 +
var loaded = 0;
 +
//preload all the images in the book,
 +
//and then call the booklet plugin
 +
 
 +
$mybook_images.each(function(){
 +
var $img = $(this);
 +
var source = $img.attr('src');
 +
$('<img/>').load(function(){
 +
++loaded;
 +
if(loaded == cnt_images){
 +
$loading.hide();
 +
$bttn_next.show();
 +
$bttn_prev.show();
 +
$mybook.show().booklet({
 +
name:              null,                            // name of the booklet to display in the document title bar
 +
width:              800,                             // container width
 +
height:            500,                            // container height
 +
speed:              600,                            // speed of the transition between pages
 +
direction:          'LTR',                          // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
 +
startingPage:      0,                              // index of the first page to be displayed
 +
easing:            'easeInOutQuad',                // easing method for complete transition
 +
easeIn:            'easeInQuad',                    // easing method for first half of transition
 +
easeOut:            'easeOutQuad',                  // easing method for second half of transition
 +
 
 +
closed:            true,                          // start with the book "closed", will add empty pages to beginning and end of book
 +
closedFrontTitle:  null,                            // used with "closed", "menu" and "pageSelector", determines title of blank starting page
 +
closedFrontChapter: null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
 +
closedBackTitle:    null,                            // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page
 +
closedBackChapter:  null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page
 +
covers:            false,                          // used with  "closed", makes first and last pages into covers, without page numbers (if enabled)
 +
 
 +
pagePadding:        10,                              // padding for each page wrapper
 +
pageNumbers:        true,                            // display page numbers on each page
 +
 
 +
hovers:            false,                            // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
 +
overlays:          false,                            // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
 +
tabs:              false,                          // adds tabs along the top of the pages
 +
tabWidth:          60,                              // set the width of the tabs
 +
tabHeight:          20,                              // set the height of the tabs
 +
arrows:            false,                          // adds arrows overlayed over the book edges
 +
cursor:            'pointer',                      // cursor css setting for side bar areas
 +
 
 +
hash:              true,                          // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled
 +
keyboard:          true,                           // enables navigation with arrow keys (left: previous, right: next)
 +
next:              $bttn_next,          // selector for element to use as click trigger for next page
 +
prev:              $bttn_prev,          // selector for element to use as click trigger for previous page
 +
 
 +
menu:              null,                            // selector for element to use as the menu area, required for 'pageSelector'
 +
pageSelector:      false,                          // enables navigation with a dropdown menu of pages, requires 'menu'
 +
chapterSelector:    false,                          // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'
 +
 
 +
shadows:            true,                            // display shadows on page animations
 +
shadowTopFwdWidth:  166,                            // shadow width for top forward anim
 +
shadowTopBackWidth: 166,                            // shadow width for top back anim
 +
shadowBtmWidth:    50,                              // shadow width for bottom shadow
 +
 
 +
before:            function(){},                    // callback invoked before each page turn animation
 +
after:              function(){}                    // callback invoked after each page turn animation
 +
});
 +
}
 +
}).attr('src',source);
 +
});
 +
 +
});
 +
        </script>
 +
 +
<!--bottom dock -->
 +
<div id="dock">
 +
<ul>
 +
<li><a href="#/page/1"><span>Address</span><img src="img/icon-address.png" alt="[address]" /></a></li><!--
 +
--><li><a href="#/page/3"><span>Band</span><img src="img/icon-band.png" alt="[band]" /></a></li><!--
 +
--><li><a href="#/page/5"><span>Calendar</span><img src="img/icon-calendar.png" alt="[calendar]" /></a></li><!--
 +
--><li class="active"><a href="#chat"><span>Chat</span><img src="img/icon-chat.png" alt="[chat]" /></a></li><!--
 +
--><li class="active"><a href="#music"><span>Music</span><img src="img/icon-music.png" alt="[music]" /></a></li><!--
 +
--><li><a href="#photo"><span>Photo</span><img src="img/icon-photo.png" alt="[photo]" /></a></li><!--
 +
--><li><a href="#text"><span>Text</span><img src="img/icon-text.png" alt="[text]" /></a></li><!--
 +
--><!-- <li class="seperator"></li> --><!--
 +
--><li><a href="#folder?src=/apps/"><span>Applications</span><img src="img/icon-applications.png" alt="[apps]" /></a></li><!--
 +
--><li><a href="#folder?src=/pictures/"><span>Pictures</span><img src="img/icon-pictures.png" alt="[pictures]" /></a></li><!--
 +
--><li><a href="#folder?src=/documents/"><span>Documents</span><img src="img/icon-documents.png" alt="[documents]" /></a></li><!--
 +
--><li><a href="#bin"><span>Bin</span><img src="img/icon-bin.png" alt="[bin]" /></a></li>
 +
</ul>
 +
</div>
 +
    </body>
 +
</html>

Revision as of 01:54, 27 August 2013

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Moleskine Notebook with jQuery Booklet

Moleskine Notebook with jQuery Booklet

Loading pages...

Retrieved from "http://2013.igem.org/Team:UESTC_Life"