streamalism.org

1. Áttekintés

Ebben az oktatóanyagban megvizsgáljuk, hogyan definiálhatunk egyéni attribútumokat HTML5-címkékben a Thymeleaf segítségével. Ez egy sablon motor keretrendszer, amely egyszerű HTML-t használ a dinamikus adatok megjelenítésére.

A Thymeleafről vagy annak Springbe történő integrációjáról szóló bevezető cikkért lásd ezt a linket.

2. Egyéni attribútumok a HTML5-ben

Néha szükség lehet további információkra a HTML-oldalakon, hogy valamilyen feldolgozást végezzünk az ügyfél oldalon. Például érdemes további adatokat menteni a következőbe: formabemenet címkéket, hogy felhasználhassuk őket az űrlap AJAX használatával történő beküldése közben.

Hasonlóképpen, egyedi érvényesítési hibaüzeneteket is megjeleníthetünk az űrlapot kitöltő felhasználók számára.

Mindenesetre, ezeket a további adatokat a HTML 5 egyéni attribútumainak felhasználásával adhatjuk meg. Az egyéni attribútumok meghatározhatók egy HTML-címkében a adat- előtag.

Most nézzük meg, hogyan definiálhatjuk ezeket az attribútumokat a Thymeleaf alapértelmezett dialektusával.

3. Egyéni HTML-attribútumok a Thymeleaf-ben

Megadhatunk egy egyéni attribútumot egy HTML-címkében a szintaxis segítségével:

th: adatok- = ""

Hozzunk létre egy egyszerű űrlapot, amely lehetővé teszi a hallgató számára, hogy regisztráljon egy tanfolyamra, hogy lássa a dolgokat:

Ez az űrlap egyetlen legördülő listát tartalmaz a rendelkezésre álló kurzusokkal és egy beküldési gombbal.

Tegyük fel, hogy egyéni hibaüzenetet szeretnénk megjeleníteni a felhasználó számára, ha a beküldésre kattintanak anélkül, hogy kurzust választanának.

A hibaüzenetet egyéni attribútumként elmenthetjük a válassza címkét, és hozzon létre egy JavaScript függvényt az értékének érvényesítéséhez az űrlap elküldésével.

A frissített válassza címke kb. így néz ki:

Itt lekérjük a hibaüzenetet az erőforráscsomagból.

Most, amikor a felhasználó érvényes űrlap kiválasztása nélkül küldi el az űrlapot, ez a JavaScript funkció hibaüzenetet jelenít meg a felhasználó számára:

function validateForm () {var e = document.getElementById ("tanfolyam"); var érték = e.options [e.selectedIndex] .érték; if (érték == '') {var hiba = document.getElementById ("errormesg"); error.textContent = e.getAttribute ('data-validation-message'); return false; } return true; }

Hasonlóképpen definiálásával több egyéni attribútumot is hozzáadhatunk a HTML-címkékhez th: adatok- * attribútum mindegyikükhöz.

3. Következtetés

Ebben a rövid cikkben azt kutattuk, hogyan használhatjuk fel a Thymeleaf támogatását egyéni attribútumok hozzáadásához HTML5-sablonokba.

Mint mindig, ennek a kódnak egy működő változata elérhető a Githubon.