---menu---
::Headlines Reviews :
Home » » test-examples/tabslide/ test

test-examples/tabslide/ test

Blog | Sunday, June 8, 2014 | ---

---

test
=====================

Sliding Tab using Scriptaculous
===============================
<head>
  <title>script.aculo.us Effects functional test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="js/prototype.js" type="text/javascript"></script>
  <script src="js/effects.js" type="text/javascript"></script>
<script src="js/tabslide.js" type="text/javascript"></script>


<style>

#accordion {
border: 1px solid #1F669B;
width: 600px;
height: 310px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 11px;
position:relative !important;
display:block;
overflow:hidden;
background-image:url(images/aston.jpg);
background-repeat:no-repeat;
background-position:top left;
}

h3 {
font-size: 12px;
padding: 6px 6px 4px 35px;
margin: 0;
color:#fff;
border-bottom:1px solid #333333;
cursor:pointer;
display:block;
background-image:url(images/tab-left.gif);
background-position:top left;
background-repeat:no-repeat;
}

#visible {
background-image:url(images/tab-left-active.gif);
border-bottom:1px solid #DA1074;
}

.panel_body {
height:150px;
background-color:#333333;
display:block;
position:relative;
color:#FFFFFF;
}

.panel_body div {
padding:3px 5px;
}

.panel{
bottom:0px;
margin:0px;
padding:0px;
background-image:url(images/tab-right.gif);
background-position:top right;
background-repeat:repeat-x;
background-color:#333333;
}
.wrapper{
bottom:0px;
position:absolute;
}

</style>

</head>
<body>
<div id="accordion">



<div class="panel" id="panel1">
    <h3 id="visible">Panel 1</h3>
    <div id="panel1-body" class="panel_body">
        <div>
        This is the contents of this panel.
        </div>
    </div>
</div>

<div class="panel" id="panel2">

    <h3>Panel 2</h3>
    <div id="panel2-body" class="panel_body">
        <div>
        This is the contents of this panel.
        </div>
    </div>

</div>

<div class="panel" id="panel3">
    <h3>Panel 3</h3>
    <div id="panel3-body" class="panel_body">
        <div>
        This is the contents of this panel.
        </div>
    </div>
</div>

<div class="panel" id="panel4">
    <h3>Panel 4</h3>
    <div id="panel4-body" class="panel_body">
        <div>
        This is the contents of this panel.
        </div>
    </div>
</div>

<div class="panel" id="panel5">
    <h3>Panel 5</h3>
    <div id="panel5-body" class="panel_body">
        <div>
        This is the contents of this panel.
        </div>
    </div>
</div>

</div>
<script>init();</script>


</body>
</html>

===============
Share this article :

0 comments:

Speak up your mind

Tell us what you're thinking... !

 
Sitemap : Home | World reviews | Deportes
Tech Blog
Copyright © 2011-2014. Tutornesio - All Rights Reserved
Tutornecio Blog Index Archive