0
219
Vistas¿Por qué no puedo hacer que mi información sobre herramientas de JQuery funcione?
Encontré esta biblioteca Toolbar.js JQuery realmente genial que me encantaría agregar a mi aplicación, aunque las instrucciones en la página parecen bastante sencillas, tengo problemas para que funcione.
Encuentre a continuación mi archivo HTML simple organizado según las instrucciones:
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="js/jquery.toolbar.js"></script> <link href="css/jquery.toolbar.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/> <script> $(document).ready(function() { $('#gear').toolbar({ content: '#toolbar-options', position: 'top' }); }); </script> </head> <body> <header> <h1>Testing toolbar.js</h1> </header> <div class="btn-toolbar btn-toolbar-warning"> <i class="fa fa-cog"></i> </div> <div id="toolbar-options" class="hidden btn-toolbar btn-toolbar-primary"> <a href="#"><i class="fa fa-plane"></i></a> <a href="#"><i class="fa fa-car"></i></a> <a href="#"><i class="fa fa-bicycle"></i></a> </div> </body> </html>La consola del navegador no muestra ningún mensaje de error. El código HTML muestra la siguiente imagen, pero no muestra la información sobre herramientas como se desea:
¡Ayuda! ¿Qué me estoy perdiendo o haciendo mal?
Tu ayuda es apreciada.
1 Respuestas
Responde la pregunta0
- Prevenir múltiples elementos con la misma ID
id="gear" - Evitar elementos con múltiples ID
id="toolbar-options gear" - Agregar barra de herramientas css enlace CDN (en lugar de archivo local)
<link hef="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar@1.0.1/jquery.toolbars.css" rel="stylesheet"/>`
Después de solucionar esos problemas, todavía no parece funcionar.
Aparece la
position: 'bottom'provoca el error.Configurarlo en la parte superior funciona como puede ver en esta demostración:
$('#gear').toolbar({ content: '#toolbar-options', position: 'top' });.hidden { display: none; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar@1.0.1/jquery.toolbar.js"></script> <link href="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar@1.0.1/jquery.toolbars.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/> <header> <h1>Testing toolbar.js</h1> </header> <div class="btn-toolbar btn-toolbar-warning" id="gear" > <i class="fa fa-cog"></i> </div> <div id="toolbar-options" class="hidden btn-toolbar btn-toolbar-primary"> <a href="#"><i class="fa fa-plane"></i></a> <a href="#"><i class="fa fa-car"></i></a> <a href="#"><i class="fa fa-bicycle"></i></a> </div>
El error se arroja en getCoordinates que muestra:
getCoordinates: function( position, adjustment) { var self = this; self.coordinates = self.$elem.offset(); if(position == 'top') { return coordinates = { left: self.coordinates.left-(self.toolbar.width()/2)+(self.$elem.width()/2), top: self.coordinates.top-self.$elem.height()-adjustment, } } if(position == 'left') { return coordinates = { left: self.coordinates.left-(self.toolbar.width()/2)-(self.$elem.width()/2)-adjustment, top: self.coordinates.top-(self.toolbar.height()/2)+(self.$elem.height()/2), } } }, Dado que la función no devuelve nada si el valor es bottom , tiene sentido que se produzca un error.