Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.06.2012, 21:51
Интересующийся
Отправить личное сообщение для leonid12345 Посмотреть профиль Найти все сообщения от leonid12345
 
Регистрация: 10.05.2012
Сообщений: 15

Работа с невидимыми радиобатонами
Подскажите, пожалуйста, есть вот такой незамысловатый код
Код:
<style type="text/css">
ul{
	list-style:none;
	margin:0;
	padding:0
}
li{
	display:block;
	float:left;
	width:150px;
	height:30px;
	margin:0;
	padding:0;
		margin-right:10px;
}
.radio{
	display:none;
}
label{
	display:block;
	height:30px;
	width:150px;
	text-align:center;
	background-color:#00F;
}

</style>
<script type="text/javascript">
function testRadio(){
	var input = document.getElementsByTagName("INPUT");
	for(i=0; i<input.length;i++){
		input.item(i).parentNode.style.backgroundColor = "#00F";
	}
	this.parentNode.style.backgroundColor = "#F00";
	alert(this.value);
}
window.onload = function(){
	var input = document.getElementsByTagName("input");
	for(i=0; i<input.length;i++){
		input.item(i).onclick = testRadio;
	}
}
</script>
...
<ul>
    	<li>
             <label for="RadioGroup1_0">
                   <input type="radio" class="radio" name="RadioGroup1" value="Радио1"
 id="RadioGroup1_0"/>Переключатель1
            </label>
        </li>
        <li>
             <label for="RadioGroup1_1">
                   <input type="radio" class="radio" name="RadioGroup1" value="Радио2"
 id="RadioGroup1_1"/>Переключатель2
            </label>
        </li>
</ul>
Хотелось бы организовать некое меню с помощью невидимых радиобатонов, так как особенности их работы очень удобны. Однако в ie 7, ie 8 данная штука не работает, можно ли это обойти? желательно без jquery

Последний раз редактировалось leonid12345, 02.06.2012 в 21:55.
Ответить с цитированием
  #2 (permalink)  
Старый 02.06.2012, 22:09
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от leonid12345
Хотелось бы организовать некое меню с помощью невидимых радиобатонов, так как особенности их работы очень удобны. Однако в ie 7, ie 8 данная штука не работает, можно ли это обойти? желательно без jquery
Попробуйте невидимость делать не display:none а
position:absolute; z-index:-2000;
Ответить с цитированием
  #3 (permalink)  
Старый 02.06.2012, 22:17
Интересующийся
Отправить личное сообщение для leonid12345 Посмотреть профиль Найти все сообщения от leonid12345
 
Регистрация: 10.05.2012
Сообщений: 15

Сообщение от Deff Посмотреть сообщение
Попробуйте невидимость делать не display:none а
position:absolute; z-index:-2000;
Так работает! Спасибо вам ОГРОМНОЕ!
Ответить с цитированием
  #4 (permalink)  
Старый 25.06.2012, 20:00
Интересующийся
Отправить личное сообщение для leonid12345 Посмотреть профиль Найти все сообщения от leonid12345
 
Регистрация: 10.05.2012
Сообщений: 15

Возникла еще небольшая проблема с данным кодом...
если вместо текста внутри label картинка вместо текста, аля
<li>
             <label for="RadioGroup1_1">
                   <input type="radio" class="radio" name="RadioGroup1" value="Радио2"
 id="RadioGroup1_1"/><img src="test.png">
            </label>
        </li>


то при нажатии в область картинки в ie7, ie8 событие у радиобаттона онклик не срабатывает(
подскажите, как это можно обойти без сильной модификации кода
Ответить с цитированием
  #5 (permalink)  
Старый 25.06.2012, 20:09
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

leonid12345,
Полный css нарисуйте для этого кода
Ответить с цитированием
  #6 (permalink)  
Старый 25.06.2012, 20:20
Интересующийся
Отправить личное сообщение для leonid12345 Посмотреть профиль Найти все сообщения от leonid12345
 
Регистрация: 10.05.2012
Сообщений: 15

вот что-то такое
Код:
<style type="text/css">
ul{
	list-style:none;
	margin:0;
	padding:0;
}
li{
	display:block;
	float:left;
	width:150px;
	height:30px;
        padding-right:10px;
	padding-bottom:10px;
	padding-top:10px;
        text-align:center;
}
li label{
	display:block;
	width:150px;
	height:30px;
	background-image:url(/images/butt3.png);
	background-repeat:no-repeat;
	background-position:center;
}
.radio{
	position:absolute;
	z-index:-2000;
}
</style>
Ответить с цитированием
  #7 (permalink)  
Старый 25.06.2012, 20:24
Интересующийся
Отправить личное сообщение для leonid12345 Посмотреть профиль Найти все сообщения от leonid12345
 
Регистрация: 10.05.2012
Сообщений: 15

ну то есть можно было бы второй фон добавить к li, к примеру, но это не очень удобно, мне кажется, так как кнопки создаются php-скриптом по количеству записей в таблице бд и в img втыкается картинка из соответствующей записи...

Хотя можно и 2 фоном вместо Img, но хотелось бы узнать, может быть можно как-то по-другому

Последний раз редактировалось leonid12345, 25.06.2012 в 20:31.
Ответить с цитированием
  #8 (permalink)  
Старый 25.06.2012, 20:32
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

leonid12345, Пробуйте добавить Id к батону и переддать ему клик сквозь картинку

<img src="test.png" onclick="document.getElementById('id').click()">
Ответить с цитированием
  #9 (permalink)  
Старый 25.06.2012, 20:37
Интересующийся
Отправить личное сообщение для leonid12345 Посмотреть профиль Найти все сообщения от leonid12345
 
Регистрация: 10.05.2012
Сообщений: 15

Спасибо! Даже не подозревал, что так можно!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Разоваяя работа - сверстать не сложную страницу. divine108 Работа 1 06.03.2012 00:51
Удаленная работа LexLunnyi Работа 3 14.02.2012 12:20
Программист JavaScript постоянная удалённая работа. moisha Работа 4 26.10.2011 19:52
Постоянная работа / Front-end / Москва kooper Работа 4 29.09.2011 22:06
небольшая работа - интерфейс в ява скрипте :) int9 Работа 0 08.12.2008 22:51