/ / Texto personalizado para el menú de profundización Botón "Atrás" [Fundación 6] - zurb-foundation, zurb-foundation-6

Texto personalizado para el menú de profundización Botón "Atrás" [Fundación 6] - zurb-foundation, zurb-foundation-6

Mientras sé que puedo usar datos-back-button para cambiar el texto en mis menús de desglose, ¿es posible cambiarlos para reflejar lo que sean los padres del desglose?

Por ejemplo, el menú de profundización funciona como tal: Ejemplo 1

Y me gustaría que funcione como tal: Ejemplo 2

Espero que esto tenga sentido y háganme saber si puedo aclararlo. Gracias por cualquier información que pueda proporcionar.

Respuestas

5 para la respuesta № 1

Hay un par de formas en que puede hacer esto, pero la más directa me parece que es algo como esto:

1) Uso Opciones de profundización de fundaciones para establecer un nuevo botón de retroceso general. p.ej. data-back-button="<li class="js-drilldown-back"><a class="new-back"></a></li>"

Esto cuida el estilo con .js-drilldown-back y lo hace funcionar como un botón de retroceso sin JavaScript adicional. También agrega una nueva clase al a para uso posterior configurando el texto.

2) Para cambiar el texto puede usar jQuery, tal vez algo como esto:

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

Todo lo que hace es escabullirse por la estructura del menú para descubrir cuál era el texto del enlace original, y luego lo copia al nuevo botón Atrás.

Esto debería funcionar para todos los niveles de un desglose como en este ejemplo: http://codepen.io/tymothytym/pen/GWbXap

FYI: Hay algunas preocupaciones de usabilidad leve con el uso de las mismas etiquetas para apuntar hacia adelante y hacia atrás en los menús, ya que los usuarios pueden encontrar esto confuso, particularmente con muchos niveles. Es posible que ya haya considerado esto, lo menciono solo por completo.