Home » Resurse Web Design » Sistem Editare-in-Place

 
 
 

Sistem Editare-in-Place

De regula, ca sa poti merge sa editezi o gramada de texte, poze si alte lucruri in mai multe pagini este asa de invechit. Acum poti edita articolul/textul/descrierea din 2 click-uri si 3 miscari foarte usor cu ajutorul acestui tutorial.

Click-to-edit

Daca aveti cont pe flickr veti sti ce inseamna, atunci cand vreti sa adaugati o descriere unei poze trebuie doar sa faceti un click si automat acel camp se va transforma intr-un edit form unde va puteti introduce descrierea. Acest lucru vom invata si noi aici.

Ok, prima data facem putin layout-ul paginii

Mergeti in editorul dumneavoastra de cod favorit si dati copy/paste la codul de mai jos pentru a fi mai usor si a merge mai repede tutorialul.

<html lang=”en-GB”>
<head>
<title>Editare Web 2.0 cu jQuery</title>
<link type=”text/css” href=”css/style.css” rel=”stylesheet” />
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/mojo.js”></script>
</head>
<body>
<div id=”container”>
<h1>Editare in loc</h1>
<div>de la siteconstruct.ro</div>
<p>Elementele cu o clasa css de<em>editable</em> sunt, editabile :).
In caz ca nu ati observat toate clasele css <em>editable</em> au un background albastru pe hover care indica faptul ca sunt editabile. </p>
<p>Faceti Dublu-click pentru a edita. Utilizati link-urile create dinamic pentru a salva sau anula.
Poti deschide care campuri de editare doresti fara nici o grija.</p>
<div class=”block”>
<h2>Eu</h2>
<ul>
<li class=”editable”>sunt Robert</li>
<li class=”editable”>iubesc sa ma joc cu jQuery</li>
<li class=”editable”>nu sunt un freelancer</li>
<li class=”editable”>scriu un articol pentru SiteConstruct</li>
<li class=”editable”>pot fi gasit la <a href=”https://siteconstruct.ro”>siteconstruct.ro</a></li>
<li class=”editable”>nu voi renunta niciodata</li>
</ul>
</div>
<div class=”block”>
<h2>Lucruri care tre sa le termin saptamana asta</h2>
<ul>
<li class=”editable”>Sa termin un site foarte important</li>
<li class=”editable”>Sa imi aduc vizitatori pe blog </li>
<li class=”editable”>Trebuie sa fac 2 bucati de ceafa de porc</li>
<li class=”editable”>Neaparat curat in camera</li>
<li class=”editable”>Sa vb cu un coleg despre un proiect</li>
<li class=”editable”>Trebuie sa pun la punct o afacere de 10000000 de para</li>
</ul>
</div>
</div>
</html>

Dupa cum vedeti cele 2 blocuri de taguri li contin class-uri editable care denota ca item-ul se poate edita.

Apoi adaugam js`ul

Tine minte ca ai nevoie de o librarie jQuery de 1.3 sau mai mare, tot ce este sub aceasta versiune nu va functiona. Introduceti acest cod in fisierul js si redenumitil in mojo.js exact cum ati vazut in exemplul de mai sus in partea de header.

$(document).ready(function()
{
var oldText, newText;
$(„.editable”).hover(
function()
{
$(this).addClass(„editHover”);
},
function()
{
$(this).removeClass(„editHover”);
}
);

$(„.editable”).bind(„dblclick”, replaceHTML);

$(„.btnSave”).live(„click”,
function()
{
newText = $(this).siblings(„form”)
.children(„.editBox”)
.val().replace(/”/g, „&quot;”);

$(this).parent()
.html(newText)
.removeClass(„noPad”)
.bind(„dblclick”, replaceHTML);
}
);

$(„.btnDiscard”).live(„click”,
function()
{
$(this).parent()
.html(oldText)
.removeClass(„noPad”)
.bind(„dblclick”, replaceHTML);
}
);

function replaceHTML()
{
oldText = $(this).html()
.replace(/”/g, „&quot;”);
$(this).addClass(„noPad”)
.html(„”)
.html(„<form><input type=\”text\” class=\”editBox\” value=\”” + oldText + „\” />
</form><a href=\”#\” class=\”btnSave\”>Salveaza setarile</a>
<a href=\”#\” class=\”btnDiscard\”>Anuleaza setarile</a>”)
.unbind(‘dblclick’, replaceHTML);

}
}
);

Sutem gata de drum dar…
Tine minte!

Codul de mai sus se refera doar la un exemplu si nu la o actuala versiune folosita in interiorul unui proiect. Daca doriti acest lucru mai adaugati in interiorul fisierului mojo.js urmatoarea chemare AJAX pentru handlerul de save (salveaza setarile).

$(document).ready(function()
{
var oldText, newText;
$(„.editable”).hover(
function()
{
$(this).addClass(„editHover”);
},
function()
{
$(this).removeClass(„editHover”);
}
);

$(„.editable”).bind(„dblclick”, replaceHTML);

$(„.btnSave”).live(„click”,
function()
{
newText = $(this).siblings(„form”)
.children(„.editBox”)
.val().replace(/”/g, „&quot;”);

$(this).parent()
.html(newText)
.removeClass(„noPad”)
.bind(„dblclick”, replaceHTML);
}
);

$(„.btnDiscard”).live(„click”,
function()
{
$(this).parent()
.html(oldText)
.removeClass(„noPad”)
.bind(„dblclick”, replaceHTML);
}
);

function replaceHTML()
{
oldText = $(this).html()
.replace(/”/g, „&quot;”);
$(this).addClass(„noPad”)
.html(„”)
.html(„<form><input type=\”text\” class=\”editBox\” value=\”” + oldText + „\” /> </form>
<a href=\”#\” class=\”btnSave\”>Salveaza setarile</a>
<a href=\”#\” class=\”btnDiscard\”>Anuleaza setarile</a>”)
.unbind(‘dblclick’, replaceHTML);

}
}
);

Eticheta:

Comentariile sunt inchise

Ne pare rau, dar nu poti lasa un comentariu pentru acest post.

Resurse web design