Opción backBtnTheme de la barra de herramientas de jQuery Mobile

jQuery Mobile es un conjunto de herramientas de widgets de interacción con el sistema del usuario basado en HTML5 que se utiliza para diversos fines construidos sobre jQuery. Está diseñado para crear sitios rápidos y con capacidad de respuesta accesibles para dispositivos móviles, pestañas y computadoras de escritorio. 

En este artículo, utilizaremos la opción jQuery Mobile Toolbar backBtnTheme . La opción Toolbar backBtnTheme se utiliza para establecer el esquema de color para el botón Atrás de la barra de herramientas. Acepta una sola letra (az) que se asigna a una muestra en el tema.

Sintaxis:

Inicialice la barra de herramientas con la opción backBtnTheme especificada:

$( ".selector" ).toolbar({
  backBtnTheme: "b"
});
  • Obtenga la opción backBtnTheme , después de la inicialización:

    var backBtnTheme = $( ".selector" )
        .toolbar( "option", "backBtnTheme" );
  • Configure la opción backBtnTheme , después de la inicialización:

    $( ".selector" ).toolbar( "option", "backBtnTheme", "b" );

Enlaces CDN:

<enlace rel=”hoja de estilo” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code .jquery.com/jquery-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”> </script>

Los siguientes ejemplos demuestran la opción jQuery Mobile Toolbar backBtnTheme .

Ejemplo 1: En este ejemplo, inicializaremos la barra de herramientas sin especificar backBtnTheme.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src=
"https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
    </script>
  
    <script>
        $(document).ready(function () {
            $("#GFG2").toolbar({
                addBackBtn: true,
            });
        });
    </script>
</head>
  
<body>
    <div data-role="page" id="page1">
        <center>
            <h2 style="color: green;">
              GeeksforGeeks
            </h2>
            <h3>Toolbar backBtnTheme option</h3>
            <div id="GFG" data-role="header">
                <h1> Header Toolbar</h1>
            </div>
            <br>
            <a href="#page2">Go to Page2</a>
        </center>
    </div>
  
    <div data-role="page" id="page2">
        <div id="GFG2" data-role="header">
            <h1> Header Toolbar</h1>
        </div>
  
        <center>
            <h2 style="color: green;">
              What is GeeksforGeeks?
            </h2>
            <p style="padding: 0px 20px;">
                GeeksforGeeks is a computer science 
                portal for geeks by geeks. Here
                you can find articles on various 
                computer science topics like Data
                Structures, Algorithms and many more.
            </p>
        </center>
    </div>
</body>
  
</html>

Producción:

jQuery Mobile Toolbar backBtnTheme Option

Ejemplo 2: En este ejemplo, inicializaremos la barra de herramientas con backBtnTheme especificado en la muestra «b».

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src=
"https://code.jquery.com/jquery-2.1.3.js">
      </script>
    <script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
      </script>
  
    <script>
        $(document).ready(function () {
            $("#GFG2").toolbar({
                addBackBtn: true,
            });
  
            // Initialize backBtn's theme with swatch "b"
            $("#GFG2").toolbar({
                backBtnTheme: "b"
            });
  
        });
    </script>
</head>
  
<body>
    <div data-role="page" id="page1">
        <center>
            <h2 style="color: green;">GeeksforGeeks</h2>
            <h3>Toolbar backBtnTheme option</h3>
            <div id="GFG" data-role="header">
                <h1> Header Toolbar</h1>
            </div>
            <br>
            <a href="#page2">Go to Page2</a>
        </center>
    </div>
  
    <div data-role="page" id="page2">
        <div id="GFG2" data-role="header">
            <h1> Header Toolbar</h1>
        </div>
  
        <center>
            <h2 style="color: green;">
              What is GeeksforGeeks?
            </h2>
            <p style="padding: 0px 20px;">
                GeeksforGeeks is a computer science
                portal for geeks by geeks. Here
                you can find articles on various 
                computer science topics like Data
                Structures, Algorithms and many more.
            </p>
  
        </center>
    </div>
</body>
  
</html>

Producción:

jQuery Mobile Toolbar backBtnTheme Option

Referencia: https://api.jquerymobile.com/toolbar/#option-backBtnTheme

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *