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 [2009/11/24 16:02] alfred |
fw:others:jquerylibs [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 45: | Línea 45: | ||
| }); | }); | ||
| </code> | </code> | ||
| + | |||
| Línea 80: | Línea 81: | ||
| var stillTheSame = $.query.copy(); | var stillTheSame = $.query.copy(); | ||
| > ?action=view§ion=info&id=123 | > ?action=view§ion=info&id=123 | ||
| + | </code> | ||
| + | |||
| + | |||
| + | ==== Splitter ==== | ||
| + | * **Función**: Permite hacer los divs redimensionables. | ||
| + | * **Link**: [[http://methvin.com/splitter/]] | ||
| + | * **Archivo**: {{fw:others:jquerylibs:splitter-1.5.1.zip|jQuery Splitter Plugin}} | ||
| + | <code> | ||
| + | #MySplitter { | ||
| + | border: 3px solid #669; | ||
| + | min-width: 500px; /* Splitter can't be too thin ... */ | ||
| + | min-height: 300px; /* ... or too flat */ | ||
| + | height: 100%; | ||
| + | } | ||
| + | #LeftPane { | ||
| + | background: #ddf; | ||
| + | width: 150px; | ||
| + | min-width: 100px; | ||
| + | max-width: 300px; | ||
| + | overflow: auto; /* Scroll bars appear as needed */ | ||
| + | } | ||
| + | #TopPane { /* Top nested in right pane */ | ||
| + | background: #ccf; | ||
| + | height: 150px; /* Initial height */ | ||
| + | min-height: 75px; /* Minimum height */ | ||
| + | overflow: auto; | ||
| + | } | ||
| + | #BottomPane { /* Bottom nested in right pane */ | ||
| + | background: #eef; | ||
| + | min-height: 100px; | ||
| + | overflow: auto; | ||
| + | } | ||
| + | |||
| + | /* Splitbar styles; these are the default class names */ | ||
| + | |||
| + | .vsplitbar { | ||
| + | width: 6px; | ||
| + | background: #669 url(img/vgrabber.gif) no-repeat center; | ||
| + | } | ||
| + | .vsplitbar:hover, .vsplitbar.active { | ||
| + | background: #c66 url(img/vgrabber.gif) no-repeat center; | ||
| + | opacity: 0.7; | ||
| + | filter: alpha(opacity=70); /* IE */ | ||
| + | background: #c99; | ||
| + | } | ||
| + | .hsplitbar { | ||
| + | height: 6px; | ||
| + | background: #669 url(img/hgrabber.gif) no-repeat center; | ||
| + | } | ||
| + | .hsplitbar.active, .hsplitbar:hover { | ||
| + | background: #c66 url(img/hgrabber.gif) no-repeat center; | ||
| + | } | ||
| + | ... | ||
| + | $().ready(function() { | ||
| + | $("#MySplitter").splitter({ | ||
| + | splitVertical: true, | ||
| + | outline: true, | ||
| + | sizeLeft: true, | ||
| + | anchorToWindow: true, | ||
| + | accessKey: "I" | ||
| + | }); | ||
| + | |||
| + | $("#RightPane").splitter({ | ||
| + | splitHorizontal: true, | ||
| + | sizeTop: true, | ||
| + | accessKey: "H" | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | ... | ||
| + | <div id="MySplitter"> | ||
| + | <div id="LeftPane"> | ||
| + | Texto en la parte izquierda. | ||
| + | </div> | ||
| + | <div id="RightPane"> | ||
| + | <div id="TopPane"> | ||
| + | Texto en la parte derecha-arriba. | ||
| + | </div> | ||
| + | <div id="BottomPane"> | ||
| + | Texto en la parte derecha-abajo. | ||
| + | </div> | ||
| + | </div> <!-- #RightPane --> | ||
| + | </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.1259078520.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
