På senaste tiden har jag pysslat en hel del med jQuery. I mitt förra tutorial utlovade jag ett enkelt och dynamiskt dragspel (eng. accordion).
Följande tutorial är ett bra alternativ till den som vill göra något snyggt utan att behöva överarbeta.
Dragspelet kommer att vara fullständigt justerbart (bakgrunderna på panelerna, typsnitt etc.).
Demo
.dragspel {
font-weight: bold;
width:300px;
border-width: 1px;
border-style: solid;
border-color: #000;}
h1 {
background-color:#666;
margin:0px;
padding:4px;
font-size:16px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000;}
h1:first-child {
border-style: none;}
.aktiv {
background-color:#CCC}
p {
padding:20px;}
Förklaring
Jag väljer att skapa några klasser som ska styra utseendet på dragspelet.
classen .dragspel ska innehålla headings och p-taggar.
.aktiv kommer att ändra bakgrundsfärg på den flik som är aktiv.
<div class=”dragspel”>
<h1>H1</h1>
<p>p</p>
<h1>H1</h1>
<p>p</p>
<h1>H1</h1>
<p>p</p>
</div>
$(document).ready(function(){
$(”.dragspel h1:first”).addClass(”aktiv”);
$(”.dragspel p:not(:first)”).hide();
$(”.dragspel h1″).click(function(){
$(this).next(”p”).slideToggle(”fast”)
.siblings(”p:visible”).slideUp(”slow”);
$(this).toggleClass(”aktiv”);
$(this).siblings(”h1″).removeClass(”aktiv”);
});
});
Förklaring
Vid initiering, övre delen: vi lägger på aktiv-classen på det första h1-elementet och gömmer alla p-element, förrutom det första!
Vid klick, undre delen: vid klick på ett h1-element som ligger i .dragspel ska nästa p-element (i förhållande till det h1-element som klickas) slideToggla, dvs åka upp om det är nere och vise versa. Övriga synliga p-element (siblings) ska glida uppåt (därmed stänga en flik).
Det klickade h1-elementet ska också Toggla classen aktiv, och därmed byta bakgrund. Classer på övriga (siblings) h1-element ska raderas.
Att skriva kod ovan från scratch kan givetvis vara både svårt och förvirrande i början, men det släpper efter ett tag. Läs hur andra gjort och försök förstå koden!
bra!
jag håller på och lär mig css nu.
skall visa en författare för varje post.
meningen är att ha min avatarbild så jag använder;
<?php
echo get_avatar( $id_or_email, $size = ’96′, $default = ” );
?>
samt funktioner för att hämta namn och mail.
nu är frågan hur jag får detta snyggt överst i inlägget! vill ha bilden till vänster och namn och mail till höger om bilden.
/david
finns ju många olika sätt att göra det på..
Du kan prova att lägga in det i 2 olika och sedan köra float:left; på den ena och float:right; på den andra (div:en), sedan slänga in din text i dem..
så tex:
.left {float:left;}
.right {float:right;}
text här
text här
jag fattar inte riktigt vad du menar, men jag löste det i går. du kan väl kommentera på min post?
/david
om du hade skrivit:
$(”.dragspel p”).hide();
i stället för
$(”.dragspel p:not(:first)”).hide();
,hade då alla ”p” varit gömda från start? tycker det verkar mer logiskt om man ser det som en kategorilista..
Ja det verkar logiskt, tänkte bara att man kanske vill visa lite innehåll från början. Då bör man också ta bort raden i början där det står något om att lägga på klassen aktiv på det första elementet.
[...] Fortsättning: Del 3 – dragspel [...]