/ / Testo personalizzato per il menu Drilldown Pulsante "Indietro" [Foundation 6] - zurb-foundation, zurb-foundation-6

Testo personalizzato per menu Drilldown Pulsante "Indietro" [Foundation 6] - zurb-foundation, zurb-foundation-6

Mentre so che posso usare -Back-pulsante Dati per cambiare il testo sui miei menu di drilldown, è possibile cambiarli per riflettere qualunque sia il genitore del drilldown?

Ad esempio, il menu drill-down funziona come tale: Esempio 1

E mi piacerebbe che funzionasse come tale: Esempio 2

Spero che questo abbia senso e fammi sapere se posso chiarire. Grazie per qualsiasi suggerimento che puoi fornire.

risposte:

5 per risposta № 1

Ci sono un paio di modi in cui potresti farlo, ma il più semplice sembra essere qualcosa del genere:

1) Usa Opzioni di drilldown delle basi per impostare un nuovo pulsante di back generale. per esempio. data-back-button="<li class="js-drilldown-back"><a class="new-back"></a></li>"

Questo si prende cura dello stile con .js-drilldown-back e lo fa funzionare come pulsante indietro senza JavaScript aggiuntivo. Aggiunge anche una nuova classe al a per uso successivo, impostare il testo.

2) Per cambiare il testo puoi usare jQuery, forse qualcosa di simile a questo:

$(".new-back").each(function(){
var backTxt = $(this).parent().closest(".is-drilldown-submenu-parent").find("> a").text();
$(this).text(backTxt);
});

Tutto ciò che fa è scurire la struttura del menu per scoprire quale fosse il testo del link originale, quindi copiarlo sul nuovo pulsante Indietro.

Questo dovrebbe funzionare per tutti i livelli di un drilldown come in questo esempio: http://codepen.io/tymothytym/pen/GWbXap

FYI: Ci sono alcuni problemi di usabilità lieve nell'usare le stesse etichette per puntare in avanti e indietro nei menu, in quanto gli utenti possono trovare questa confusione, in particolare con molti livelli. Potresti averlo già considerato, lo dico solo per completezza.