jSuites: suite di web components per Javascript

Mattepuffo's logo
jSuites: suite di web components per Javascript

jSuites: suite di web components per Javascript

Programmazione, Javascript - AJAX

jSuites è un insieme di componenti scritti in vanilla Javascript, e che quindi non richiede dipendenze.

Possiamo installarlo tramite npm, o includerlo nella pagina come faremo negli esempi.

In verità c'è poco da dire sul codice, è molto semplice da usare.

Ad esempio vediamo una classica dropdown:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TEST</title>
        <script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
        <link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css">
    </head>
    <body>
        <div id="dropdown1"></div>

        <script>
            jSuites.dropdown(document.getElementById('dropdown1'), {
                data: [
                    'Matteo',
                    'Carlo',
                    'Francesca',
                    'Ilaria'
                ],
                autocomplete: true,
                multiple: true,
                width: '300px'
            });
        </script>
    </body>
</html>

Oppure un time/date picker:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TEST</title>
        <script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
        <link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css">
    </head>
    <body>
        <div id="calendar"></div>

        <script>
            jSuites.calendar(document.getElementById('calendar'), {
                time: true,
                format: 'DD/MM/YYYY HH24:MI'
            });
        </script>
    </body>
</html>

I componenti non sono tantissimi, ma possono essere comodi se già non usiamo framework o librerie più complete.

Certo, se includiamo jQuery per altri motivi, conviene rivolgersi a qualche suo plugin.

Enjoy!

Condividi

Commentami!