Collapse delle righe di una tabella
Inviato: 28/10/2012, 19:50
Ho un piccolo problema nell'adoperare jQuery e un suo plugin Questo:
allora questo è il mio esperimento:
funziona bene se non per il fatto che a causa di questo
il tag
non funziona e quindi invece di effettuare il collegamento chiudere la tabella
e quindi se io volessi ad esempio creare un collegamento se si clicca sul titolo e invece chiudere la tabella se si clicca sul resto non è possibile D: come posso modificare il plugin per fare ciò?
Codice: Seleziona tutto
/**
* Collapsible plugin
*
* Copyright (c) 2010 Ramin Hossaini (www.ramin-hossaini.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
jQuery.collapsible = function(selector, identifier) {
//toggle the div after the header and set a unique-cookie
$(selector).click(function() {
$(this).next().slideToggle('fast', function() {
if ( $(this).is(":hidden") ) {
$.cookie($(this).prev().attr("id"), 'hide');
$(this).prev().children(".placeholder").removeClass("collapse").addClass("expand");
}
else {
$.cookie($(this).prev().attr("id"), 'show');
$(this).prev().children(".placeholder").removeClass("expand").addClass("collapse");
}
});
return false;
}).next();
//show that the header is clickable
$(selector).hover(function() {
$(this).css("cursor", "pointer");
});
/*
* On document.ready: should the module be shown or hidden?
*/
var idval = 0; //increment used for generating unique ID's
$.each( $(selector) , function() {
$($(this)).attr("id", "module_" + identifier + idval); //give each a unique ID
if ( !$($(this)).hasClass("collapsed") ) {
$("#" + $(this).attr("id") ).append("<span class='placeholder collapse'></span>");
}
else if ( $($(this)).hasClass("collapsed") ) {
//by default, this one should be collapsed
$("#" + $(this).attr("id") ).append("<span class='placeholder expand'></span>");
}
//what has the developer specified? collapsed or expanded?
if ( $($(this)).hasClass("collapsed") ) {
$("#" + $(this).attr("id") ).next().hide();
$("#" + $(this).attr("id") ).children("span").removeClass("collapse").addClass("expand");
}
else {
$("#" + $(this).attr("id") ).children("span").removeClass("expand").addClass("collapse");
}
if ( $.cookie($(this).attr("id")) == 'hide' ) {
$("#" + $(this).attr("id") ).next().hide();
$("#" + $(this).attr("id") ).children("span").removeClass("collapse").addClass("expand");
}
else if ( $.cookie($(this).attr("id")) == 'show' ) {
$("#" + $(this).attr("id") ).next().show();
$("#" + $(this).attr("id") ).children(".placeholder").removeClass("expand").addClass("collapse");
}
idval++;
});
};
Codice: Seleziona tutto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src="./js/jquery-1.4.2.min.js"></script>
<script type='text/javascript' src="./js/jquery.cookie.js"></script>
<script type='text/javascript' src="./js/jquery.collapsible.js"></script>
</head>
<body>
<table class="module ">
<thead class="header">
<tr>
<th>Titolo</th>
<th><a href="#">collegamento</a></th>
</tr>
</thead>
<tbody class="content">
<td>contenuto da chiudere</td>
</tbody>
</table>
<script type='text/javascript'>
$(document).ready(function() {
$.collapsible(".header");
});
</script>
</body>
</html>
Codice: Seleziona tutto
$(selector).click(function() {
$(this).next().slideToggle('fast', function() {
if ( $(this).is(":hidden") ) {
$.cookie($(this).prev().attr("id"), 'hide');
$(this).prev().children(".placeholder").removeClass("collapse").addClass("expand");
}
else {
$.cookie($(this).prev().attr("id"), 'show');
$(this).prev().children(".placeholder").removeClass("expand").addClass("collapse");
}
});
return false;
}).next();Codice: Seleziona tutto
<a href="#">collegamento</a>e quindi se io volessi ad esempio creare un collegamento se si clicca sul titolo e invece chiudere la tabella se si clicca sul resto non è possibile D: come posso modificare il plugin per fare ciò?