Det å lage en plugin til jQuery er enklere en de fleste tror.

For å lage en plugin, trenger du basis kunnskaper om jQuery, dette får du etter å ha lest litt i dokumentasjonen til dette geniale javascript-rammeverket.

Når dette er unnagjort, begynner du med å lage selve rammeverket (funksjonen) til din nye plugin.

$.fn.NAVN_PÅ_PLUGIN = function() {
   // Variabel for elementet som aktiverer pluginen
   var self = this;

   // Returnerer din plugin
   return this.each(function() {

   });
}

Når dette er gjort kan vi få vår nye plugin til å gjøre noe, f.eks markere teksten?

$.fn.minPlugin = function() {
   // Variabel for elementet som aktiverer pluginen
   var self = this;

   // Returnerer din plugin
   return this.each(function() {
      $(this).css({backgroundColor: '#f8dd29'});
   });
}

Nå kan du aktivere plugin’en din, på f. eks alle “span” elementer på din side

    $(document).ready(function() {
        $("span").minPlugin();
    });

Resultat

Det neste steget kan være å gi din plugin “valg”, la oss f. eks legge til et valg som styrer hvilken farge vi skal bruke.

$.fn.minPlugin = function(valg) {
   // Variabel for elementet som aktiverer pluginen
   var self = this;
   var defaults = {
      farge: '#f8dd29'
   };
   var options = $.extend(defaults, valg);
   // Returnerer din plugin
   return this.each(function() {
      $(this).css({backgroundColor: options.farge});
   });
}

    $(document).ready(function() {
        $("span").minPlugin({farge: 'pink'});
    });

“defaults” er standardverdier for plugin’en. Dersom det ikke angis noen nye verdier vil disse blir brukt. Disse verdiene brukes (inne i pluginen) slik: options.NAVN

1. Endre skrift størrelsen på siden
$(".fontsize0").click(function() { $("body").css("font-size", "100%"); });
$(".fontsize1").click(function() { $("body").css("font-size", "120%"); });
$(".fontsize2").click(function() { $("body").css("font-size", "140%"); });
<ul>
<li class="fontsize0">Normal</li>
<li class="fontsize1">Medium</li>
<li class="fontsize2">Stor</li>
</ul>

2. Bytte ut <hr /> med <div class=”hr”></div>

$("hr").replaceWith('<div class="hr"></div>');

3. Bruk av ajax
$.ajax({
type: "POST",
url: "php-fil.php",
data: "foo=bar&foobar=orange",
success: function(msg){
alert( "Alt gikk bra " + msg );
}
});

4. Scroll til toppen av siden
$("#top").click(function() { $('html, body').animate({scrollTop:0}, 'slow'); });

Derfor har jeg tenkt å bygge et lite, kompakt og brukervennlig rammeverk, TinyCSS.

TinyCSS skal oppfylle disse kravene:

• Inneholde et reset-stilkjema
• Inneholde separate stilskjemaer for html struktur, typografi og grid
• Designet hovedsaklig for moderne nettlesere

Dette er HTML strukturen jeg tenker å bruke

<div class=”container”>
<div class=”col8″><p>innhold</p></div>
<div class=”col4″><p>innhold</p></div>
</div>

Tanken er å lage 12 rader i grid-systemet.
rund disse bruke “container” for å holde på plass alt.
Systemet skal være “fluid” (flytende) slik at det ikke er fastsatt til en størrelse. På denne måten kan containeren være alt fra 1 til 1000 piksler bred

Dersom det er noen som har ønsker til hvordan dette rammeverket skal bli, si gjerne ifra.

Del 2, mus over effekt
Denne funksjonen fungerer på samme måte som toggle, bare at den reagerer på “mus over” isteden for “klikk”.
Bruk samme kode som i del 1, men endre toggle med hover.

Så hva kan vi bruke denne funksjonen til? Mulighetene står egentlig i kø, men jeg skal vise hvordan denne effekten kan brukes til å lage en “drop down” meny.

La oss ta html delen først.

<ul class="hovedmeny">
  <li><a href="#">Menypunkt 1</a></li>
  <li><a href="#">Menypunkt 2</a>
    <ul class="undermeny">
      <li><a href="#">Hei på deg</a></li>
      <li><a href="#">Klikk i vei</a></li>
    </ul>
  </li>
</ul>

Med denne listen skal vi gjøre følgende:
a) Skjule underelementer med klassen “undermeny”
b) Vise underelementer når vi beveger musen over hovedelementene

Hørtes dette vanskelig ut..? Det er faktisk utrolig lett!

$(document).ready(function() {
  $(".undermeny").hide();
  $(".hovedmeny li").hover(
    function() { $("ul",this).show(); },
    function() { $("ul",this).hide(); }
  );
});

Legg merke til at vi bruker funksjonene “show” og “hide”. Disse er ganske logiske (De viser og skjuler noe) men kan også brukes til å vise mer flytende effekter. Prøv å endre $(“ul”,this).hide(); med $(“ul”,this).hide(“slow”);
Take Our Poll

Del 1: Toggle
“Toggle” betyr å bytte mellom ting. Denne funksjonen lar oss for eksempel bytte mellom to bilder.

$(document).ready(function() {
  $(".bytt").toggle(
    function() { $(".meg").attr("src", "after.jpg"); },
    function() { $(".meg").attr("src", "before.jpg"); }
  );
});

Om vi nå lager html-strukturen på denne måten:

<img class="meg" src="bilde1.jpg" alt="bilde bytte" />
<span class="bytt">Se før og etter bilder av meg!</span>

Når en bruker da trykker på “Se før og etter bilder av meg!” vil bildet bytter mellom “before.jpg” og “after.jpg”

Forklaring:

det første vi gjør er å bruke $(document).ready(function() {
Dette vil klargjøre scriptet såsnart DOM er lastet.
Neste er å legge toggle funsksjonen til teksten. Til dette bruker vi klassen “bytt” (<span class=”bytt”>)
$(".bytt").toggle(

Toggle funskjonen er avhenging av to funsksjoner å bytte imellom.
function() { $(".meg").attr("src", "after.jpg");

Neste funksjon blir det originale bildet

function() { $(".meg").attr("src", "before.jpg"); }

Inne i disse funsksjonene sier vi at et element med klassen “meg” skal endre attributen “src” (Som er bilde kilden)
$(".meg").attr("src", "before.jpg");