icone css in selectmenu

ans66

Utente Attivo
27 Ago 2011
158
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
158
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

tabella.png

9sVKBgF


Ho provato in diversi modi ma Slected Option Text e Textbox Text non coincidono in due Select
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
P inserimento icone social tramite html HTML e CSS 1
atipika INSERIRE ICONE DOWNLOAD E STAMPA WORDPRESS WordPress 10
L Mancata visualizzazione di icone su button PHP 0
D [WordPress] [PHP] icone distanziate su Iphone x WordPress 2
G [Guida 1.8] Inserire icone accanto alle sezioni MyBB 0
N [php]icone funzioni tabelle PHP 12
felino [Windows Vista] Icone sul desktop sparite... Windows e Software 2
Fuego2806 [PHP] Icone template - index.php PHP 2
felino [Windows XP] Errore Icone Programmi e Lancio Applicazione Windows e Software 5
A Windows 7 personalizzare vista elenco con icone più grandi Windows e Software 0
J Icone non allineate correttamente nella barra di navigazione HTML e CSS 2
F Google maps: Assegnare icone personalizzate a markers estratti da mysql. Javascript 3
M Icone copiate cambiano grafica Windows e Software 3
N Icone del Treeview - Menù ad Albero Javascript 2
S Icone gif trasparenti per web Webdesign e Grafica 3
Web Designer Aggiungere icone nelle sezioni MyBB MyBB 0
Web Designer Editor free per icone .ico: IcoFX Webdesign e Grafica 0
L icone degli strumenti di disegno Webdesign e Grafica 1
F icone Presenta il tuo Sito 2
G Caricamento icone su condizioni Flash 0
catellostefano Joomla: problema visualizzazione icone Joomla 7
A compaiono e scompaiono icone barra degli strumenti Sicurezza e Virus 2
G Si può salvare posizionamento icone windows? Windows e Software 5
V Icone Flash 1
F icone Webdesign e Grafica 0
grottafelix Set Icone style Light Webdesign e Grafica 7
grottafelix Set icone Presenta il tuo Sito 4
G Icone Webdesign e Grafica 5
M icone casinò e bingo comparse sul dsktp Windows e Software 10
L perché cambiano le icone????? Discussioni Varie 8
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
StephenSoftware Flexbox: definizione nel CSS HTML e CSS 4
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
R javascript lettura css cross-browser Javascript 1
U [WordPress] [CSS] Come faccio a spostare più in basso lo slider WordPress 0
L [Javascript]Alternativa al position:sticky nel CSS Javascript 0
A Strumenti per filtrare il css HTML e CSS 1

Discussioni simili