Arkiv för February, 2011
Veckans länktips – 2011-02-27
-
Google kan ändra titeln för din sajt i deras sökträfflista, om dom tycker den är för dålig!
-
Ett js-lib speciellt utvecklat för mobiler – ett mer lättviktigt alternativ till jQuery (via @henrikekelof).
-
WordPress standardtema portat till html5.
-
Plugin som kollar hur säkert lösenordet som användaren väljer är – med en twist
-
Bra genomgång av olika metoder att gömma innehåll på sidan, men så att det fortfarande är tillgängligt för skärmläsare etc.
-
Så skapar du tillgängliga flikar med hjälp av WAI-ARIA (via @icaaq).
Att skapa och lägga till html-element med jQuery
Det finns många olika sätt att skapa nya html-element på en sida med hjälp av jQuery. För att, till exempel, skapa en länk kan du skriva så här:
link = $('<a href="http://lillbra.se">Min blogg</a>');
$('body').append(link);
Eller så kan du infoga en html-sträng direkt, så här:
$('body').append('<a href="http://lillbra.se">Min blogg</a>');
Men om elementet man skapar ska ha många attribut, blir det ofta kladdigt i koden med långa strängar. Så med jQuery kan du skicka med attribut, och även fästa events, till elementet genom en hashmap direkt när du skapar det:
var link = $('<a />', {
className: 'close',
href: '#',
text: "Hide more info",
click: function(e){
e.preventDefault();
$(this).parent().slideToggle();
}
});
Snyggt och överskådligt! Se fler exempel på detta här: Beatiful Element Creation With jQuery (via Jonathan Cristopher).
Även detta sätt kan dock bli rörigt om man ska bygga en större html-struktur, med nästlade element.
Då kan man använda templates. Tanken med templates att du skapar en mall, i form av en html-struktur, som du sedan fyller med data, t.ex. ett eller flera json-objekt. jQuery har sitt eget template-plugin, men det finns även andra som Mustache och Underscore.
Först skapar man alltså mallen – den kan ligga inline som en script-tagg i html-koden:
<script id="vcard-template" type="text/x-jquery-tmpl">
<div class="vcard">
<a class="fn url" href="${ website }">${ name }</a>
<span class="org">${ company }</span>
</div>
</script>
Sedan hämtar man ut mallen och fyller den med sitt data, för att sedan infoga det på sidan:
author = { name : 'Jonatan Larsson',
website: 'http://lillbra.se',
company: 'Valtech' };
$('#vcard-template').tmpl(author).appendTo('#contact');
Se fler exempel på hur du använder jQuerys templates här.
När man infogar element på sidan bör man tänka på att uppdatera DOM-trädet så få gånger som möjligt. Om man t.ex. skapar en lista så ska man undvika att infoga ett li-element åt gången:
list = $('#my-list');
for (var i=0; i<items.length; i++){
list.append('<li>' + items[i] + '</li>');
}
Istället kan man skapa html för alla li-element och sedan injecta dom en enda gång:
htmlItems = '';
for (var i=0; i<items.length; i++){
htmlItems += '<li>' + items[i] + '</li>');
}
$('#my-list').html(htmlItems);
Angående prestanda kan det ibland också vara bättre att skapa eller infoga element med native javascript, till exempel använda .innerHTML() istället för .html(), eller .createElement() istället för strängar. Den nyfikne kan även kolla in prestandamätningar mellan olika template-plugins här. Lycka till!
Veckans länktips – 2011-02-20
-
Verktyg för att validera/kontrollera javascript-kod, efter regler och konventioner som du själv kan ställa in (en fork av jslint).
-
Har html5 bidragit till att vi måste använda user-agent sniffing i allt större grad (via @icaaq)?
-
Gratis molntjänst där du snabbt och enkelt kan spara json-data. Finns ett tillhörande js-lib.
-
Användbara exempel på olika varianter och möjligheter med css3-skuggor.
-
Bra genomgång och översikt över vilka typsnitt Google Web Fonts erbjuder och hur du använder dem.
-
Detaljerad beskrivning av hur du bäst infogar video i html5 med egna knappkontroller.
-
Lite om bristerna i html5-stödet i nästa version av Internet Explorer
Jag heter Jonatan Larsson och jobbar som webbutvecklare. Det här är min blogg om webbutveckling och webb- trender. Du kan läsa mer om mig här.
