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 de pantalla completa jQuery Mobile Toolbar . Cuando la opción de pantalla completa se establece en verdadero, la barra de herramientas se ocultará por completo cuando se toca o se hace clic en la página. El valor predeterminado con el que se inicializa la opción de pantalla completa es falso.
Sintaxis:
Inicialice la barra de herramientas con la opción de pantalla completa especificada:
$(".selector").toolbar({
fullscreen: true
});
-
Obtenga la opción de pantalla completa , después de la inicialización:
var fullscreen = $(".selector").toolbar("option", "fullscreen"); -
Configure la opción de pantalla completa , después de la inicialización:
$(".selector").toolbar("option", "fullscreen", true);
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, estableceremos la opción de pantalla completa en «verdadero».
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 () {
// Set the toolbar's fullscreen option to true
$("#GFG").toolbar({
fullscreen: true,
});
});
</script>
</head>
<body>
<div data-role="page">
<div id="GFG" data-role="header"
data-position="fixed">
<h1>Toolbar</h1>
</div>
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>jQuery Mobile Toolbar fullscreen option</h3>
<h2>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.... GeekforGeeks was founded by
Sandeep Jain.
</p>
</center>
</div>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/toolbar/#option-fullscreen