Modification en ligne
Composant de modification en ligne au clic avec les styles texte, zone de texte et sélecteur. Prend en charge l'enregistrement automatique à la perte de focus, le PATCH optionnel vers le serveur et les raccourcis clavier. Entrée pour enregistrer (texte/sélecteur), Ctrl+Entrée pour enregistrer (zone de texte), Échap pour annuler.
Texte
Modification en ligne de texte sur une seule ligne
_inline_edit.html.erb
███ ███████ ███████ ██████ ███ ████ ████ █████████████ █████ ████████████ ██████ ██ ██████ ██████████ ██
████ █████████████████████████████
███████████████████████████████ ███ ███
████████████████████████████████████████ ████████████ ███
█████████████████████
█████ █████████████████████████████████
█████████████████████████████████████
█████████████████████ ████ ████ ██████████ ██████████████████ ███████████████████████ ██████████████ ███████████████ █████████████████ ████████████ ███ ███████████████ ███████████████████ ███████ ██ ████████████ ████
███ ██████████████ ██ ███████████ ██
███████
inline_edit_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ █████████ ████████
██████ ██████ █ █
████ ███████
███████████ █ █████ ████████ ████████ ████ █
█
█████████ █
inline_edit_text_component.html.erb
████ █████████████████████████████
███████████████████████████████ ████ ███
████████████████████████████████████████ █████████████ ███
█████████████████████
█████ █████████████████████████████████
█████████████████████████████████████
██████████ ███████████████ ████
███ ████████████ ██
███████
████ ████████████████████████████████ ███████████████
inline_edit_text_component.rb
█ ██████████████████████ ████
█████ ███████████████████████ █ ███████████████████
███ █████████████████ ██████ ███ ████ ████ █████████████ █████ ████████████ ██████ ██ ██████ ████████
█████ █ ████
██████ █ █████
████ █ ███
█████████████ █ ████████████
████████████ █ ███████████
██████████████ █ █████████████ ██ ██
inline_edit_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ █████████ ████████
██████ ██████ █ █
████ ███████
███████████ █ █████ ████████ ████████ ████ █
█
█████████ █
Zone de texte
Modification en ligne de texte multi-lignes
_inline_edit.html.erb
███ ███████ ███████ ██████ ███ ████ ████ █████████████ █████ ████████████ ██████ ██ ██████ ██████████ ██
████ █████████████████████████████
███████████████████████████████ ███ ███
████████████████████████████████████████ ████████████ ███
███████████████████ ████████
█████ █████████████████████████████████
█████████████████████████████████████
█████████████████████ █████ ████ ████ ██████████ ██████████████████ ███████████████████████ ██████████████ ███████████████ █████████████████ ████████████ ███████████████████ ███ ███████████████ ███████████████████ ███████ ██ ████████████ ████
███ ██████████████ ██ ███████████ ██
███████
inline_edit_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ █████████ ████████
██████ ██████ █ █
████ ███████
███████████ █ █████ ████████ ████████ ████ █
█
█████████ █
inline_edit_textarea_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
███ █████████████████ ██████ ███ ████ ████ █████████████ █████ ████████████ ██████ ██ ██████ ████████
█████ █ ████
██████ █ █████
████ █ ███
█████████████ █ ████████████
████████████ █ ███████████
██████████████ █ █████████████ ██ ██
inline_edit_textarea_component.html.erb
████ █████████████████████████████
███████████████████████████████ ████ ███
████████████████████████████████████████ █████████████ ███
███████████████████ ████████
█████ █████████████████████████████████
█████████████████████████████████████
██████████ ███████████████ ████
███ ████████████ ██
███████
████ ████████████████████████████████ ███████████████
inline_edit_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ █████████ ████████
██████ ██████ █ █
████ ███████
███████████ █ █████ ████████ ████████ ████ █
█
█████████ █
Sélecteur
Modification en ligne par liste déroulante
_inline_edit.html.erb
███ ███████ ███████ ██████ ███ ████ ████ █████████████ █████ ████████████ ██████ ██ ██████ ████████ ███ ████████ ██
██
███████████████ █ ████████████ █ ███ ██████████████ ██ ██████████ █
█████████████ █ ███████████████ █ ███████████████████████ █ ███
██
████ █████████████████████████████
███████████████████████████████ ███ ███
████████████████████████████████████████ ████████████ ███
█████████████████████
█████ █████████████████████████████████
inline_edit_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ █████████ ████████
██████ ██████ █ █
████ ███████
███████████ █ █████ ████████ ████████ ████ █
█
█████████ █
inline_edit_select_component.html.erb
████ █████████████████████████████
███████████████████████████████ ████ ███
████████████████████████████████████████ █████████████ ███
█████████████████████
█████ █████████████████████████████████
█████████████████████████████████████
██████████ ███████████████ ████
███ ████████████ ██
████ ██████████ ███ ██████████████ ████████████████████ ███████████ █████████████████████ ██████████ █ ██ ████
█████ ██████████████████████ ███████████████████████ ████████████████ ██████ ████ ██████ ██
inline_edit_select_component.rb
█ ██████████████████████ ████
█████ █████████████████████████ █ ███████████████████
███ █████████████████ █████████ ██████ ███ ████ ████ █████████████ █████ ████████████ ██████ ██ ██████ ████████
█████ █ ████
████████ █ ███████
██████ █ █████
████ █ ███
█████████████ █ ████████████
████████████ █ ███████████
inline_edit_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ █████████ ████████
██████ ██████ █ █
████ ███████
███████████ █ █████ ████████ ████████ ████ █
█
█████████ █
Journal des modifications
- Initial release with text, textarea, and select styles
Obtenir l'accès complet
Débloquez le code source de ce composant et de tous les autres. Paiement unique pour un accès à vie.
Obtenir l'accès maintenant