Diferencias

Muestra las diferencias entre dos versiones de la página.

--- fw:others:jquerylibs [2009/08/19 10:14]
alfred
+++ fw:others:jquerylibs [2020/05/09 09:25] (actual)
@@ Línea 1: / Línea 1: @@
-====== Librerías de jQuery ======
+====== Librerías de jQuery y JavaScript ======
-=== Table Sorter ===
+===== Librerías de jQuery =====
-  * **Función**: Crear una tabla con posibilidad de ordenar.
+==== Table Sorter ====
+  * **Función**: Crear una tabla con la posibilidad de ordenar.
   * **Link**: [[http://tablesorter.com/docs/]]
   * {{fw:others:jquerylibs:jquery.tablesorter.min.js.zip|Ficheros}}
 Es necesario que la tabla tenga las tags ''THEAD'' y ''TBODY''. \\
-Para crear la tabla:
+Para agregar la ordenación a la tabla:
 <code javascript>
 $(document).ready(function()
@@ Línea 12: / Línea 14: @@
     }
 );
+</code>
+==== quickSearch ====
+  * **Función**: Permite agregar una búsqueda ágil a una tabla.
+  * **Link**: [[http://rikrikrik.com/jquery/quicksearch/]]
+  * {{fw:others:jquerylibs:jquery.quicksearch.js.zip|}}
+Para agregar a la tabla:
+<code javascript>
+$(document).ready(function()
+    $("#<%= GridView1.ClientID %> tbody tr").quicksearch({
+        position: 'before',
+        attached: '#<%= GridView1.ClientID %>',
+        stripeRowClass: ['oddCell', 'evenCell'],
+        labelText: 'Cercar a la llista:',
+        isFieldset: true
+    });
+);
+</code>
+Con ASP.NET, necesitaremos hacer que aparezcan el THEAD y TBODY en el gridView, para ello en el control, después de hacer el binding haremos:
+<code csharp>this.GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;</code>
+==== Timer ====
+  * **Función**: Permite gestionar tiempos en jQuery.
+  * **Link**: [[http://plugins.jquery.com/project/Timer]]
+Por ejemplo, tras agregarlo, para que cada 30 segundos se llame a una función:
+<code javascript>
+$.timer(30000, function (timer) {
+  getData();
+});
+</code>
+==== Query ====
+  * **Función**: Permite acceso fácil a la query string.
+  * **Link**: [[http://plugins.jquery.com/project/query-object]]
+  * **Archivo**: {{fw:others:jquerylibs:jquery.query.rar|}}
+<code javascript>
+var section = $.query.get('section');
+> "info"
+var id = $.query.get('id');
+> 123
+var debug = $.query.get('debug');
+> true
+var arr = $.query.get('testy');
+> ["true", "false", true]
+var arrayElement = $.query.get('testy[1]');
+> "false"
+var newUrl = $.query.set("section", 5).set("action", "do").toString();
+> "?action=do&section=5&id=123"
+var newQuery = "" + $.query.set('type', 'string');
+> "?action=view&section=info&id=123&type=string"
+var oldQuery = $.query.toString();
+> "?action=view&section=info&id=123"
+var oldQuery2 = $.query;
+> ?action=view&section=info&id=123
+var newerQuery = $.query.SET('type', 'string');
+> ?action=view&section=info&id=123&type=string
+var notOldQuery = $.query.toString();
+> "?action=view&section=info&id=123&type=string"
+var oldQueryAgain = $.query.REMOVE("type");
+> ?action=view&section=info&id=123
+var emptyQuery = $.query.empty();
+> ""
+var stillTheSame = $.query.copy();
+> ?action=view&section=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>
+===== Librerías de JavaScript =====
+==== TinyMCE ====
+  * [[http://tinymce.moxiecode.com/|Sitio oficial]]
+  * {{fw:others:tinymce_3_2_7.zip|}}
+=== Agregarlo cuando se utiliza jQuery ===
+  * {{fw:others:jquerylibs:tinymce_3_2_7_jquery.zip|}}
+<code javascript>
+$(document).ready(function() {
+    $('textarea').tinymce({
+        script_url: './jscript/tiny_mce/tiny_mce.js',
+        theme: "advanced"
+    });
+});
 </code>

Programming

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página