Open.JS – Mostra/nascondi facilmente elementi in HTML

I siti web moderni possiedono elementi comuni e spesso ripetuti, necessari a far funzionare le pagine web e più fruibile il sito web stesso agli utenti.

Probabilmente in qualsiasi sito, persino in BytePost, è possibile trovare elementi nascosti, visualizzabili solo tramite click su un apposito pulsante; il comune mostra/nascondi, applicabile sui menu a comparsa, pulsanti, pannelli e qualunque altra cosa si voglia.

In HTML esistono differenti modi per creare elementi a comparsa con sistema “mostra e nascondi” (in inglese “toggle”), ma molto spesso sono procedure complesse, che vanno impostate anticipatamente e create ad-hoc per uno specifico scopo.

Proprio per questo motivo, abbiamo deciso di mettere appunto un Framework adatto a questo scopo, ideato e programmato per semplificare la vita a neofiti e sviluppatori di piattaforme web.

Stiamo parlando del nostro Framework Open.JS, di cui descriveremo il funzionamento in questo articolo dedicato.

Potrebbe interessarti: Creare un menu a comparsa in JavaScript

Open.JS

Cos’è Open.JS?

Open.JS è un Framework basato su JQuery, ideato per semplificare la programmazione di elementi mostra e nascondi tramite un semplice click su pulsante o link.

open.js banner e logo

Le funzioni sono pensate per essere usate e ricordate facilmente in qualsiasi momento, con una sintassi semplice e pulita.

Imparare ad usare le funzioni di Open.JS richiede poco tempo, basta seguire la nostra guida.

Per maggiori dettagli, visita la pagina ufficiale su Codewith.it.

Esempi



  • Home
  • About
  • Link 1
  • Link 2

Come si usa?

Open.JS, come tutti i Framework, richiede la sua libreria per funzionare. Per usarla su di un sito web è importante richiamare le risorse necessarie. Per farlo ti basterà copiare e incollare il seguente codice nella tua pagina HTML:

// JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

// Open.JS
<script src="https://codewith.it/p/open.js"></script>

La libreria di Open.JS è ospitata sul nostro sito partner Codewith.it, su cui viene aggiornata periodicamente. Puoi incollare il codice tra i tag <head> e </head> del tuo sito.

Ora non resta che iniziare a scrivere le nostre funzioni.

Funzione “op();”

Tutte le funzioni principali di Open.JS vengono richiamate tramite la keyword “op“; all’interno delle parentesi tonde vengono inseriti i parametri della funzione.

La funzione primaria, utile nella maggior parte dei casi è op(), che può agire su tre diversi tipi di selettore: class, id e name.

Ogni funzione agisce su un solo selettore, dunque un solo elemento per id e name, oppure su tutti gli elementi HTML con che condividono la stessa classe (class).

op('myClass')  ->  class="myClass"
op('myId')   ->  id="myId"
op('myName')   ->  name="myName"

L’azione della funzione op, come per tutte le altre che iniziano con questa keyword, sarà di aprire/chiudere (mostra/nascondi) uno o più elementi HTML che rispondano ai parametri immessi nella parentesi tonde.

Importante: Nelle parentesi tonde vanno inseriti i parametri tra le “virgolette” o gli ‘apici’.

Esempio:

<!-- by class -->
<button onclick="op('myClass')">Mostra/nascondi</button>

<div class="myClass">Lorem Ipsum</div>
<p class="myClass">Lorem Ipsum</p>
<img class="myClass" src="/..." />


<!-- by id-->
<button onclick="op('myId')">Mostra/nascondi</button>

<div id="myId">Lorem Ipsum</div>


<!-- by name-->
<button onclick="op('myName')">Mostra/nascondi</button>

<div name="myName">Lorem Ipsum</div>

Le funzioni e sintassi

Come abbiamo visto, con Open.JS e la funzione “op()” possiamo interagire con selettori differenti senza usare sintassi differenti, ciò si rivela utile in molti casi poiché non richiede di memorizzare tante funzioni e valori.

Tuttavia, in altre situazioni potrebbe essere più appropriato usare chiavi e funzioni univoche e specifiche per singolo scopo. A questo proposito, con Open.JS possiamo agire direttamente sui singoli selettori, in modi differenti in base alle proprie esigente.

Non badare troppo alla descrizione ma cerca di capire la struttura delle funzioni.

By class

La funzione per agire sulle singole classi di un progetto HTML è “op_cl()“. Come puoi vedere inizia sempre con op, seguito da “_cl“.

<a onclick="op('myClass')">...</a>
<p class="myClass">...</p>

By ID

La funzione specifica per i selettori “id” segue la stessa struttura della precedente, ma viene richiamata con “op_id()“. Nelle parentesi tonde andrà digitato il nome dell’ID su cui agire.

<button onclick="op('myId')">...</button>
<div id="myId">...</div>

By name

Il selettore “name“, molto usato in HTML per i forms, può essere selezionato facilmente tramite la funzione “op_n()“.

