jquery UI pestañas ancho 100%

enter image description here Necesito usar solo 2 pestañas en mi aplicación. Entonces quiero que cubran el 100% del ancho. Actualmente alinea ambas fichas en el lado izquierdo y deja todo tipo de espacio vacío en el lado derecho. ¿Qué puedo hacer para que mis dos pestañas cubran el 100% del área? estoy usando jQuery-UI-1.8.17.custom.cssjquery UI pestañas ancho 100%

código

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
     <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" /> 
     <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> 
     <script type="text/javascript"> 

      $(function(){ 


       // Tabs 
       $('#tabs').tabs(); 


      }); 
     </script> 

    </head> 
    <body> 

    <div data-role="page"> 

    <div data-role="header"> 
     <h1>My Title</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
      <div id="tabs"> 
      <ul> 
       <li><a href="#tabs-1">First</a></li> 
       <li><a href="#tabs-2">Second</a></li> 

      </ul> 
      <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> 
       </div> 

    </div><!-- /content --> 

</div><!-- /page --> 
     <!-- Tabs --> 




    </body> 
</html>

Fuente

2012-02-10 Autolycus

Hay alguna posibilidad de ver algunas marcas? – pete

seguro, dame un segundo – Autolycus

Via conjunto CSS:

.ui-tabs .ui-tabs-nav li { 
    width:50%; 
}

Nota debido al relleno, márgenes y fronteras que pueda necesitar para reducirlo a menos del 50%.

Actualización: Si desea centrar el texto en las pestañas, debe hacer dos cambios CSS (manteniendo el 50% de cambio desde arriba).

.ui-tabs .ui-tabs-nav li { 
    width:50%; 
    text-align: center; 
} 
.ui-tabs .ui-tabs-nav li a { 
    display: inline-block; 
    float: none; 
    padding: 5px; 
    text-decoration: none; 
    width: 100%; 
}

Tenga en cuenta que puede ajustar el relleno según sea necesario.

Fuente

2012-02-10 03:10:47 j08691

¿cambio en el jquery css? – Autolycus

bueno! Eso es . ¿Cómo los centro? – Autolycus

Puede modificar el CSS de jQuery UI o simplemente agregar su propio CSS después de él, ya que anulará las reglas declaradas antes. – j08691

Con Flexbox Es flexible y fácil:

.ui-tabs .ui-tabs-nav { 
    display: flex; 
} 

.ui-tabs .ui-tabs-nav li { 
    flex: 1; 
    display: flex; 
    /* If placed in a small width sidebar or something like that disabling nowrap will fix the overflow issue */ 
    white-space: normal; 
} 

.ui-tabs .ui-tabs-nav li a { 
    flex: 1; 
    /* If you want to align tab titles center */ 
    text-align: center; 
}

Fuente

2016-11-02 21:10:19

me funciona de maravilla y es más limpio – cycle4passion

Respuesta

Cuestiones relacionadas