javascription - Pestañas de navegación móvil de jQuery

onclick void 0

Question

Quiero tener un navegador de pestañas en mi proyecto jQuery Mobile. Sé que puedo usar la "barra de navegación" de roles de datos, pero solo quiero cambiar el contenido debajo de esa barra de navegación sin deslizarme a una página nueva. Hasta ahora, solo podía tener varias páginas diferentes con la misma barra de navegación enlazando entre sí, pero eso no es lo que quiero.

¿Alguien puede ayudarme?

Gracias de antemano

Answer 1

ACTUALIZACIÓN: echa un vistazo a mi jsfiddle en http://jsfiddle.net/ryanhaney/eLENj/

Acabo de pasar un tiempo averiguando esto, así que pensé que podría responder esto. Tenga en cuenta que estoy usando un solo archivo de varias páginas, YMMV.

<div data-role="footer" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li>
            <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li>
            <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li>
        </ul>
    </div>
</div>

$("div[data-role=page]").bind("pagebeforeshow", function () {
    // prevents a jumping "fixed" navbar
    $.mobile.silentScroll(0);
});

$("a[data-role=tab]").each(function () {
        // bind to click of each anchor
        var anchor = $(this);
        anchor.bind("click", function () {
            // change the page, optionally with transitions
            // but DON''T navigate...
            $.mobile.changePage(anchor.attr("href"), {
                transition: "none",
                changeHash: false
        });

        // cancel the click event
        return false;
    });
});

Answer 2

@Mike Bartlett

Luché con esto yo mismo, pero después de descifrar el código de Jasper, parece que hay un pequeño matiz en el código publicado y en la página jsfiddle.

Donde ha publicado

$(document).delegate(''[data-role="navbar"] a'', ''click'', function () {
$(this).addClass(''ui-btn-active'');
$(''.content_div'').hide();
$(''#'' + $(this).attr(''data-href'')).show(); });

Me pareció útil cambiar la última línea para simplemente llamar a cualquier contenido que establezca el valor "data-href" para que esté en su barra de navegación.

$(''div[data-role="navbar"] a'').live(''click'', function () {
    $(this).addClass(''ui-btn-active'');
    $(''div.content_div'').hide();
    $($(this).attr(''data-href'')).show();
  });

mi navbar html luego lee

<div data-role="navbar">
<ul>
    <li><a href="#" data-href="#a">One</a></li>
    <li><a href="#" data-href="#b">Two</a></li>
</ul>

Que es más o menos lo mismo que el suyo, pero por alguna razón no recibí el mensaje "error al cargar la página". Espero que ayude...

Answer 3

Por favor refiere este enlace a continuación para todo tipo de barra de navegación en jquery

http://jquerymobile.com/demos/1.0rc2/docs/toolbars/docs-navbar.html

<div data-role="navbar">
   <ul>
    <li><a href="a.html" class="ui-btn-active">One</a></li>
    <li><a href="b.html">Two</a></li>
   </ul>
</div>

Gracias

Answer 4

Me gustó la respuesta de @ Ryan-Haney, pero pensé en agregar mi propio borrador, si alguien puede encontrar una forma más eficiente de hacerlo, entonces por favor agregue un comentario ... gracias

Lo hice de esta manera porque tengo un montón de archivos "incluidos" que se cargan en el DOM en tiempo de ejecución, por lo que no pude codificar que la n-ésima pestaña esté resaltada / activada para cada página como lo hizo Ryan. También tengo el lujo de tener solo un tabbar en mi aplicación.

$(document).delegate(''.ui-navbar a'', ''tap'', function ()
{
  $(''.ui-navbar'').find(''li'').find(''a'').removeClass(''ui-btn-active'');
  $(''.ui-navbar'').find(''li:nth-child('' + ($(this).parent().index() + 1) + '')'').find(''a'').addClass(''ui-btn-active'');
});

Answer 5

Puede usar el estilo de la barra de navegación de jQuery Mobile, pero use su propio manejador de clics, así que en lugar de cambiar las páginas, el clic ocultará / mostrará el contenido adecuado en la misma página.

HTML

<div data-role="navbar">
    <ul>
        <li><a href="#" data-href="a">One</a></li>
        <li><a href="#" data-href="b">Two</a></li>
    </ul>
</div><!-- /navbar -->
<div class="content_div">onLoad Content</div>
<div id="a" class="content_div">Some ''A'' Content</div>
<div id="b" class="content_div">Some ''B'' Content</div>

JAVASCRIPT

$(document).delegate(''[data-role="navbar"] a'', ''click'', function () {
    $(this).addClass(''ui-btn-active'');
    $(''.content_div'').hide();
    $(''#'' + $(this).attr(''data-href'')).show();
    return false;//stop default behavior of link
});

CSS

.content_div {
    display: none;
}
.content_div:first-child {
    display: block;
}

Aquí hay un jsfiddle del código anterior: http://jsfiddle.net/3RJuX/

NOTA:

• Cada uno de los enlaces en la barra de navegación tiene un atributo "data-href" establecido en el id del div (o cualquier contenedor que desee usar) que se mostrará.

Actualizar

Después de 1 año volví a esta respuesta y noté que el selector delegado del controlador de eventos se puede optimizar un poco para utilizar una clase en lugar de un atributo (que es mucho más rápido de una búsqueda):

$(document).delegate(''.ui-navbar a'', ''click'', function () {
    $(this).addClass(''ui-btn-active'');
    $(''.content_div'').hide();
    $(''#'' + $(this).attr(''data-href'')).show();
});

Actualizar

Este código puede ser más modular utilizando selectores relativos en lugar de los absolutos (como $(''.content_div'') , ya que seleccionará todos los elementos coincidentes en el DOM en lugar de solo los relativos al botón en el que se hizo clic).

//same selector here
$(document).delegate(''.ui-navbar ul li > a'', ''click'', function () {

    //un-highlight and highlight only the buttons in the same navbar widget
    $(this).closest(''.ui-navbar'').find(''a'').removeClass(''ui-navbar-btn-active'');

    //this bit is the same, you could chain it off of the last call by using two `.end()`s
    $(this).addClass(''ui-navbar-btn-active'');

    //this starts the same but then only selects the sibling `.content_div` elements to hide rather than all in the DOM
    $(''#'' + $(this).attr(''data-href'')).show().siblings(''.content_div'').hide();
});​

Esto le permite anidar pestañas y / o tener múltiples conjuntos de pestañas en una página o pseudo-página.

Alguna documentación para los "selectores relativos" utilizados:

• .closest() : http://api.jquery.com/closest
• .siblings() : http://api.jquery.com/siblings

Aquí hay un ejemplo: http://jsfiddle.net/Cfbjv/25/ (No está en línea ahora)

Answer 6

Noté que la pregunta se realizó hace cuatro años, por lo que no estoy seguro de si el widget Tab estaba disponible con JQ Mobile en ese momento. de todos modos soy un chico de 2015

la increíble solución que uso a continuación con Jquery Mobile 1.4.5

<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#one" data-ajax="false">one</a></li>
      <li><a href="#two" data-ajax="false">two</a></li>
      <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li>
    </ul>
  </div>
  <div id="one" class="ui-body-d ui-content">
    <h1>First tab contents</h1>
  </div>
  <div id="two">
    <ul data-role="listview" data-inset="true">
        <li><a href="#">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
        <li><a href="#">Cadillac</a></li>
        <li><a href="#">Ferrari</a></li>
    </ul>
  </div>
</div>