<a onclick="op('input-name')">...</a>
<input type="text" name="input-name">

By element

Infine, con Open.JS è possibile agire su uno specifico elemento HTML, o tag con “op_el()“. Questa funzione interesserà tutti i tags dello stesso tipo. (esempio <p>, <img>, <div>, <a> etc….).

<button onclick="op('img')">...</button>
<img src="..." />

Parametri

In Open.JS, ogni funzione può essere arricchita con parametri speciali, per aggiungere effetti grafici o per selezionare elementi in maniera differente dall’ordinario.

Ogni parametro risponde ad una specifica lettera, tutte elencate nella tabella seguente; ognuno di essi va indicato successivamente al campo dell’elemento, aggiungendo un ulteriore “_” (undersore).

ParametroDescrizioneEsempio
Parametri di primo livello
_fAggiunge un effetto a dissolvenza (fade)op_cl_f()
_sAggiunge un effetto a scorrimento (slide)op_id_s
Parametri di secondo livello.
_bSeleziona elementi che iniziano per …op_n_b()
_cSeleziona elementi che contengono …op_c()
_eSeleziona elementi che finiscono per …op_cl_e()

I parametri di secondo livello non possono essere utilizzati per selettori di tipo “elemento” (by element – “op_el“).

Quelli di primo livello, come puoi vedere, sono dedicati agli effetti grafici di base (dissolvenza e scorrimento); quelli di secondo invece servono a selezionare elementi in modo più complesso, in base al termine digitato nelle parentesi tonde.

  • op_cl_b(‘my’) -> class=”my-first-text”
  • op_n_c(‘irst’) -> name=”my-first-text”
  • op_id_e(‘ext’) -> id=”my-first-text

Combinare i parametri

Combinare parametri è possibile, tuttavia si possono unire esclusivamente quelli di primo con quelli di secondo livello, singolarmente.

Ad esempio, se vuoi ottenere effetti di dissolvenza con un “_f” con una selezione dell’elemento di tipo “_b“, basterà unire le lettere “_fb“. L’importante è rispettare la gerarchia dei livelli e non combinare due parametri dello stesso livello.

Le combinazioni possibili sono:

  • _fb();
  • _fc();
  • _fe();
  • _sb();
  • _sc();
  • _se();

Tempo di esecuzione (velocità)

Un ulteriore caratteristica delle funzioni di Open.JS è che esse possono essere programmate con un tempo di esecuzione ben preciso (velocità di esecuzione).

Se vuoi che la chiusura o l’apertura di un elemento impieghi più tempo del normale, puoi impostar e un timeout in millisecondi all’interno delle parentesi tonde della funzione, di seguito al selettore.

Esempio:

op_id('myId', 3000);
op_cl_f('myClass', 2000);

(1000ms = 1 secondo).

Basta una virgola seguita dalla cifra numerica dei millisecondi, entro il quale la funzione terminerà la sua esecuzione.

In JQuery esistono keyword dedicate a questo scopo, come “slow“, “normal” e “fast” – op('myClass', 'fast');

Tutte le funzioni precedentemente descritte supportano il tempo di esecuzione.

Ritardo

Il tempo di esecuzione specifica la velocità con cui la funzione deve essere eseguita. Nel caso invece si volesse ritardare l’esecuzione, è possibile indicare un altro parametro. Simile a quello precedente, il ritardo (delay) deve essere indicato nelle parentesi tonde, successivo al tempo di esecuzione. In questo modo: op('selettore', velocità, ritardo);

Essendo il terzo parametro della funzione, il ritardo va indicato dopo la seconda virgola. Questo significa che il campo “velocità” non può essere lasciato vuoto; ma nel caos non se ne abbia bisogno basta scrivere 0 (zero).

  • Esempio di sintassi corretta = op('myClass', 0, 1000);
  • Sintassi errata = op('myClass', , 1000);

Il ritardo va sempre scritto in sempre millisecondi e supporta le keyword “slow” e “fast“. Tutte le funzioni hanno pieno supporto al campo “ritardo”.

Esempio di ritardo e di velocità:





Funzioni secondarie

In Open.JS le funzioni principali iniziano tutte con “op“, che esegue un mostra/nascondi delle elementi. Tuttavia può rivelarsi utile gestire elementi con funzione esclusive per “mostra” (show) e per “nascondi” (hide) separatamente.

A questo scopo sono disponibili i le funzioni corrispondenti show() e hide(), da utilizzare nel medesimo modo di quelle viste fino ad ora, esclusi i parametri di secondo livello.

hide() e show() agiscono su id, class e name ma non sui tag HTML, supportano il tempo di esecuzione.

Autore

L’autore di Open.JS è Simone Bernardo, autore e scrittore di BytePost, autore e sviluppatore di Codewith.it.

Licenza

Open.JS è open-source, ad uso totalmente gratuito. Chiunque abbia voglia di supportare, modificare e migliorare il codice ne ha la possibilità, senza limiti.

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA