jQuery Mobile es una tecnología web que se utiliza para crear aplicaciones web receptivas y sitios web que son dispositivos accesibles de diferentes tamaños de pantalla. Está construido sobre jQuery .
En este artículo, utilizaremos la opción jQuery Mobile Toolbar backBtnText . La opción backBtnText acepta una string y solo funciona si hay un botón Atrás en la barra de herramientas del encabezado. Puede agregar un botón Atrás a la barra de herramientas del encabezado mediante la opción addBackBtn de la barra de herramientas .
Si backBtnText se establece en una string, el texto del botón Atrás se establecerá en esa string.
Sintaxis:
$(".selector").toolbar({
backBtnText: "Previous Page"
});
-
Obtenga la opción backBtnText :
var backBtnTxt = $( ".selector" ) .toolbar( "option", "backBtnText" ); -
Configure la opción backBtnText :
$( ".selector" ).toolbar( "option", "backBtnTxt", "Previous" );
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>
Ejemplo: en este ejemplo, primero agregaremos un botón Atrás a la barra de herramientas del encabezado usando la opción addBackBtn y luego estableceremos la opción backBtnText en «Página anterior».
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Toolbar - backBtnText option</title>
<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 () {
$("#divID2").toolbar({
addBackBtn: true,
});
$( "#divID2" ).toolbar({
backBtnText: "Previous Page"
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<center>
<h2 style="color:green;">GeeksforGeeks</h2>
<h3>Toolbar backBtnText option</h3>
<div id="divID" 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="divID2" data-role="header">
<h1> Header Toolbar</h1>
</div>
<center>
<h2 style="color:green;">
What is GeekforGeeks?
</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-backBtnText