jQuery Mobile Navigation Tabs

Question

Quiero tener una navegación 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 me puede ayudar?

gracias de antemano

Answer 1

Puede utilizar la barra de navegación estilo jQuery Mobile, pero utilizar su propio controlador de clic-así que en vez de páginas que cambian el clic se acaba de 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í es una 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 el contenedor que desee utilizar) que se mostrará.

actualización

Después de 1 año regresé a esta respuesta y se dio cuenta de que el selector de control de eventos delegado se puede optimizar un poco para utilizar una clase en lugar de un atributo (lo cual 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(); 
}); 

actualización

Este código se puede hacer para ser más modula r mediante el uso de selectores relativos en lugar de los absolutos (como $('.content_div'), ya que esto 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 a las lengüetas de nidos y/o tener varios conjuntos de pestañas en un pseudo-páginas o páginas.

Parte de la documentación para los "selectores relativos" utilizados:

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

Aquí era un ejemplo: http://jsfiddle.net/Cfbjv/25/ (Es offline)

Answer 2

ACTUALIZAR: echa un vistazo a mi jsfiddle al http://jsfiddle.net/ryanhaney/eLENj/

Acabo de pasar un tiempo averiguando esto, así que pensé que iba a responder a 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 3

@ Mike Bartlett

tuve problemas con esto mismo pero después de romper el código de Jasper abajo parece que hay un ligero matiz de su código señalizadas y que en la página jsFiddle.

Dónde ha publicado

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

He encontrado que es útil para cambiar la última línea simplemente llamar a cualquier contenido que establece el valor "-href datos" para estar 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 barra de navegación HTML, entonces 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> 

¿Qué es más o menos la misma que la suya, pero por alguna razón no tengo el mensaje "Error de carga de la página". Esperamos que ayuda ...

Answer 4

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 5

me ha gustado la respuesta de @ Ryan-Haney, pero el pensamiento Agregaría mi propio borrador, si alguien puede encontrar una manera 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, así 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 6

Me di cuenta de que la pregunta se formuló 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 yo soy un tipo a partir de 2015

la solución increíble que utilizo como más abajo 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>