Herramientas de usuario

Herramientas del sitio


fw:others:jquerylibs

¡Esta es una revisión vieja del documento!


Librerías de jQuery y JavaScript

Librerías de jQuery

Table Sorter

Es necesario que la tabla tenga las tags THEAD y TBODY.
Para agregar la ordenación a la tabla:

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 

quickSearch

Para agregar a la tabla:

$(document).ready(function() 
    $("#<%= GridView1.ClientID %> tbody tr").quicksearch({
        position: 'before',
        attached: '#<%= GridView1.ClientID %>',
        stripeRowClass: ['oddCell', 'evenCell'],
        labelText: 'Cercar a la llista:',
        isFieldset: true
    });
); 

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:

this.GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

Timer

Por ejemplo, tras agregarlo, para que cada 30 segundos se llame a una función:

$.timer(30000, function (timer) {
  getData();
});

Query

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

Splitter

#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 -->

Librerías de JavaScript

TinyMCE

Agregarlo cuando se utiliza jQuery

$(document).ready(function() {
    $('textarea').tinymce({
        script_url: './jscript/tiny_mce/tiny_mce.js',
        theme: "advanced"
    });
});
fw/others/jquerylibs.1266700797.txt.gz · Última modificación: 2020/05/09 09:24 (editor externo)