jQuery - Ett enkelt textredigeringssystem

I den här artikeln kommer jag att gå igenom hur du enkelt skapar ett redigeringssystem med hjälp av jQuery.

Det jag menar med ett redigeringssystem är att man ska kunna klicka på en viss text på sidan och redigera den på plats helt enkelt. Jag kommer att använda mig av lightbox effekt. Jag har tidigare skrivit en artikel om lightbox effekten här på aspkoll.se, artikeln heter "jQuery - En enkel lightbox effekt" om du vill veta mer om det.

Målet med artikeln

Vi vill redigera text på sidan genom att bara klicka på den. När man klickar på texten så ska ett formulär dyka upp och där ska vi kunna redigera vår text. När vi trycker på spara så ska texten ändras på sidan.

Vi vil inte att all text ska kunna ändras, utan bara några utvalda stycken. Det är därför vi kommer att göra följande. Endast text som har en CSS klass som heter "makeEditable" kommer att gå att redigera. Klickar man på annan text så kommer inget att hända. Inget kommer att hända heller om man klickar på en bild med samma klassnamn.

Att tänka på innan

Den här artikeln kommer inte att gå igenom hur du sparar texten sen i databasen eller liknande. Jag kommer bara att koncentrera mig på funktionalitetsbiten, alltså att göra så att man kan redigera, och att resultatet visas direkt. Det du kan lägga till är att ändringen sparas i databasen eller liknande så när man besöker sidan igen så har allting sparats.

Jag kommer inte heller att gå igenom lightbox effekten, för det finns redan en artikel om det. Jag går snabbt förbi det fram till jQuery koden för detta projekt.

Demo

Gör du allt korrekt i denna artikel så kommer slutprodukten att se ut så här:
http://www.aspkoll.se/sandbox/lightbox-edit-text-1/

XHTML koden

<div id="lightbox-panel"></div>
<div id="lightbox"></div>
        
<h1 class="makeEditable">Testsida</h1>
<p class="makeEditable">Testar att skriva något här!</p>
<img src="bild.jpg" width="200" height="200" border="1" alt="klicka" class="makeEditable" />

De två första DIV:arna är till för att kunna skapa lightbox effekten. Läs mer om det i artikeln om lightbox, om du är intresserad av att veta mer.

Jag lade till en rubrik, ett stycke och en bild, alla med klassnamn "makeEditable". Det innebär att vi kommer att kunna klicka på alla, men vi vill bara att texten ska gå att redigera.

CSS koden

Även här kommer jag inte att gå igenom koden, eftersom den tillhör lightbox effekten. Kort sagt så lägger jag lite färger och leker med positioner för att få det hela att se snyggt ut.

#lightbox {
    display:none;
    background:#000;
    opacity:0.9;
    filter:alpha(opacity=90);
    position:absolute;
    top:0;
    left:0;
    min-width:100%;
    min-height:100%;
    z-index:1000;
}
#lightbox-panel{
    display:none;
    position:fixed;
    top:100px;
    left:50%;
    margin-left:-200px;
    background:#fff;
    padding:10px 15px;
    border:2px solid #ccc;
    z-index:1001;
}
#lightbox-panel #editText {
    width: 400px;
    padding: 5px;
}

jQuery koden

Nu kommer vi till det som kommer att få allt att fungera. Vi börjar med att skapa functionerna i jQuery som ska anropas. Alla functioner som vi bygger kommer vi att lägga här:

(function($){
    ...HÄR LÄGGER VI FUNKTIONERNA...
})(jQuery);

Den första funktionen vi ska bygga är den som ska anropas när man klickar på elementet med klassen "makeEditable":

$.fn.makeEditable = function(){
    var target = $(this);
    var content = target.text();
    if(content.length>0){ $.fn.lightboxOn(target, content); }
}

Vi skapade en funktion som kallas för "makeEditable". Vi hämtar objektet vi klikar på och sparar i variabeln "target" och vi sparar dess text i variabeln "content". Sen gör vi en kontroll som ska se till att bilder och andra objekt som inte innehåller text, inte går att redigera.

Om objektet har text så kommer en funktion som kallas för "lightboxOn" att anropas och som vi skickar in parameterarna "target" och "content" i. Funktionen skapar vi nedan:

$.fn.lightboxOn = function(target, content){
    $('#lightbox, #lightbox-panel').fadeIn(300);
    $('#lightbox-panel').html('<input type="text" id="editText" /><input type="button" id="editSubmit" value="Spara" />')
    .find('#editText').val(content).parent()
    .find('#editSubmit').click(function(){
        target.text($('#editText').val());
        $.fn.lightboxOff();
    });
}

Vi började med att visa "lightbox" och "lightbox-panel". Vi fyllde sen "lightbox-panel" med lite XHTML kod som innehöll ett textfält med ID "editText" och en knapp med ID "editSubmit". När vi har gjort det så tar vi hjälp av funktionen "find" för att leta efter "editText"

.find('#editText')

och fyller därefter den med texten ("content") som skickades in som parameter i funktionen. Efter det backar vi ett steg med "parent()" för att åter igen kunna leta efter knappen "editSubmit" och sätta ett click event på den.

När man klickar på knappen "editSubmit" så ska den ändra texten på det vi ska redigera. Detta kan vi göra genom att vi har skickat in objektet ("target") som parameter in i funktionen. Efter det så stänger vi ner lightbox effekten genom att anropa funktionen "lightboxOff()". Den funktionen bygger vi nedan:

$.fn.lightboxOff = function(){
    $('#lightbox, #lightbox-panel').fadeOut(300);
    $('#lightbox-panel #editText').val('');
}

Inget konstigt med den koden. Vi gömmer alla DIV:ar och tar bort texten från formuläret.

Nu ska vi skapa den koden som gör att alla "makeEditable" element blir klickbara, plus att vi ska göra så att om man klickar på lightbox bakgrunden (det svarta) så ska redigeringen avbrytas. Den här koden ska ligga utanför koden för funktionerna:

$(function(){
    $('.makeEditable').click(function(){ $(this).makeEditable(); }).css({'cursor':'pointer'});
    $('#lightbox').click(function(){ $(this).lightboxOff(); });
});

Enkelt och fint. Samlar vi ihop hela jQuery koden så ser den ut så här:

(function($){
    $.fn.makeEditable = function(){
        var target = $(this);
        var content = target.text();
        if(content.length>0) { $.fn.lightboxOn(target, content); }
    }
    $.fn.lightboxOn = function(target, content){
        $('#lightbox, #lightbox-panel').fadeIn(300);
        $('#lightbox-panel').html('<input type="text" id="editText" /><input type="button" id="editSubmit" value="Spara" />')
        .find('#editText').val(content).parent()
        .find('#editSubmit').click(function(){
            target.text($('#editText').val());
            $.fn.lightboxOff();
        });
    }
    $.fn.lightboxOff = function(){
        $('#lightbox, #lightbox-panel').fadeOut(300);
        $('#lightbox-panel #editText').val('');
    }
})(jQuery);

$(function(){
    $('.makeEditable').click(function(){ $(this).makeEditable(); }).css({'cursor':'pointer'});
    $('#lightbox').click(function(){ $(this).lightboxOff(); });
});

Slutord

Man kan göra väldigt mycket mer, men det här är en bra grund.
Med reservation för stavfel.

Skapades: 2009-11-15 12:41:13
Skribent: Shadi
Lästs 1418 gånger
Betyg: 0 (artikeln har endast 0 röster, det krävs minst 5 för ett betyg)

Kommentarer

Ingen har kommenterat denna artikel än.