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:
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:
Referencia: https://api.jquerymobile.com/toolbar/#option-backBtnTheme