Javascript Object inLinePanel

luglio
24

Javascript Object inLinePanel

Inserito In: Javascript Scritto da Luca Bottoni

Cosè in inLinePanel?

inLinePanel è un’oggetto Js creato da me per permettere a tutti gli sviluppatori web artigianali l’inserimento di testi nelle pagine web (anche statiche), permettendone la modifica visuale tramite un framework WYSIWYG.
Quello che ho utilizzato è NicEdit , ho scelto questo editor, primo perchè a differenza di altri è free (che non guasta mai) ed è semplice nell’utilizzo, sia lato Developer (sviluppatore) che Customer (utilizzatore). Una buona caratteristica NicEdit è quella di avere in se già delle funzioni che permettono di autoscandagliare nella pagina i campi che devono essere modificabili..da qui la mia idea.

inLinePanel non intende violare questo framework, ma sfrtuttarlo e rendere la vita pi๠semplice agli sviluppatori. Ma vediamo come può essere di aiuto.

inLinePanel lavora semplicemente includendo nella pagina il richiamo al file di configurazione (Attenzione, si deve inserire anche il richiamo alle librerie Prototype).

/* Inclusione delle librerie di lavoro */</code></code></code></code></code></code></code></code>

<script src='inLinePanel/js/Scriptaculous/lib/prototype.js' type='text/javascript'></script>
<script src='inLinePanel/inLinePanelObjConfig.js' type='text/javascript'></script>

Una volta inserite le chiamate alla libreria di configurazione all'evento window.onload() lo script inLinePanel entrerà in azione eseguendo un parse (controllo) su tutto il codice HTML della pagina e se dovesse trovare dei contenitori marcati isEditable_#id questi saranno modificabili.

Codice Contenitori:

I contenitori sono tag DIV nel cui interno è posizionato il testo. nell'esempio sarà immesso un div non editabile e uno editabile

<html>
<body>

<div id="noEditable" style="border-color:#000000;border-style:solid;border-width:1px">IO NON SOLO MODIFICABILE</div>

<br /><br />
<div id="isEditable_PrimoEditabile" style="border-color:#FF0000;border-style:solid;border-width:1px">IO SI CHE SONO MODIFICABILE</div>
</body>
</html>

ed ecco cosa succederà al nostro div modificabile.

Figura 1

OK, cosa sono quei pulsanti???...quelli, sono i pulsanti standard che vengono assegnati ai div marcati con isEditable_#id, loro sono inLinePanel.
Questi comandi per default sono associati a tutti i contenitori marcati isEditable_ e hanno le prime istruzioni già contenute nel codice sorgente.

Modifica: Permette la modifica dei testi tramite NicEdit.
Chiudi: Chiude NicEdit.
Salva: Per default invia in POST il contenuto del div di lavoro alla pagina Save.php (Utilizzando Ajax).
Salva Tutto: Stesso lavoo di Salva, solamente che lo esegue per tutti DIV isEditable.

Nella prossima figura viene mostrato cosa accade quando si preme sul pulsante "Modifica".

Figura 2

Figura 2

Vuoi lasciare un tuo commento?

Attenzione: L'approvazione e l'invio del commento potrebbero avere dei ritardi, quindi, dopo aver premuto il pulante "Invia Commento" attendi.


Immagine CAPTCHA
*