¿Cómo diseñar tabview para móviles usando el complemento tabview jQuery?

En este artículo, aprenderemos a diseñar pestañas para móviles utilizando el complemento jQuery tabview , que es un complemento basado en jQuery.

Se deben seguir los siguientes pasos para usar el complemento:

Paso 1: descargue todos los archivos precompilados necesarios del Github oficial y guárdelos en su carpeta de trabajo.

Paso 2: cree un nuevo archivo HTML e importe los archivos que se usarían para que el complemento funcione. El archivo de script principal estaría presente en el último directorio del repositorio.

Paso 3: defina el encabezado, el contenido, la cantidad de pestañas y el tema de las pestañas utilizando el atributo de rol de datos para definir las diversas partes del sitio web como se muestra a continuación:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!-- Include the jQuery Mobile CSS -->
    <link rel="stylesheet" href="
http://code.jquery.com/mobile/git/jquery.mobile-git.css">
  
    <!-- Include the tabview 
        mobile-collapsible CSS stylesheet -->
    <link rel="stylesheet" 
href="jquery.mobile.collapsible.css">
  
    <!-- Include jQuery -->
    <script src=
        "http://code.jquery.com/jquery-1.10.1.js">
    </script>
  
    <!-- Include the tabview script file -->
    <script src="example/latest.js"></script>
</head>
  
<body>
    <!-- Define a page -->
    <div data-role="page">
  
        <!-- Define a header -->
        <div data-role="header">
            <h2>
                Collapsible Tabs using CSS
                and JavaScript
            </h2>
        </div>
  
        <!-- Define the contert of the page -->
        <div data-role="content">
  
            <!-- Use a collapsible-set for
             defining the tabs -->
            <div data-role="collapsible-set" 
                data-type="tabs" data-tabs="4" 
                data-theme="a" data-content-theme="a">
  
                <!-- Define each of the tabs 
                    for the plugin -->
                <div data-role="collapsible" 
                    data-collapsed="true">
                    <h1>Dhaka</h1>
  
                    <p>
                        Dhaka is the capital 
                        of Bangladesh
                    </p>
                </div>
  
                <div data-role="collapsible">
                    <h1>Kabul</h1>
  
                    <p>
                        Kabul is the capital 
                        of Afganishtan
                    </p>
                </div>
  
                <div data-role="collapsible">
                    <h1>Islamabad</h1>
  
                    <p>
                        Islamabad is the capital 
                        of Pakistan
                    </p>
                </div>
  
                <div data-role="collapsible">
                    <h1>Washington</h1>
  
                    <p>
                        Washigton is the capital 
                        city of USA
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Usar el complemento en una vista no móvil

Usando el complemento en una vista móvil

Publicación traducida automáticamente

Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta