Buon giorno a tutti!
Non riesco ad integrare questo Selectmenu con icone css che è perfettamente funzionante:
questo è lo script:
con la mia tabella PHP:
perché non capisco come modificare il suddetto script js per le mie select#soggetti, select#categorie, select#doveacq.
Ho bisogno di non modificare i riferimenti ID nella tabella perché ci sono già dei miei script che agiscono sulla stessa.
Grazie tante per l'aiuto.
Non riesco ad integrare questo Selectmenu con icone css che è perfettamente funzionante:
HTML:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Custom Rendering</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/icone.js"></script>
<style>
h2 {
margin: 30px 0 0 0;
}
fieldset {
border: 0;
}
label {
display: block;
}
/* select with custom icons */
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
padding: 0.5em 0 0.5em 3em;
}
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
height: 24px;
width: 24px;
top: 0.1em;
}
.ui-icon.video {
background: url("images/balance.png") 0 0 no-repeat;
}
.ui-icon.podcast {
background: url("images/category.png") 0 0 no-repeat;
}
.ui-icon.rss {
background: url("images/cart.png") 0 0 no-repeat;
}
</style>
</head>
<body>
<div class="demo">
<form action="#">
<h2>Selectmenu with custom icon images</h2>
<fieldset>
<label for="filesB">Select a podcast:</label>
<select name="filesB" id="filesB">
<option value="mypodcast" data-class="podcast">John Resig Podcast</option>
<option value="myvideo" data-class="video">Scott González Video</option>
<option value="myrss" data-class="rss">jQuery RSS XML</option>
</select>
</fieldset>
</form>
</div>
</body>
</html>questo è lo script:
Codice:
// JavaScript Document
$( function() {
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function( ul, item ) {
var li = $( "<li>" ),
wrapper = $( "<div>", { text: item.label } );
if ( item.disabled ) {
li.addClass( "ui-state-disabled" );
}
$( "<span>", {
style: item.element.attr( "data-style" ),
"class": "ui-icon " + item.element.attr( "data-class" )
})
.appendTo( wrapper );
return li.append( wrapper ).appendTo( ul );
}
});
$( "#filesB" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
.addClass( "ui-menu-icons customicons" );
} );con la mia tabella PHP:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<meta charset="utf-8">
<title>Tabella Entrate Uscite</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/tabGEU_style.css">
<link rel="stylesheet" href="css/styleicon.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/tabentusc.js"></script>
<script src="js/menu.js"></script>
<script src="js/icon.js"></script>
<div class="tabelle" align="center" >
<table id="tab" width="55%" height="8%" border="1" >
<tr >
<td align="left" width="100%" >
<font class="icon-balance-scale"><strong>Tabella Entrate Uscite </strong></font>
</td>
</tr>
</table>
<table id="tab" width="55%" height="40%" border="1" >
<tr >
<td align="left" >
<p><strong>Date: </strong><input type="text" id="datepicker" value="<?php if(!empty($array)){ $res=explode('-',$array[$nrRec][0]) ; echo $res[2]."/".$res[1]."/".$res[0]; } ?>" />
<input id="mese" type="text" name="mese" size="6" value="<?php if(!empty($array)) echo MonthName($res[1]); ?>">
<input id="anno" type="text" name="anno" size="2" value="<?php if(!empty($array)) echo $res[0]; ?> "></p>
</td>
</tr>
<tr >
<td align="left" >
<font><strong>Soggetti: </strong></font><input type="text" id="soggetto" name="soggetto" value="<?php if(!empty($array)) echo $array[$nrRec][1]; ?>">
<select id="soggetti" name="soggetti">
<option value="inserisci">inserisci</option>
<?php
if(!empty($resultSog)) {
$options="";
$max = sizeof($resultSog);
for($i = 0; $i < $max;$i++)
{
if ($resultSog[$i][1]!=trim($array[$nrRec][1])) {
$options.= '<option value="' . $resultSog[$i][0] . '">' . $resultSog[$i][1] . '</option> ';
} else {
$options.= '<option value="' . $resultSog[$i][0] . '" selected>' . $resultSog[$i][1] . '</option> ';
}
}
$options.='<option value="'.strtoupper("nuovo soggetto").'">'.strtoupper("nuovo soggetto").'</option>';
echo $options;
}
?>
</select>
</td>
</tr>
<tr >
<td align="left" >
<font><strong>Valore: </strong></font><input type="text" id="valore" name="valore" value="<?php if(!empty($array)){ setlocale(LC_MONETARY, 'it_IT'); $val=$array[$nrRec][2]; echo "€ ".sprintf("%01.2f", $val); } ?>">
</td>
</tr>
<tr >
<td align="left" >
<font><strong>Categoria: </strong></font><input type="text" id="categoria" name="categoria" value="<?php if(!empty($array)) echo $array[$nrRec][3]; ?>">
<select id="categorie" name="categorie">
<option value="categorie">inserisci</option>
<?php
if(!empty($resultCat)) {
$max = sizeof($resultCat);
for($i = 0; $i < $max;$i++)
{
if ($resultCat[$i][1]!=trim($array[$nrRec][3])) {
$options.= '<option value="' . $resultCat[$i][0] . '">' . $resultCat[$i][1] . '</option> ';
} else {
$options.= '<option value="' . $resultCat[$i][0] . '" selected>' . $resultCat[$i][1] . '</option> ';
}
}
$options.='<option value="'.strtoupper("nuova categoria").'">'.strtoupper("nuova categoria").'</option>';
echo $options;
}
?>
</select>
</td>
</tr>
<tr >
<td align="left" >
<font><strong>Dove Acquistato: </strong></font><input type="text" id="doveacquis" name="doveacquis" value="<?php if(!empty($array)) echo $array[$nrRec][4]; ?>">
<select id="doveacq" name="doveacq">
<option value="doveacquistato">inserisci</option>
<?php
if(!empty($resultDove)) {
$max = sizeof($resultDove);
for($i = 0; $i < $max;$i++)
{
if ($resultDove[$i][1]!=trim($array[$nrRec][4])) {
$options.= '<option value="' . $resultDove[$i][0] . '">' . $resultDove[$i][1] . '</option> ';
} else {
$options.= '<option value="' . $resultDove[$i][0] . '" selected>' . $resultDove[$i][1] . '</option> ';
}
}
$options.='<option value="'.strtoupper("nuovo doveacquistato").'">'.strtoupper("nuovo doveacquistato").'</option>';
echo $options;
}
?>
</select>
</td>
</tr>
</table>
<table id="tab" width="55%" height="8%" border="1" >
<tr >
<td id="one" align="center" width="3%" >
<div class="uno" title="Primo" >
</div>
</td>
<td id="two" align="center" width="3%" >
<div class="due" title="Indietro" >
</div>
</td>
<td id="three" align="center" width="3%" >
<div class="tre" >
<input id="nrrec" name="nrrec" type="text" size="3" value="<?php if(!empty($array)) echo $nrRec+1; else echo "0"; ?>">
</div>
</td>
<td id="four" align="center" width="6%" >
<div class="quattro" >
<font id="totrec">di [<?php echo $num_rows; ?> ] </font >
<input type="hidden" id="totR" name="totR" value="<?php echo $num_rows; ?>" />
</div>
</td>
<td id="five" width="3%" >
<div class="cinque" title="Avanti" >
</div>
</td>
<td id="six" width="3%" >
<div class="sei" title="Ultimo" >
</div>
</td>
<td id="seven" width="3%" >
<div class="sette" title="Inserisci" >
</div>
</td>
<td id="eight" width="3%" >
<div class="otto" title="Conferma" >
</div>
</td>
<td id="nine" width="3%" >
<div class="nove" title="Cancella" >
</div>
</td>
<td id="ten" width="3%" >
<div class="dieci" title="Aggiorna" >
</div>
</td>
<td id="eleven" width="3%" >
<div class="undici" title="Modifica">
</div>
</td>
<td id="twelve" width="3%" >
<div class="dodici" title="Cerca" >
</div>
</td>
<td id="thirteen" width="3%" >
<div class="tredici" title="Vai al Record" >
</div>
</td>
<td id="fourteen" width="3%" >
<div class="quattordici" title="Delete" >
</div>
</td>
<td id="fifteen" width="3%" >
<div class="quindici" title="Chiudi" >
<?php
if(!empty($array))$id=$array[$nrRec][5]; else $id=0;
echo ' <input type="hidden" id="IdGEU" name="IdGEU" value="'.$id.'" />
<input type="hidden" id="server" name="server" value="'.$server.'" />
<input type="hidden" id="user" name="user" value="'.$user.'" />
<input type="hidden" id="passw" name="passw" value="'.$passw.'" />
<input type="hidden" id="nrRsalvato" name="nrRsalvato" value="" />';
?>
</div>
</td>
</tr>
</table>
</div>
</head>
<body>perché non capisco come modificare il suddetto script js per le mie select#soggetti, select#categorie, select#doveacq.
Ho bisogno di non modificare i riferimenti ID nella tabella perché ci sono già dei miei script che agiscono sulla stessa.
Grazie tante per l'aiuto.
