Team:Hong Kong HKUST/notebook

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
<script type="text/javascript" src="javascript/jquery.cookie.js"></script> <!--required only if using cookies-->
-
    <title>jQuery Accordion Demo</title>
+
     <script type="text/javascript" src="javascript/jquery.accordion.js"></script>
-
    <link rel="stylesheet" href="css/github.css" type="text/css" />
+
     <script type="text/javascript">
-
    <link rel="stylesheet" href="css/demo2.css" type="text/css" />
+
-
</head>
+
-
<body>
+
-
<h1>jQuery Accordion Plugin Demo/FAQ</h1>
+
-
<div id="body">
+
-
<!-- panel -->
+
-
<div class="accordion" id="section1">Overview<span></span></div>
+
-
<div class="container">
+
-
    <div class="content">
+
-
        <p>
+
-
            This plugin enables an accordion that can use cookies to persist between pages or visits.
+
-
            This plugin was made with the jQuery 1.10.1.
+
-
        </p>
+
-
        <p>
+
-
            If you find any errors or have suggested changes, please post an issue on the
+
-
            github project: <a href="http://github.com/juven14/Accordion" title="jQuery Accordion">http://github.com/juven14/Accordion</a>
+
-
        </p>
+
-
    </div>
+
-
</div>
+
-
<!-- end panel -->
+
-
<!-- panel -->
+
-
<div class="accordion" id="section2">Add HTML<span></span></div>
+
-
<div class="container">
+
-
    <div class="content">
+
-
        <p>
+
-
            You need to add two parts, a header and a container.  The header div is for the label and the open/close
+
-
            text/images.  The container will hold any html/text you want to slide up/down.
+
-
        </p>
+
-
<pre><code>
+
-
    &lt;div class=&quot;accordion&quot; id=&quot;section1&quot;&gt;Heading&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
+
-
    &lt;div class=&quot;container&quot;&gt;
+
-
        &lt;div class=&quot;content&quot;&gt;
+
-
            &lt;div&gt;Sample Content&lt;/div&gt;
+
-
            &lt;p&gt;Content here....&lt;/p&gt;
+
-
        &lt;/div&gt;
+
-
    &lt;/div&gt
+
-
    &lt;div class=&quot;accordion&quot; id=&quot;section2&quot;&gt;Heading&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
+
-
    &lt;div class=&quot;container&quot;&gt;
+
-
        &lt;div class=&quot;content&quot;&gt;
+
-
            &lt;div&gt;Sample Content&lt;/div&gt;
+
-
            &lt;p&gt;Content here....&lt;/p&gt;
+
-
        &lt;/div&gt;
+
-
    &lt;/div&gt
+
-
    &lt;div class=&quot;accordion&quot; id=&quot;section3&quot;&gt;Heading&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
+
-
    &lt;div class=&quot;container&quot;&gt;
+
-
        &lt;div class=&quot;content&quot;&gt;
+
-
            &lt;div&gt;Sample Content&lt;/div&gt;
+
-
            &lt;p&gt;Content here....&lt;/p&gt;
+
-
        &lt;/div&gt;
+
-
    &lt;/div&gt
+
-
</code></pre>
+
-
    </div>
+
-
</div>
+
-
<!-- end panel -->
+
-
<!-- panel -->
+
-
<div class="accordion" id="section3">Add the Javascript<span></span></div>
+
-
<div class="container">
+
-
    <div class="content">
+
-
        <p>
+
-
            Add in the javascript:
+
-
        </p>
+
-
<pre class="javascript"><code>
+
-
    &lt;script type=&quot;text/javascript&quot; src=&quot;javascript/jquery.cookie.js&quot;&gt;&lt;/script&gt; &lt;!--required only if using cookies--&gt
+
-
     &lt;script type=&quot;text/javascript&quot; src=&quot;javascript/jquery.accordion.js&quot;&gt;&lt;/script&gt;
+
-
     &lt;script type=&quot;text/javascript&quot;&gt;
+
         $(document).ready(function() {
         $(document).ready(function() {
             $('.accordion').accordion({defaultOpen: 'some_id'}); //some_id section1 in demo
             $('.accordion').accordion({defaultOpen: 'some_id'}); //some_id section1 in demo
         });
         });
-
     &lt;/script&gt;
+
     </script>
-
</code></pre>
+
</head>
 +
<body>
 +
 
 +
    <div class="accordion" id="section1">Heading<span></span></div>
 +
    <div class="container">
 +
        <div class="content">
 +
            <div>Sample Content</div>
 +
            <p>Content here....</p>
 +
        </div>
     </div>
     </div>
