icone css in selectmenu

ans66

Utente Attivo
27 Ago 2011
155
0
16
Buon giorno a tutti!

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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></font>
  

</td>
</tr>
</table>
<table id="tab" width="55%" height="40%"  border="1" >
<tr >
<td align="left" >
<p><strong>Date:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></font><input type="text" id="valore" name="valore" value="<?php if(!empty($array)){ setlocale(LC_MONETARY, 'it_IT'); $val=$array[$nrRec][2]; echo "&euro; ".sprintf("%01.2f", $val); } ?>">
</td>
</tr>
<tr >
<td align="left" >
<font><strong>Categoria: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, hai provato ad aggiungere l'attributo "data-class=" alle tue option e associarlo al css ? è un po complesso come codice dovrei farci qualche prova
 

ans66

Utente Attivo
27 Ago 2011
155
0
16
sono riuscito a risolvere, almeno per la prima Select come segue:

Codice:
/* 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.people {
      background: url("images/people.png") 0 0 no-repeat;
    }
Codice:
<select id="soggetti" name="soggetti" class="filesB">
<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 data-class="people" value="' . $resultSog[$i][0] . '">' . $resultSog[$i][1] . '</option> ';
                                                     } else {
     $options.= '<option data-class="people" value="' . $resultSog[$i][0] . '" selected>' . $resultSog[$i][1] . '</option> ';
                                                            }
  }
 
  $options.='<option value="'.strtoupper("nuovo soggetto").'">'.strtoupper("nuovo soggetto").'</option>';
  echo $options;

 
  }
  ?>
</select>
Codice:
$( 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" );
 
 
 
  } );
Sono riuscito a trovare la soluzione per l'inserimento di più Dropdown con Icone come segue:

Codice:
//SelectItem con icone
function SelectItemWithIcons(selector) {
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
      _renderItem: function( ul, item ) {
        var li = $( "<li>" ),
          wrapper = $( "<div>", { text: item.label } );
           
 
        $( "<span>", {
     
          style: item.element.attr( "data-style" ),
          "class": "ui-icon " + item.element.attr( "data-class" )
        })
          .appendTo( wrapper );
 
        return li.append( wrapper ).appendTo( ul );
      }
    });

SelectItemWithIcons($("select#soggetti"));
SelectItemWithIcons($("select#categorie"));
SelectItemWithIcons($("select#doveacq"));
Sulla tabella PHP ho inserito il seguente codice CSS:

Codice:
/* 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: 20px;
      width: 20px;
      top: 0.1em;
    }
    ul.ui-menu { max-height: 250px !important; }
    .ui-icon.rss {
      background: url("images/people.png") 0 0 no-repeat;
    }
    .ui-icon.podcast {
      background: url("images/tabella.jpg") 0 0 no-repeat;
    }
  .ui-icon.video {
      background: url("images/cart.gif") 0 0 no-repeat;
    }
e ho inserito i dataset:

Codice:
<option data-class="rss".....</option>
<option data-class="podcast".....</option>
<option data-class="video".....</option>
Purtroppo però il codice per l'inserimento delle icone nei Dropdown interferisce con i dati asincroni per il caricamento delle SelectItem:

Codice:
setTimeout( function () { loadXMLDoc('soggetti', 'soggetti', server, user, passw); }, 200);
    setTimeout( function () { loadXMLDoc('categorie', 'categorie', server, user, passw); }, 200);
    setTimeout( function () { loadXMLDoc('doveacq', 'DoveAcquistato', server, user, passw); }, 200);

function loadXMLDoc(form_tag, funzione, server, user, passw)
    {
        var xURL = "characteristics.php?funzione="+funzione+"&server="+server+"&user="+user+"&passw="+passw;
 

        var attendere    = '<option value="-1">Attendere...</option>';

        $("select#"+form_tag).html(attendere);
        $("select#"+form_tag).attr("disabled", "disabled");

        GetData("select#"+form_tag, xURL);
        return
    }

function GetData(form_tag, xURL, mes)
    {
  
      mes = mes || "";
  
            var xmlhttp=false;
  
  
            if (!xmlhttp && typeof XMLHttpRequest!='undefined')
            {
                try { xmlhttp = new XMLHttpRequest(); }
                catch (e) { xmlhttp = false; }
            }
            if (!xmlhttp && window.createRequest)
            {
                try { xmlhttp = window.createRequest(); }
                catch (e) { xmlhttp = false; }
            }

            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState===4 && xmlhttp.status===200)
                {
          data = xmlhttp.responseText;
      
                                                        
          // per popup Soggetti
          if (form_tag=="sog") return data;
          SetValues(form_tag, data, mes);
                }
            }
            xmlhttp.open("GET", xURL, true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send(null);
    
        return xmlhttp
    }
e non avviene il cambiamento delle Selected Option Text come dovrebbe:

Codice:
$("#soggetti option:selected").text($("#soggetto").val());
    $("#categorie option:selected").text($("#categoria").val());
    $("#doveacq option:selected").text($("#doveacquis").val());
se non unicamente nella Select Categoria come si può vedere dall'immagine che allego




Ho provato in diversi modi ma Slected Option Text e Textbox Text non coincidono in due Select
 
Ultima modifica: