Herramientas de usuario
fw:others:jquerylibs
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
fw:others:jquerylibs [2010/02/20 21:19] alfred |
fw:others:jquerylibs [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 82: | Línea 82: | ||
| > ?action=view§ion=info&id=123 | > ?action=view§ion=info&id=123 | ||
| </code> | </code> | ||
| + | |||
| ==== Splitter ==== | ==== Splitter ==== | ||
| Línea 164: | Línea 165: | ||
| </div> <!-- #MySplitter --> | </div> <!-- #MySplitter --> | ||
| + | </code> | ||
| + | |||
| + | |||
| + | ==== Tabs ==== | ||
| + | * **Función**: Te muestra tabs (pestaña) a partir de una lista. | ||
| + | * **Link**: [[http://stilbuero.de/jquery/tabs/]] | ||
| + | * **Archivo**: {{fw:others:jquerylibs:jquery.tabs.zip|jQuery Tabs}} | ||
| + | <code html> | ||
| + | ... | ||
| + | <script src="jquery.tabs.pack.js" type="text/javascript"></script> | ||
| + | ... | ||
| + | <script type="text/javascript"> | ||
| + | $(function() { | ||
| + | $('#container-1').tabs(); | ||
| + | }); | ||
| + | </script> | ||
| + | ... | ||
| + | <link rel="stylesheet" href="jquery.tabs.css"> | ||
| + | ... | ||
| + | <div id="container-1"> | ||
| + | <ul> | ||
| + | <li><a href="#fragment-1"><span>One</span></a></li> | ||
| + | |||
| + | <li><a href="#fragment-2"><span>Two</span></a></li> | ||
| + | <li><a href="#fragment-3"><span>Tabs are flexible again</span></a></li> | ||
| + | </ul> | ||
| + | <div id="fragment-1"> | ||
| + | <p>First tab is active by default:</p> | ||
| + | Prueba | ||
| + | |||
| + | </div> | ||
| + | <div id="fragment-2"> | ||
| + | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. | ||
| + | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. | ||
| + | </div> | ||
| + | <div id="fragment-3"> | ||
| + | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. | ||
| + | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. | ||
| + | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. | ||
| + | </div> | ||
| + | </div> | ||
| + | </code> | ||
| + | |||
| + | |||
| + | ==== jGrowl ==== | ||
| + | * **Función**: Muestra mensajes en formato "mac". | ||
| + | * **Link**: [[http://stanlemon.net/projects/jgrowl.html]] | ||
| + | * **Archivo**: {{fw:others:jquerylibs:jgrowl-1.2.4.zip|jGrowl}} | ||
| + | <code javascript> | ||
| + | $.jGrowl("Hello world!"); | ||
| + | $.jGrowl("Stick this!", { sticky: true }); | ||
| + | $.jGrowl("A message with a header", { header: 'Important' }); | ||
| + | $.jGrowl("A message that will live a little longer.", { life: 10000 }); | ||
| + | $.jGrowl("A message with a beforeOpen callback and a different opening animation.", { | ||
| + | beforeClose: function(e,m) { | ||
| + | alert('About to close this notification!'); | ||
| + | }, | ||
| + | animateOpen: { | ||
| + | height: 'show' | ||
| + | } | ||
| + | }); | ||
| + | ... | ||
| + | .jgError { color: red; } | ||
| + | div.jGrowl div.jgError { | ||
| + | background-color: #FFF1C2; | ||
| + | color: navy; | ||
| + | } | ||
| + | .... | ||
| + | $.jGrowl("hola", { sticky: true, theme: "jgError" }); | ||
| </code> | </code> | ||
fw/others/jquerylibs.1266700797.txt.gz · Última modificación: 2020/05/09 09:24 (editor externo)
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