-
</div>
+
    <div class="accordion" id="section2">Heading<span></span></div>
-
<!-- end panel -->
+
    <div class="container">
-
<!-- panel -->
+
        <div class="content">
-
<div class="accordion" id="section4">Default Options<span></span></div>
+
            <div>Sample Content</div>
-
<div class="container">
+
            <p>Content here....</p>
-
    <div class="content">
+
         </div>
-
        <p>The plugin default options are as follows:</p>
+
-
<pre class="javascript"><code>{
+
-
    cssClose: 'accordion-close', //class you want to assign to a closed accordion header
+
-
    cssOpen: 'accordion-open', //class you want to assign an opened accordion header
+
-
    cookieName: 'accordion', //name of the cookie you want to set for this accordion
+
-
    cookieOptions: { //cookie options, see cookie plugin for details
+
-
        path: '/',
+
-
        expires: 7,
+
-
        domain: '',
+
-
        secure: ''
+
-
    },
+
-
    defaultOpen: '', //id that you want opened by default
+
-
    speed: 'slow', //speed of the slide effect
+
-
    bind: 'click', //event to bind to, supports click, dblclick, mouseover and mouseenter
+
-
    animateOpen: function (elem, opts) { //replace the standard slideDown with custom function
+
-
        elem.next().stop(true, true).slideDown(opts.speed);
+
-
    },
+
-
    animateClose: function (elem, opts) { //replace the standard slideUp with custom function
+
-
        elem.next().stop(true, true).slideUp(opts.speed);
+
-
    },
+
-
    loadOpen: function (elem, opts) { //replace the default open state with custom function
+
-
        elem.next().show();
+
-
    },
+
-
    loadClose: function (elem, opts) { //replace the default close state with custom function
+
-
        elem.next().hide();
+
-
    }
+
-
}</code></pre>
+
-
         <div>Details</div>
+
-
        <ul>
+
-
            <li>cssClose - class assigned when closed</li>
+
-
            <li>cssOpen - class assigned when opened</li>
+
-
            <li>cookieName - cookie name for persisting the opened panel</li>
+
-
            <li>cookieOptions - see jquery.cookie plugin for more info</li>
+
-
            <li>defaultOpen - id that you want opened by default</li>
+
-
            <li>speed - animation speed</li>
+
-
            <li>bind - event that triggers the collapsible, only 4 are supported: click, dblclick, mouseenter, and
+
-
                mouseover</li>
+
-
            <li>animateOpen - custom callback to animate opening</li>
+
-
            <li>animateClose - custom callback to animate closing</li>
+
-
            <li>loadOpen - custom callback to animate default opening</li>
+
-
            <li>loadClose - custom callback to animate default closing</li>
+
-
        </ul>
+
     </div>
     </div>
-
</div>
+
    <div class="accordion" id="section3">Heading<span></span></div>
-
<!-- end panel -->
+
    <div class="container">
-
<!-- panel -->
+
        <div class="content">
-
<div class="accordion" id="section6">Custom CSS<span></span></div>
+
            <div>Sample Content</div>
-
<div class="container">
+
             <p>Content here....</p>
-
    <div class="content">
+
        </div>
-
        <p>
+
-
            In the above header example HTML you will see an empty span, this is useful if you wish to
+
-
            assign an open/close image.
+
-
        </p>
+
-
        <p>
+
-
             This plugin will append a user defined (or default, see options above) class to
+
-
            header of the accordion.  You can use this to swap out the images or style
+
-
            the different states of your accordion.
+
-
        </p>
+
-
<pre class="css"><code>    .accordion div.collapse-open {}
+
-
    .accordion div.collapse-close {}
+
-
    .accordion div.collapse-open span {}
+
-
    .accordion div.collapse-close span {}
+
-
</code></pre>
+
     </div>
     </div>
-
</div>
 
-
<!-- end panel -->
 
-
<!-- panel -->
 
-
<div class="accordion" id="section7">Custom Javascript<span></span></div>
 
-
<div class="container">
 
-
    <div class="content">
 
-
        <p>You can additionally add in custom animation functions such as below:</p>
 
-
<pre><code>
 
