Αλλαγή Button σε ui radio buttons

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Αλλαγή Button σε ui radio buttons

Δημοσίευση από dpa » 16 Σεπ 2011 21:24

Για τα label πιο css είναι ??? πχ .ui-state-default

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Αλλαγή Button σε ui radio buttons

Δημοσίευση από dpa » 16 Σεπ 2011 21:39

Φίλε το βρήκα στο ίδιο έβαλα padding

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Αλλαγή Button σε ui radio buttons

Δημοσίευση από dpa » 17 Σεπ 2011 11:54

Φίλε βάζω αυτό για τα label

Κώδικας: Επιλογή όλων

.radio22 .ui-button label { padding-left: 30px; }
Τι να βάλω ???

Κώδικας: Επιλογή όλων

.radio22 .ui-button {
	height:16px;
	width: 16px;
	padding:0px;
	margin: 0px;	
	text-align: left;	 
	font-weight: normal;
	color: #333;

	diplay:block;
	
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background-image: url(../js/jquery-ui-1.8/css/ui-lightness/images/ui-icons_ef8c08_256x240.png);
	background-position: -80px -144px; 
	background-color: #fff;

}

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Αλλαγή Button σε ui radio buttons

Δημοσίευση από fafos » 17 Σεπ 2011 12:51

den katalava...
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Αλλαγή Button σε ui radio buttons

Δημοσίευση από dpa » 17 Σεπ 2011 13:14

Κοίτα ολόκληρο τον κώδικα:

Κώδικας: Επιλογή όλων

.radio22 .ui-button {
	height:16px;
	width: 16px;
	padding-left:0px;
	margin: 0px;	
	text-align: left;	 
	/*background: #fff url("../images/UnCheck.png") no-repeat left center; */
	font-weight: normal;
	color: #333;

	float: left;
	
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background-image: url(../js/jquery-ui-1.8/css/ui-lightness/images/ui-icons_ef8c08_256x240.png);
	background-position: -80px -144px; 
	background-color: #fff;

}
.radio22 .ui-button label { padding-left: 30px; }
/*
.radio22 .ui-button:hover {
background-image: url(radio-off-hover.png);
background-position: 50% 50%;
} */

.radio22 .ui-state-active {
	height:16px;
	width:16px;
	padding-left:0px;
	margin: 0px;
	text-align: left;	 
	/* background: #fff url("../images/Check.png") no-repeat left center; */
	font-weight: normal;
	color: #F93;
	float: left;
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
	border-radius: 10px;
	
	background-image: url(../js/jquery-ui-1.8/css/ui-lightness/images/ui-icons_ef8c08_256x240.png);
	background-position: -208px -192px; 
}

Κώδικας: Επιλογή όλων

	<div id="radio" class="radio22" >
		<input type="radio" id="radio1" name="radio" /><label for="radio1">3 Ρυθμίσεων</label>
		<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Μονό</label>
		<input type="radio" id="radio3" name="radio" /><label for="radio3">10 Ρυθμίσεων</label>
	</div>

Αν το αφήσω έτσι τα label εμφανίζονται χάλια.

Αν αλλάξω το πλάτος του ui-button και το βάλω 150px εμφανίζονται κανονικά αλλά έχει 150px και για τα 3 label και έτσι δημιουργούνται μεγάλα κενά γιατί η μια λέξη είναι 30 χαρακτήρες και η άλλη 10


Κατάλαβες ???

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Αλλαγή Button σε ui radio buttons

Δημοσίευση από fafos » 17 Σεπ 2011 14:14

Ta levels tha ta xrhsimopoihseis mono gia ta eikonidia... an thes keimeno dipla "rixneis" ena div se kathe pedio me float:left kai oti allo style thes ekei mesa:

Κώδικας: Επιλογή όλων

//to style tou div

.radioTitle &#123;
position&#58;relative;
float&#58;left;
margin-left&#58;3px;
margin-right&#58;10px;
font-family&#58;Verdana;
font-size&#58;16px;
color&#58;#366ba6;
&#125;




//h forma

   <div id="radio" class="radio22" >
      <input type="radio" id="radio1" name="radio" /><label for="radio1"></label><div class="radioTitle">3 Ρυθμίσεων</div>
      <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2"></label><div class="radioTitle">Μονό</div>
      <input type="radio" id="radio3" name="radio" /><label for="radio3"></label><div class="radioTitle">10 Ρυθμίσεων</div>
   </div> 

<div style="clear&#58;both"><!-- clear floats --></div>
mhn ksexaseis na "kathariseis ta" floats
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Αλλαγή Button σε ui radio buttons

Δημοσίευση από dpa » 17 Σεπ 2011 14:17

χμμ...

Ευχαριστώ πολύ

Μια χαρά κάνω την δουλειά μου και με τον τρόπο με τα div απλά είπα μήπως υπάρχει άλλος τρόπος να χρησιμοποιούσα τα ήδη υπάρχων label.

Ευχαριστώ

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Αλλαγή Button σε ui radio buttons

Δημοσίευση από fafos » 17 Σεπ 2011 14:21

mporeis me to proto paradeigma pou sou edosa ( http://istopoli.com/tuts/uiradios.html ) alla tha se faei to "zygisma" sta backgrounds
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες