Newsgroup: it.comp.lang.javascript
Titolo: Consiglio su CheckButton

Ciao a tutti,
devo implementare un bottone "CheckButton" che trattenga lo stato e che a
differnza del "CheckBox" deve avere la forma di un bottone
Ho cambiato idea almeno 3 volte, e trovo sempre dei contro...
Ora mi sono rotto e chiedo consilgio a voi....
:(
Allora io avrei le seguenti 3 esigenze:
-	salvare l'ultimo stato in un qualche campo del form
-	renderlo riutilizzabile a meno solo di un ID (o poco altro)
-	cambiargli l'aspetto via CSS
Al momento la soluzione che sto adottando e' la seguente:
un imput text che cambia aspetto all'onmosedown con JS+CSS e salva lo stato
in se stesso
[code]
<span id="bold_style"><input type="text" name="bold_style" value="0"
class="check_button not_pressed" readonly="readonly"
onmousedown="change_checkbutton_status(this)" /><span>
[/code]
Pero' mi devo appoggiare ad un tag contenitore e a me piacerebbe riuscire a
fare tutto in uno solo, ad es.:
[code]
<input type="text" id="bold_style" name="bold_style" value="0"
class="check_button not_pressed" readonly="readonly"
onmousedown="change_checkbutton_status(this)" />
[/code]
Cosa dite? Mi date un consiglio?

 -	cambiargli l'aspetto via CSS
scusa la domanda stupida (mai provato), ma ... l'input text salva lo stato
in sè stesso, (la 2 non ho capito cosa vuol dire) e si può cambiare
l'aspetto via css ... qual è il problema quindi?
-- 
"E' l' ignoranza che crea l'intolleranza
 di gente cieca e senza coscienza"
									  S.S.S.

 e si può cambiare l'aspetto via css ... qual è il problema quindi?
Ecco e' questo il problema che ho, non riesco ad associare delle classi CSS
con lo stesso nome identificativo ad un solo tag, cioe':
io vorrei che le classi di questi bottoni abbiano il nome:
"check_button" che ne identifica lo stile base
"pressed"/"not_pressed" in base allo stato (in sostanza camia lo stile del
bordo)
mi manca qualcosa che identifichi lo stile specifico del bottone nei due
stati (ad es. l'immagine che si sposta di 1px...)
Temo che non mi saro' spiegato per niente bene...
Evventualemtne posto come sto facendo ora...

 con lo stesso nome identificativo ad un solo tag, cioe':
[CUT]
Ah ecco ... con IE non puoi, purtroppo. io cambierei semplicemente la
classe: ti crei 2 classi (una per pressed, una per unpressed), e
onmouseover/onmouseout cambi (className='pressed' //'unpressed')
-- 
"Ti sei salvato
 o sei entrato in banca pure tu?"
									    A.V.

 -	cambiargli l'aspetto via CSS
Al momento sono riuscito a concepire questo:
[code]
<!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
">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.check_button
{
  width:16px;
  height: 16px;
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
  text-align: center;
  vertical-align: text-bottom;
  color: #404040;
  cursor: default;
}
.not_pressed
{
  border: 1px solid;
  border-color: #E4E4E4  #AAAAAA #AAAAAA #E4E4E4;
  background: #FFFFFF no-repeat center center;
}
.pressed
{
  border: 1px solid;
  border-color: #AAAAAA #E4E4E4 #E4E4E4 #AAAAAA;
  background: #E5E5E5 no-repeat center center;
}
.bold_style_not_pressed
{
  background-image: url(images/buttons/b.gif);
  background-position: 4px 3px;
}
.bold_style_pressed
{
  background-image: url(images/buttons/b.gif);
  background-position: 5px 4px;
}
</style>
<script type="text/javascript">
function change_checkbutton_status( obj )
{
  obj.value = 1 - obj.value;
  if( obj.value == 1 )
    obj.className = obj.className.replace( /not_pressed/g, "pressed" );
  else
    obj.className = obj.className.replace( /pressed/g, "not_pressed" );
}
</script>
</head>
<body> 
<form> 
<input type="text" name="bold_style" value="0" class="check_button
not_pressed bold_style_not_pressed" readonly="readonly"
onmousedown="change_checkbutton_status(this)" />
</form> 
</body>
</html>
[/code]
Pero' non mi fa ancora impazzire, altre idee?