-
    $(document).ready(function() {
 
-
 
-
        //custom animation for open/close
 
-
        $.fn.slideFadeToggle = function(speed, easing, callback) {
 
-
            return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
 
-
        };
 
-
 
-
        $('.accordion').accordion({
 
-
            defaultOpen: 'section1',
 
-
            cookieName: 'nav',
 
-
            speed: 'slow',
 
-
            animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
 
-
                elem.next().stop(true, true).slideFadeToggle(opts.speed);
 
-
            },
 
-
            animateClose: function (elem, opts) { //replace the standard slideDown with custom function
 
-
                elem.next().stop(true, true).slideFadeToggle(opts.speed);
 
-
            }
 
-
        });
 
-
    });
 
-
</code></pre>
 
-
    </div>
 
-
</div>
 
-
<!-- end panel -->
 
-
<!-- panel -->
 
-
<div class="accordion" id="section8">Demo CSS<span></span></div>
 
-
<div class="container">
 
-
    <div class="content">
 
-
<pre class="css"><code>
 
-
    @CHARSET "UTF-8";
 
-
    #left_nav {
 
-
        width:250px;
 
-
    }
 
-
    #body {
 
-
        width:90%;
 
-
        float:left;
 
-
        margin:10px;
 
-
    }
 
-
    .accordion {
 
-
        margin: 0;
 
-
        padding:10px;
 
-
        height:20px;
 
-
        border-top:#f0f0f0 1px solid;
 
-
        background: #cccccc;
 
-
        font-family: Arial, Helvetica, sans-serif;
 
-
        text-decoration:none;
 
-
        text-transform:uppercase;
 
-
        color: #000;
 
-
        font-size:1em;
 
-
    }
 
-
    .accordion-open {
 
-
        background:#000;
 
-
        color: #fff;
 
-
    }
 
-
    .accordion-open span {
 
-
        display:block;
 
-
        float:right;
 
-
        padding:10px;
 
-
    }
 
-
    .accordion-open span {
 
-
        background:url(../images/minus.png) center center no-repeat;
 
-
    }
 
-
    .accordion-close span {
 
-
        display:block;
 
-
        float:right;
 
-
        background:url(../images/plus.png) center center no-repeat;
 
-
        padding:10px;
 
-
    }
 
-
    div.container {
 
-
        padding:0;
 
-
        margin:0;
 
-
    }
 
-
    div.content {
 
-
        background:#f0f0f0;
 
-
        margin: 0;
 
-
        padding:10px;
 
-
        font-size:.9em;
 
-
        line-height:1.5em;
 
-
        font-family:"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
 
-
    }
 
-
    div.content ul, div.content p {
 
-
        padding:0;
 
-
        margin:0;
 
-
        padding:3px;
 
-
    }
 
-
    div.content ul li {
 
-
        list-style-position:inside;
 
-
        line-height:25px;
 
-
    }
 
-
    div.content ul li a {
 
-
        color:#555555;
 
-
    }
 
-
    code {
 
-
        overflow:auto;
 
-
    }
 
-
</code></pre>
 
-
    </div>
 
-
</div>
 
-
<!-- end panel -->
 
-
</div>
 
-
<script type="text/javascript" src="javascript/jquery.min.js"></script>
 
-
<script type="text/javascript" src="javascript/highlight.pack.js"></script>
 
-
<script type="text/javascript" src="javascript/jquery.cookie.js"></script>
 
-
<script type="text/javascript" src="javascript/jquery.accordion.js"></script>
 
-
<script type="text/javascript">
 
-
    $(document).ready(function() {
 
-
 
-
        //syntax highlighter
 
-
        hljs.tabReplace = '    ';
 
-
        hljs.initHighlightingOnLoad();
 
-
 
-
        $.fn.slideFadeToggle = function(speed, easing, callback) {
 
-
            return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
 
-
        };
 
-
 
-
        //accordion
 
-
        $('.accordion').accordion({
 
-
            defaultOpen: 'section1',
 
-
            cookieName: 'accordion_nav',
 
-
            speed: 'slow',
 
-
            animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
 
-
                elem.next().stop(true, true).slideFadeToggle(opts.speed);
 
-
            },
 
-
            animateClose: function (elem, opts) { //replace the standard slideDown with custom function
 
-
                elem.next().stop(true, true).slideFadeToggle(opts.speed);
 
-
            }
 
-
        });
 
-
 
-
    });
 
-
</script>
 
</body>
</body>
</html>
</html>

Revision as of 12:42, 15 August 2013

Heading
Sample Content

Content here....

Heading
Sample Content

Content here....

Heading
Sample Content

Content here....

Retrieved from "http://2013.igem.org/Team:Hong_Kong_HKUST/notebook"