Grundlæggende
Man har nogle gange nogle ting i rammer, som man vil kunne vise eller ikke vise. I det følgende vil jeg beskrive, hvordan man kan bruge jQuery til at skifte mellem vise og skjule iFrames.
jQuery er en special form for JavaScript, hvor man har samlet en del funktionalitet i en speciel sprogkonstruktion. Som det hedder i w3Schools “jQuery is a lightweight, “write less, do more”, JavaScript library.” Det vil sige, at når man bruger jQuery, skal man også have adgang til biblioteket. Dette bibliotek er (b.l. andre) indlæst i WordPress i forvejen.
jQuery er ment til at gøre JavaScript programmer simplere, og den grundlæggende syntaks er:
$(selector).action()
- $ til at definere/tilgå jQuery biblioteket ($ er et alias for jQuery)
- En (selektor) til at formulere en forespørgsel eller finde HTML elementer
- En JQuery action() til at udføre en handling på de fundne elementer. Action kan her også være en event, fx muse klik,
Et eksempel er som følger
$(“button”).click();
$(“p”).hide();
Dette skjuler alle HTML elementer som er <p> type, (men ikke “p.dontHide”, som udtrykkes ved <p class=”dontHide”>) Selektoren her er “p”, en anden selektor er “p#identitet” eller “p.specielKlasse”
Når man vil bruge jQuery, så skal hele dokumentet være færdig-indlæst, det specificerer man ved at indlejre alle jQuery sætningerne som følger:
$(document).ready(function(){
// jQuery funktion erne skrives her…
});
og den første funktion specificerer, at JQuery først går i gang, når dokumentet er indlæst.
Funktioner og events i jQuery
Funktionerne i jQuery handler altså om finde selektorer og udføre handlinger på dem, der møder søgekriterierne. Der er også begivenheder, som når man klikker på en knap. I jQuery har de fleste begivenheder (events) en tilsvarende jQuery funktion, som i *.click() eksemplet oven for. Og vi vil gerne kunne handle på det. Her er en beskrivelse taget fra w3shcools
$(“p”).click(function(){
// Handling specificeres her!!
});
Eksempel:
$(“p”).click(function(){
$(this).hide();
});
Noter at vi definerer handlingen i en ny funktion. Her betyder dette, at hvis vi klikker på en p-tag, så skal vi skjule denne. Det kunne også være en en <span> element, der ved et klik får p-elementet til at blive skjult. Så ville der stå
$(“span”).click(function(){
$(“p”).hide();
});
Her skal der noteres, at jQuery skjuler ALLE p-tags, eftersom de møder søgekriterierne. Hvis man vil specificere handlinger for flere events, så kan man bruge on-funktionen. Et eksempel på det som nedenstående:
$(“p”).on({
mouseenter: function(){
$(this).css(“background-color”, “lightgray”);
},
mouseleave: function(){
$(this).css(“background-color”, “lightblue”);
},
click: function(){
$(this).css(“background-color”, “yellow”);
}
});
Her defineres der forskellige funktioner for 3 forskellige events. Hvor baggrundsfarven for p-elementet bliver lysegråt, når man flytter musen henover elementet, – lyseblåt, når man fjerner musepilen fra elementet, og når man klikker på den, bliver den gul. Den ender med at blive lyseblå til sidst, da man jo skal ud med musepilen.
Vise og skjule iFrames
Foruden hide og show funkktionerne, har vi også en funktion, som hedder “toggle”. Den kan bruges til at skiftes til at vise og skjule et element. Et eksempel på dette er, som følger. Et eksempel på dette er
$(“button”).click(function(){
$(“p”).toggle();
});
Dette vil vi gerne anvende på en iFrame element, som ligger ved siden af et span-element. I iFrame elementet indlæses et nyt indhold, som følger
<span class=”iframe”><strong>Når man klikker her skiftes iFrame til at være synlig og ikke synlig</strong></span>
<iframe style=”display: none;” src=”/wp-content/KFMH-Nyt/nyt/2011/nyt20110810.html” width=”100%” height=”400px”></iframe>
Og vores jQuery script kunne se ud som følger:
$(document).ready(function(){
$(“.iframe”).click(function() {
$(“iframe”).toggle();
});
});
Denne funktion vil skiftevis vise og skjule iFrame-elementet, når man klikker (span) elementet af klasse “iFrame”. Noter, også at den vil vise og skjule ALLE iFrames, som den finder ved selektor “iFrame”.
Hvis man nu forestiller sig, at man har en liste af overskrifter, – hvor man kan hente indhold, skjule indhold ved at klikke på overskriften. Så kan man netop benytte denne funktion. Men her skal der en mekanisme til, så at ikke alle iFrames åbnes på en gang. Derfor giver vi vores iFrames en entydig identitet, og noterer det oppe i overskriften, så kun dette iFrame vises og ikke de andre, når man klikker på overskriften. Det bliver til
<td> <span class=”iframe” name=”d20110810″><strong>Vis iFrame med identitet #d20110810 og ikke andre</strong></span><iframe id=”d20110810″ style=”display: none;” src=”/wp-content/KFMH-Nyt/nyt/2011/nyt20110810.html” width=”100%” height=”400px”></iframe></td>
Og tilsvarende jQuery script:
$(document).ready(function(){
$(“.iframe”).click(function() {
var id = “#” + $(this).prop(“id”); //dan identitet
$(“iframe”+id).toggle(); //iFrame med den identitet
});
});
Man bør også kunne bruge id i stedet for name i identifikationen af span-elementet, men i one.com WordPress virker det kun for name. Hvis du installerer WordPress på din egen maskine, kan du også bruge id i stedet for name. Du kan også risikere en fejl (der sker intet, når du klikker på overskriften). Det kan være, at der er opstået en konflikt situation i WordPress. En mulighed for at rette på det er at bruge sætningen
$ = jQuery.noConflict(true);
i starten, og så håbe, at fejlen forsvinder. I alt bliver vores jQuery script så som følger
$ = jQuery.noConflict(true);
$(document).ready(function(){
$(“.iframe”).click(function() {
var id = “#” + $(this).prop(“id”); //dan identitet
$(“iframe”+id).toggle(); //iFrame med den identitet
});
});
Hvis du så oplever, at der er et andet sted i websiden, der bruger jQuery, så den går i fejl i stedet for, så kan du prøve at erstatte $ med jQuery, og ikke udføre nonConflict sætningen.