Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 08.12.2011, 08:22   #1
ZvEr_HaCkEr
VisualC++/DirectX
Форумчанин
 
Аватар для ZvEr_HaCkEr
 
Регистрация: 16.07.2010
Сообщений: 831
Вопрос Стилизация radiobutton'ов. JQuery

Здравствуйте, есть код radiobutton'ов
Код:
<input type="radio" class="niceRadio" name="answer" id="myradio1"/>
<label for="myradio1">.....</label>
<input type="radio" class="niceRadio" name="answer" id="myradio2"/>
<label  for="myradio2">.....</label>
<input type="radio" class="niceRadio" name="answer" id="myradio3"/>
<label for="myradio3">.....</label>
<input type="radio" class="niceRadio" name="answer" id="myradio4"/>
<label for="myradio4">.....</label>
для которых написан следующий js код

Код:
jQuery(document).ready(function(){
jQuery(".niceRadio").each(
function() {
     changeRadioStart(jQuery(this));
});
});
function changeRadio(el)
{
	var el = el,
		input = el.find("input").eq(0);
	var nm=input.attr("name");
	jQuery(".niceRadio input").each(
	function() {    
		if(jQuery(this).attr("name")==nm)
		{
			jQuery(this).parent().removeClass("radioChecked");
		}	   	   
	});					  		
	if(el.attr("class").indexOf("niceRadioDisabled")==-1)
	{	
		el.addClass("radioChecked");
		input.attr("checked", true);
	}	
    return true;
}
function changeVisualRadio(input)
{
	var wrapInput = input.parent();
	var nm=input.attr("name");
	jQuery(".niceRadio input").each(	
	function() {     
		if(jQuery(this).attr("name")==nm)
		{
			jQuery(this).parent().removeClass("radioChecked");
		}	   	 
	});
	if(input.attr("checked")) 
	{
		wrapInput.addClass("radioChecked");
	}
}
function changeRadioStart(el)
{
try
{
var el = el,
	radioName = el.attr("name"),
	radioId = el.attr("id"),
	radioChecked = el.attr("checked"),
	radioDisabled = el.attr("disabled"),
	radioTab = el.attr("tabindex");
	radioValue = el.attr("value");
	if(radioChecked)
		el.after("<span class='niceRadio radioChecked'>"+
			"<input type='radio'"+
			"name='"+radioName+"'"+
			"id='"+radioId+"'"+
			"checked='"+radioChecked+"'"+
			"tabindex='"+radioTab+"'"+
            "value='"+radioValue+"' /></span>");
	else
		el.after("<span class='niceRadio'>"+
			"<input type='radio'"+
			"name='"+radioName+"'"+
			"id='"+radioId+"'"+
			"tabindex='"+radioTab+"'"+
	        "value='"+radioValue+"' /></span>");	
	if(radioDisabled)
	{
		el.next().addClass("niceRadioDisabled");
		el.next().find("input").eq(0).attr("disabled","disabled");
	}		
	el.next().bind("mousedown", function(e) { changeRadio(jQuery(this)) });
	el.next().find("input").eq(0).bind("change", function(e) { changeVisualRadio(jQuery(this)) });
	if(jQuery.browser.msie)
	{
		el.next().find("input").eq(0).bind("click", function(e) { changeVisualRadio(jQuery(this)) });	
	}
	el.remove();
}
catch(e)
{
}
    return true;
}
который стилизирует их следующим образом


помогите исправить js, чтобы код работал под такую разметку
Код:
<div class="answer"><input id="a9801" type="radio" name="answer" value="1" style="vertical-align:middle;" /> <label style="vertical-align:middle;display:inline;" for="a9801">.....</label></div>
<div class="answer"><input id="a9802" type="radio" name="answer" value="2" style="vertical-align:middle;" /> <label style="vertical-align:middle;display:inline;" for="a9802">.....</label></div>
<div class="answer"><input id="a9803" type="radio" name="answer" value="3" style="vertical-align:middle;" /> <label style="vertical-align:middle;display:inline;" for="a9803">.....</label></div>
<div class="answer"><input id="a9804" type="radio" name="answer" value="4" style="vertical-align:middle;" /> <label style="vertical-align:middle;display:inline;" for="a9804">......</label></div>
ЗЫ css выглядит так
Код:
.niceRadio {
width : 16px;
height : 16px;
display : inline-block;
cursor : pointer;
background : url('../img/style_radio.png');
overflow : hidden;
}
.radioChecked {
background-position : 0% -16px;
}
.niceRadio input {
margin-left : -17px;
}
Спасибо за внимание..
ZvEr_HaCkEr вне форума Ответить с цитированием
Старый 08.12.2011, 12:35   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

С костылем в начале рейди:
Код:
$('input[type="radio"]').addClass('niceRadio')
должно заработать.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 08.12.2011, 14:23   #3
ZvEr_HaCkEr
VisualC++/DirectX
Форумчанин
 
Аватар для ZvEr_HaCkEr
 
Регистрация: 16.07.2010
Сообщений: 831
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
С костылем в начале рейди:
Код:
$('input[type="radio"]').addClass('niceRadio')
должно заработать.
Чертовски большое спасибо!!Сам сразу не подумал.Еще раз спасибо!
ZvEr_HaCkEr вне форума Ответить с цитированием
Старый 08.12.2011, 16:31   #4
PAAG
Пользователь
 
Регистрация: 08.12.2011
Сообщений: 18
По умолчанию

А что мешает сразу в разметку добавить class="niceRadio" ? Чтобы не скриптом это делалось?
PAAG вне форума Ответить с цитированием
Старый 08.12.2011, 17:03   #5
ZvEr_HaCkEr
VisualC++/DirectX
Форумчанин
 
Аватар для ZvEr_HaCkEr
 
Регистрация: 16.07.2010
Сообщений: 831
По умолчанию

Цитата:
Сообщение от PAAG Посмотреть сообщение
А что мешает сразу в разметку добавить class="niceRadio" ? Чтобы не скриптом это делалось?
ucoz ..
ZvEr_HaCkEr вне форума Ответить с цитированием
Старый 08.12.2011, 17:05   #6
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

вероятно, лень=)
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 12.12.2011, 13:23   #7
dr.Chas
***
Участник клуба
 
Аватар для dr.Chas
 
Регистрация: 30.07.2007
Сообщений: 1,162
По умолчанию

Цитата:
Сообщение от ZvEr_HaCkEr Посмотреть сообщение
ucoz ..
По моему ucoz не запрещает править шаблоны и создавать свои.
dr.Chas вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JQuery и FF WennY JavaScript, Ajax 1 01.11.2011 22:26
Стилизация Select'а Radko HTML и CSS 0 20.01.2011 10:53
jQuery itself spein JavaScript, Ajax 4 25.12.2009 22:30
Стилизация компонентов Лубышев Общие вопросы Delphi 14 05.11.2007 21:48