Qualche idea su come rendere degradabile la modifica sul posto?

Question

Attualmente sto scrivendo uno script edit-in-place per MooTools e sono un po 'sconcertato su come posso farlo degradare con grazia senza JavaScript pur avendo alcune funzionalità. Vorrei usare il miglioramento progressivo in qualche modo. Non sto cercando il codice, ma piuttosto un concetto su come affrontare la situazione. Se hai qualche idea o conosci qualche script di modifica sul posto che si degrada con grazia, ti preghiamo di condividere.

Answer 1

Sembra che tu ti stia avvicinando dalla direzione sbagliata. Invece di creare il montaggio sul posto e farlo degradare bene (l'angolo di Degradation Graceful), dovresti davvero creare una versione non Javascript per la modifica e quindi aggiungere il montaggio sul posto utilizzando Javascript dopo il caricamento della pagina, fatto riferimento a come Miglioramento progressivo .

Ci sono due opzioni per questo. Crea la visualizzazione come un modulo con un pulsante di invio che funziona senza Javascript, quindi utilizzando Javascript sostituisci gli input con un tipo di etichetta che esegue la modifica sul posto. Dovresti essere in grado di utilizzare una combinazione di etichette e attributi id per selezionare le proprietà corrette per il corretto funzionamento dell'implementazione sul posto. L'altra opzione, se non si desidera visualizzare un modulo per impostazione predefinita, è visualizzare i valori con un pulsante / collegamento per trasformarlo in un modulo mediante l'elaborazione sul lato server, quindi aggiungere la modifica in-palce a tale.

Answer 2

Non è possibile apportare modifiche sul posto senza JavaScript, quindi un gradevole degrado perché consiste nell'assicurarsi che l'utente possa ancora modificare l'elemento in questione quando JavaScript non è disponibile.

In quanto tale, avrei solo un link per modificare l'intero elemento in questione e quindi creare i controlli di modifica sul posto in JavaScript al caricamento della pagina, nascondendo il collegamento di modifica se si preferisce che gli utenti utilizzino la modifica- sul posto quando disponibile.

Answer 3

Se si tratta di contenuto testuale, è possibile mostrare il contenuto modificabile come pulsante di invio del tipo di input, con come didascalia il contenuto. Quando si fa clic, invia l'intero modulo, preservando gli altri valori e mostrando una finestra di modifica. Successivamente è possibile ripristinare i valori del modulo.

Answer 4

Forse metti un input in un div sotto ogni elemento che ha una modifica in atto. Quando la pagina viene caricata, utilizza JavaScript per nascondere quei div. In questo modo saranno utilizzabili solo se il javascript non viene mai attivato.

Answer 5

Sto pensando che quello che stai cercando di fare sia qualcosa come il seguente scenario:

<li>
    <span id="editable">Editable text</span> <a class="edit_button"> </a>
</li>

Dove < a > è un pulsante che sostituisce < span > con un < input > ;, in modo che possa essere modificato. Ci sono un paio di modi per rendere questo degrado con grazia (cioè lavorare senza javascript).

In teoria:

Usando i CSS, fallo con psuedo-selettori. : active è un po 'come un evento onclick, quindi se annidate un < input > in < li > ;, questo CSS nasconde < span > e mostra < input > quando si fa clic su li.

li:active #editable {
    display:none;
}
li:active input{
    display:block;
}

Potrebbe funzionare nel tuo browser preferito, ma senza dubbio scoprirai che si rompe in IE.

In pratica:

Utilizza un collegamento. Avere & Lt; a & Gt; essere un collegamento effettivo che porta a una pagina in cui questa sostituzione input / span è stata eseguita sul lato server. Attacchi un gestore di eventi su & Lt; a & Gt; che utilizza MooTools per annullare l'evento click per le persone che hanno JS, in questo modo:

function make_editable(evt) {
    var evt = new Event(evt);
    evt.preventDefault();
}

Answer 6

Prova a utilizzare un testo di input in stile e dopo che la pagina caricata lo rende di sola lettura, usando l'attributo readonly. e quando fai clic su di esso rimuovi l'attributo readonly e onblur rendendolo nuovamente di sola lettura. quando si fa clic su " Salva " pulsante o su evento onblur invia una richiesta Ajax per salvare i dati nel server.