Elements editables en HTML5
L’HTML5 ens aporta una gran quantitat de novetats, que mica en mica ens hem d’anar familiartizant. En aquest sentit hi ha la utilitat de que els elements puguin ser editables. En aquest document veurem com fer que un element sigui editable i com podríem guardar aquest text.
Primer de tot el què farem serà definir un paràgraf que pugui ser editable i un botó per a que l’usuari pugui indicar que vol desar els canvis que ha efectuat.
- <p id=”text” contenteditable=”true”>Aquest contingut serà editable.</p>
- <a id=”desa” href=”#”>DESA!</a>
Un cop tenim això podem definit el JS que ens permetrà obtenir el contingut i enviar-l’ho al servidor (per exemple).
- $(‘#desa’).click(function(){
- var aux = $(‘#text’).html();
- alert( aux );
- });
A continuació podem veure com el contingut d’un div és editable:
AQUEST CONTINGUT ES POT EDITAR.
Aquesta funcionalitat pot ser molt ben rebuda per la comunitat de desenvolupadors, ja que pot solucionar la creació de múltiples pantalles (una que mostra la informació entrada i una altra per si es vol modificar) ja que tot es pot fer amb la mateixa pantalla.
Podeu provar aquesta nova funcionalitat de manera dinàmica gràcies a Rendera.
Articles relacionats
Deck.js – Presentacions en HTML5
OOCSS (2a part), profunditzant en els widgets
-
http://folsiruaw.bloggplatsen.se/gilla/?url=http://valerydoas.hatenablog.com Broken Toe