A helyben szerkesztők (inline editors) olyan eszközök amelyek az alapból nem szerkeszthető elemeket, mint a
<p>
vagy <h1>
, szerkeszthetővé tesznek egy szimpla katt hatására.
A katt az egyébként statikus elemet egy szerkeszthető bizgentyűvé változtatja és kitesz mellé egy mentés gombot. Ha a user megváltoztatja a tartalmat és elmenti akkor az elküldésre kerül a szervernek ahol ott tárolásra kerül, a szerkesztő felület pedig újra statikussá alakul.
Használatához a minimális JavaScript belinkelés a következő.
<script type="text/javascript" src="eleresi/ut/prototype.js"> </script> <script type="text/javascript" src="eleresi/ut/scriptaculous.js?load=effects,controls"> </script>
Áttekintés
Ha végigfutunk egy helyben szerkeszthető elem életciklusán akkor a következőket fogjuk látni.
- Az elemet először is regisztráljuk, hogy márpedig ő egy helyben szerkeszthető bizgentyű.
- Ennek hatására ha a user az egeret az elem fölé viszi, akkor az elem színben kiemelődik, aztán kis tooltipként megjelenik az elem
title
attributuma, ami ha csak nem definiáljuk felül, akkor “click to edit” lesz - Ha rákattan az elemre akkor szerkeszthetővé válik, egy
form
rendelődik hozzá. - A mezőben egy enter vagy egy katt a submit gombra elküldi a a formot, az ESC vagy a cancel pedig visszaállítja az eredeti állapotot.
- Ha submitolunk akkor megjelenik egy infó szöveg arról, hhogy a háttérben mentés történik, majd amikor megérkezik a szerver válasza akkor ez alapján frissül a tartalom.
- Végül az elem újra színkiemelődik jelezve, hogy megtette amit várunk tőle.
Mindez életre keltéséhez az alábbiak kellenek.
XHTML
<p id='ipe'> Góranga! </p>
JavaScript
document.observe('dom:loaded', function(){ new Ajax.InPlaceEditor('ipe', './inplaceeditor.php'); });
A szerver oldal esetünkben PHP
<?php sleep(2); //ezt éles alkalmazásban nem javaslom, itt csak azért van, hogy lehessen látni, hogy mi történik :) //előszőr elmentjük mysqlben vagy azt tesszük vele amit kell //aztán visszaküldjük megszűrve amit beírt print htmlspecialchars($_POST['value']); ?>
Góranga!
Paraméterek
- paramName
- alapértelmezés szerint a szerver felé kiküldött változó neve
value
lesz, ezzel az opcióval bírálhatjuk ezt felül. - htmlResponse
- Alapértelmezett értéke
true
, hafalse
-ra állítjuk, akkor nem várunk választ a szervertől. - ajaxOptions
- itt bármit megadhatunk amit egyébként a prototype ajax opcióinál megadhatunk. Alapértelmezés szerint
{evalScripts : true}
- callback
- ezt módosítva hozzáadhatunk újabb paramétereket, szűrhetünk vagy amit csak szeretnénk.
Alapértelmezés szerint:function(form, szerkeszthetoMezoErteke){ return(Form.seralize(form)); }
Általámos finomhangolás
- okControl és cancelControl
- Alapértelmezés szerint
link
, lehet mégbutton
(gomb) és false (semmi). Azt szabályozzuk vele, hogy az Ok és Cancel link, gomb legyen vagy ne jelenjen meg. - okText és cancelText
- Alapértelmezés szerint Ok és Cancel. Az itt beállított érték lesz a gombre írva vagy ez lesz a link szövege.
- submitOnBlur
- Ha nem teszünk ki sem linket sem gombot, akkor a user az enter és az ESc gomb segítségével tud a helyben szerkesztővel kommunikálni. Számomra nagy meglepetés volt, de rá kellett jönnöm, hoyg sok usernek egy ilyen bizgentyű működése nem egyértelmű. Többnyire azt fogják elvárni, hogy ha beírnak valamit és a mező mellé kattintanak valahová akkor a módosításuk mentésre kerül. erre szolgál ez az opció. Alapértelmezett értéke
false
, de ha nincsenek linkjeink / gombjaink akkor érdemestrue
-ra állítani. - textBeforeControls, textBetweenControls és textAfterControls
- Ezek segítségével az ok és submit gombok elé, közé vagy mögé tehetünk valami szöveget. Üres string a default.
- clickToEditText
- Ez a szöveg jelenik meg ha a user a helyben szerkeszthető elem fölé mozgatja az egeret. Alapértelmezett értéke “Click to edit”
- savingText
- Ez a szöveg jelenik meg amikor a mező a szerver válaszára vár. Alapértelmezés szerint ‘Saving…’
Így egy finomhangolt helybenszerkesztő így jelenhet meg.
new Ajax.InPlaceEditor('ipe', 'ipe.php', { okControl : 'button', cancelControl : 'link', clickToEditText : 'Katt ide a változtatáshoz', savingText : 'Szerverre mentek. Csigavér!', textBeforeControls : '[', textBetweenControls : ' / ', textAfterControls : ']' });
Góranga!
CSS finomhangolás
Mivel itt egy különálló új bizgentyűt jelenítünk meg fontos, hogy belesimuljon az oldal kinézetébe. Erre a célra szolgál a következő rakat opció.
- inplaceeditor-form
- a css fileunkban ezt a css osztályt kell definiálnunk a megjelenő formhoz
- editor_ok_button, editor_ok_link
- css osztály az ok gombhoz/loknhez
- editor_cancel_button, editor_cancel_link
- css osztály a cancel gombhoz/linkhez
- editor_field
- css osztály magához a helyben szerkesztő elemhez, azaz az inputhoz vagy textarea-hoz
- inplaceeditor_saving
- css osztály a mentés szöveghez
- inplaceedtor_loading
- css osztály a loading szöveghez
Ha több helyben szerkeszthető elemünk is van és szeretnénk más-más kinézetet adni nekik, akkor a létrejövő formunk id-je alapján tehetjük meg. Ha a helyben szerkeszthető elemünknek nincs id-je, akkor meg kell adnunk a formId
opciót. Ha van, akkor a formunk id-je a helyben szerkeszthető elem id-je plusz -inplaceeditor
lesz. Vagyis ha az elemünk id-je pitty
, akkor a létrejövő form id-je pitty-inplaceeditor
lesz, hacsak nem definiáljuk felül a formId
opcióval. Így a cssünkben a #pitty-inplaceeditor editor_ok_button{}
definíció már nem lesz hatással a többi helyben szerkeszthető elemre.
Callback függvények
- onEnterHover(elem)
- hover esemény a helyben szerkeszthető elemre. Alapértelmezés szeirnt Effect.Highlight hajtdik végre.
- onLeaveHover(elem)
- amikor az egér kilép az elem fölül. Alapértelmezés szerint a háttérszín visszatér az eredetibe.
- onEnterEditMode(elem)
- mielőtt a szerkesztő felület létrejön
- onFailure(XMLHttpRequest, [elem])
- ha valami hiba keletkezik az ajax hívás során. Alapból hibaüzenetet jelenít meg.
- onComplete(XMLHttpRequest, [elem])
- az ajax hívás befejeződött hibával vagy hiba nélkül
- onLeaveEditMode
- a szerkesztő felület eltűnt, újra maga az elem látható
Általánosságban a usernek nem lesz magától érthetődő, hogy az elem helyben szerkeszthető. Alapesetben csak magára az elemre kattintva kerül elő a szerkeszthetőség, de lehetőségünk van az extraControl
opcióval megadni egy másik elemet is amire való kattintáskor az elem szerkeszthetővé válik. Az extraControlOnly
true
-ra állításával pedig azt állíthatjuk be, hogy csak az extraControl
elemmel tehessük szerkeszthetővé az elemet, magára az elemre való kattintással ne.
Az, hogy a helyben szerkeszthető elemünkből akttintásra egy input vagy egy textarea lesz az két dologtól függ. Az első a row
opció, a másik pedig, hoyg az elemben van-e \r
vagy \n
karakter.
Kiválasztó
Előre meghatározott elemek közül az Ajax.InPlaceCollectionEditor objektummal választhatunk. Ebben az esetben a user nem tud szabadon bármit begépelni a helyben szerkeszthető elembe, hanem csak a kijelöltek közül választhat egyet.
- collection
- A select option elemeihez szükséges JavaScript tömb
[[ertek1, szoveg1], [ertek2, szoveg2]]
formában. - loadCollectionURL
- Egy url ahonnan megkaphatjuk az optios tömböt a fenti formában
- loadCollectionText
- Alapértelmezés szerint “Loading choices…”
JavaScript
new Ajax.InPlaceCollectionEditor( 'ipce', 'update.php', {loadCollectionURL : 'szinek.php'} );
XHTML
<p id='ipce'> piros </p>
Szerver oldal
<?php //valahonnan kiszedjük a szükséges adatokat, aztán tömbbé rendezzük, megcsámcsogjuk és kidobjuk print "[[1, 'piros'], [2, 'sárga'], [3, 'zöld']]"; ?>
piros
Ennyit hát a helyben szerkeszthetővé alakítható elemekről melynek körültekintő alkalmazásával tovább finomíthatjuk formjainkat. A következő részben a csúszkákkal mint az adatbevitel új eszközeivel fogunk megismerkedni.
Szia, 404-es hiba a következő fájra:
“http://webmania.cc/amit-a-scriptaculousrol-tudni-erdemes-7/static/inplacecollectioneditor.php”
Elfelejtetted feltölteni? 🙂
üdvözlettel
kisPocok
kisPocok: Kösz, hogy szóltál 🙂 Fel volt töltve, ki is próbáltam, mielőtt publikáltam a postot ment is. Csak ugye a rövid webcímek miatt már nem volt jó a js fileban a szerver script hívásának útvonala. Javítva.