Originariamente inviata da
KillerWorm
Sì, ora ho capito il problema e dopo diverse prove, con esito negativo, ho capito che quel tooltip non è troppo personalizzabile. Quantomeno nel caso di istanze multiple.
Quando crei istanze multiple della stessa toolbar è difficile manipolarle (perlomeno io non ho capito come poterlo fare in modo semplice, sempre che ne esista uno).
Ti spiego cosa ho cercato di fare e come invece ho risolto. Una volta assegnata la toolbar ai vari elementi con
$('.settings-button').toolbar(ecc...), vengono "clonate" (una per ogni elemento) delle istanze della toolbar di origine e appese infondo al body della pagina.
Chiaramente ogni istanza della toolbar ha, e deve avere, una qualche relazione coll'elemento a cui questa è associata, ma a livello HTML non è deducibile alcuna relazione con gli elementi a cui sono state associate queste istanze, se non per l'ordine in cui, elementi e istanze, si presentano sul codice HTML.
Ora, se fosse possibile rintracciare ogni singola toolbar, attraverso un'iterazione dei vari elementi, sarebbe possibile aggiungere in qualche modo un valore all'attributo href delle relative icone. Ovvio che questo valore deve essere relativo all'elemento a cui è associata la toolbar. Ad esempio, se stai usando HTML5, si può pensare di usare un attributo
data che potresti popolare da PHP, in cui metterai i valori "55", "56", "57" (come da tuo esempio).
Il problema è che non sono riuscito a capire come "rintracciare" l'istanza della toolbar attraverso l'elemento a cui questa è associata (se non facendo qualche acrobazia).
Sulla documentazione è descritto il metodo
getToolbarElement che teoricamente, mi è parso di capire, dovrebbe servire proprio a questo. Ho provato ad applicarlo, in svariati modi, agli elementi dopo l'applicazione della toolbar, ma (forse sono ottuso io) non sono riuscito a capire come funziona e non ho trovato nemmeno uno straccio di esempio online (forse ho cercato male)... o forse semplicemente non funziona.
Se poi qualcuno sa come utilizzare tale metodo, sarei curioso di capirlo anche io.
L'ultima spiaggia è l'iterazione secondo l'ordine degli elementi, cioè usando l'indice con cui i vari elementi sono disposti nel codice HTML e quindi selezionati da jQuery. Per cui, una volta applicata la toolbar, appesa infondo al body ci sarà una serie di div con classe tool-items, ognuno dei quali è relativo (nell'ordine in cui sono stati creati) ai singoli elementi.
Non dovrebbero nascere problemi a meno che, sulla stessa pagina, non siano assegnate diverse toolbar a diversi tipi/gruppi di elementi. In tal caso sarebbe difficile gestire la cosa secondo il loro indice di selezione.
Questo un esempio (chiaramente, da provare dentro la cartella scaricabile dal link in esame):
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<link href="tooltip/documentation.css" rel="stylesheet" />
<link href="tooltip/jquery.toolbars.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Lustria" rel="stylesheet" type="text/css">
<link href="tooltip/bootstrap.icons.css" rel="stylesheet">
<link href="tooltip/prettify.css" rel="stylesheet">
<link href="tooltip/sunburst.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="tooltip/prettify.js"></script>
<script src="tooltip/jquery.toolbar.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.settings-button')
.toolbar({content:'#user-options',position:'bottom'})
.each(function(id){ // iterazione di ogni elemento a cui è applicata la toolbar
var idUtente = $(this).data("id-utente"); // recupero il valore data-id-utente di questo elemento
$(".tool-items:eq("+id+")>a.tool-item").attr("href",function(i,val){return val+"?id="+idUtente}); // aggiungo il valore ad href sui link della toolbar relativa (secondo l'indice di selezione) a questo elemento
});
});
</script>
</head>
<body onload="prettyPrint()">
<div data-id-utente="55" class="settings-button"><img src="tooltip/icon-cog-small.png" /></div>
<br>
<div data-id-utente="56" class="settings-button"><img src="tooltip/icon-cog-small.png" /></div>
<br>
<div data-id-utente="57" class="settings-button"><img src="tooltip/icon-cog-small.png" /></div>
<div id="user-options" class="toolbar-icons" style="display: none;">
<a href="http://www.dominio.com/edit.php"><i class="icon-edit"></i></a>
<a href="http://www.dominio.com/delete.php"><i class="icon-trash"></i></a>
<a href="http://www.dominio.com/share.php"><i class="icon-star"></i></a>
</div>
</body>
</html>
Chiaramente potrebbero esserci altre diverse soluzioni... magari meno acrobatiche.
Rispondi quotando
