Des idées sur la façon de rendre dégradable sur place?

StackOverflow https://stackoverflow.com/questions/153061

Question

Je suis en train d'écrire un script d'édition sur place pour MooTools et je suis un peu perplexe sur la manière dont je peux le faire se dégrader gracieusement sans JavaScript, tout en conservant certaines fonctionnalités. J'aimerais utiliser l'amélioration progressive d'une manière ou d'une autre. Je ne cherche pas de code, mais plutôt un concept sur la façon dont on aborderait la situation. Si vous avez des idées ou si vous connaissez des scripts de montage sur site qui se dégradent normalement, partagez-les.

Était-ce utile?

La solution

Il semble que vous abordiez la question dans la mauvaise direction. Plutôt que de créer le montage sur place et de le dégrader (angle de dégradation progressive), vous devriez créer une version non Javascript pour la modification, puis l'ajouter à l'aide de Javascript après le chargement de la page (voir aussi). en tant que Amélioration progressive .

Il y a deux options pour cela. Créez l’affichage sous forme de formulaire avec un bouton de soumission qui fonctionne sans Javascript, puis remplacez les entrées par une sorte de libellé effectuant l’édition sur place. Vous devriez pouvoir utiliser une combinaison d'étiquettes et d'attributs id pour sélectionner les propriétés correctes pour que votre implémentation de montage sur place fonctionne. L’autre option, si vous ne souhaitez pas qu’un formulaire soit affiché par défaut, consiste à afficher les valeurs avec un bouton / un lien pour le transformer en formulaire à l’aide du traitement côté serveur, puis d’ajouter l’édit-in-palce à celui-là.

Autres conseils

Vous ne pouvez absolument pas éditer sur place sans JavaScript. Par conséquent, une dégradation harmonieuse consiste à s'assurer que l'utilisateur peut toujours modifier l'élément en question lorsque JavaScript n'est pas disponible.

En tant que tel, j’aurais juste un lien pour modifier l’élément entier en question, puis créer les contrôles de modification sur place en JavaScript lors du chargement de la page, en masquant le lien de modification si vous préférez que les utilisateurs ne l'utilisent. sur place lorsque disponible.

S'il s'agit de contenu textuel, vous pouvez afficher le contenu modifiable sous la forme d'un bouton d'envoi du type d'entrée, avec comme légende le contenu. Lorsque l'utilisateur clique dessus, il soumet l'intégralité du formulaire en préservant les autres valeurs et affiche une boîte de dialogue d'édition. Ensuite, les valeurs de formulaire pourraient être restaurées.

Peut-être mettre une entrée dans un div sous chaque élément qui a une édition sur place. Lorsque la page se charge, utilisez javascript pour masquer ces divs. De cette façon, ils ne seront utilisables que si le javascript ne se déclenche jamais.

Je suppose que ce que vous essayez de faire ressemble au scénario suivant: 

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

Où le < un > est un bouton qui remplace le < span > avec une < entrée > ;, pour pouvoir la modifier. Il y a plusieurs façons de réduire cette dégradation (c'est-à-dire sans javascript).

En théorie:

En utilisant CSS, faites-le avec psuedo-selectors. : active est un peu comme un événement onclick, donc si vous imbriquez un < input > dans le < li > ;, ce CSS cache le < span > et montre l'entrée < input > lorsque vous cliquez sur le lien. 

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

Cela peut fonctionner dans votre navigateur préféré, mais vous constaterez sans aucun doute qu'il se casse dans IE.

En pratique:

Utilisez un lien. Avoir que & Lt; un & Gt; être un lien réel menant à une page où cette substitution d’entrée / étendue a été effectuée côté serveur. Vous collez un gestionnaire d’événements sur le & Lt; un & Gt; qui utilise MooTools pour annuler l'événement click pour les personnes qui possèdent JS, comme ceci: 

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

Essayez d’utiliser un texte d’entrée de style et, une fois la page chargée chargée, rendez-le en lecture seule à l’aide de l’attribut readonly. et lorsque vous cliquez dessus, supprimez l'attribut readonly, et onblur pour le rendre à nouveau en lecture seule. en cliquant sur & "Enregistrer &"; bouton ou un événement onblur faire une requête Ajax pour enregistrer les données sur le serveur.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top