Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.01.2014, 09:57
Интересующийся
Отправить личное сообщение для copenhagen Посмотреть профиль Найти все сообщения от copenhagen
 
Регистрация: 01.07.2010
Сообщений: 18

Всплывающая кнопка рядом с чекбоксом
Нужна кнопка, которая бы появлялась слева от чекбокса при его выборе. В точности как на яндекс.маркете.
Смотрел код на нем и нескольких других сайтах, но в силу малых знаний js не понял суть. Как сделать такую кнопку? Можно jquery.
Изображения:
Тип файла: jpg screenshot.jpg (17.4 Кб, 9 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2014, 10:12
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от copenhagen
Нужна кнопка, которая бы появлялась слева от чекбокса при его выборе.
Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
button {
	visibility: hidden;
}
</style>
<script type="text/javascript">
$(function (){
	$('input:checkbox').click(function (){
		var val=(this.checked)? 'visible': 'hidden';
		$(this).prev().css('visibility',val);
	});
});
</script>
</head>
<body>
<div>
	<button>Info</button>
	<input type='checkbox' />
</div>
<div>
	<button>Info</button>
	<input type='checkbox' />
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 23.01.2014, 10:52
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

На маркете появляется не подсказка, а результат запроса

GET /gate/filter-modelmeter.xml?CMD=-RR=0,0,0,0-VIS=70-CAT_ID=108206-EXC=1-PG=10&hid=90639&CAT_ID=108206&1801946=1870007&1801 946=1871499&1801946=1871023&2142557774=-4959349&2141345289=select&2142557703=select&214255 7695=select&2142557773=40&2142557773cmp=gt&2142557 773=70&2142557773cmp=lt&currency=RUR&r=13904644193 69&sk=ua78bcc052145d3a2192d09074873eb51&_=13904644 19376 HTTP/1.1

вот такого. То есть ajax возвращает результ, js рисует панельку. Выбор чек-бокса задействован до запроса.
Ответить с цитированием
  #4 (permalink)  
Старый 23.01.2014, 11:56
Интересующийся
Отправить личное сообщение для copenhagen Посмотреть профиль Найти все сообщения от copenhagen
 
Регистрация: 01.07.2010
Сообщений: 18

kostyanet,
Мне нужно именно отображение кнопки
ksa,
Вы правильно поняли, но ваш вариант не такой. На я.маркете кнопка появляется слоем поверх, а у вас для нее сразу место оставлено просто она скрыта сначала. И кнопка должна появляться всего одна.
Ответить с цитированием
  #5 (permalink)  
Старый 23.01.2014, 12:38
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от copenhagen
Мне нужно именно отображение кнопки
И кто ее будет выковыривать у яндекса?

В чем проблема не пойму. Щелкнули чек-бокс, открыли панельку, поставили таймер. У меня подсказки по ошибчному вводу так работают, но без таймера. Юзер должен щелкнуть по ней чтобы скрылась с глаз долой.

На blur'е

e = e || window.event;
		var elem = e.target || e.srcElement;
		
		// elem name is column[index]
		var index = elem.name.replace(/\]/g, '').split('[')[1];
		var value = elem.value.trim();

		try {
		
			value = this.check_value(index, value);
			
		} catch(err) {
		
			var span = document.getElementById('error_message');
			
			if(!span) {
				span = document.createElement("SPAN");
				span.id = 'error_message';
				span.style.position='absolute';
				span.style.backgroundColor='hsl(40, 90%, 90%)';
				span.style.border='1px solid grey';
				span.style.padding='2px';
				span = document.body.appendChild(span);
				span.onclick=function(){this.style.display="none"};
			}
			
			span.innerHTML = err;
			span.style.left = elem.offsetLeft + 10 + 'px';
			span.style.top = elem.offsetTop + 10 + 'px';
			span.style.display="block";

			elem.value = elem.data;
			return false;
		}
Ответить с цитированием
  #6 (permalink)  
Старый 23.01.2014, 13:19
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от copenhagen
На я.маркете кнопка появляется слоем поверх, а у вас для нее сразу место оставлено просто она скрыта сначала. И кнопка должна появляться всего одна.
Таки давай дальше сам...
Ответить с цитированием
  #7 (permalink)  
Старый 23.01.2014, 17:25
Интересующийся
Отправить личное сообщение для copenhagen Посмотреть профиль Найти все сообщения от copenhagen
 
Регистрация: 01.07.2010
Сообщений: 18

Для меня основная трудность не показать кнопку, а понять как ее расположить. В рассмотренных мной сайтах для всплывающей плашки с кнопкой в html коде позиция задается через "style="display: block; top: 477px;"". Явно это значение расчитывается через js.
Ответить с цитированием
  #8 (permalink)  
Старый 24.01.2014, 04:41
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Еще не заметили как рассчитывается через js?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает кнопка в IE9 и ниже fundbolt Internet Explorer 7 24.12.2013 09:46
ajax цикл - кнопка "подробнее" для карточек nvp AJAX и COMET 3 17.12.2013 21:34
Не работает кнопка "Наверх" dle 9.3 dunek_ Opera, Safari и др. 1 25.05.2013 18:26
Кнопка с запросом Logo424 Javascript под браузер 12 20.05.2013 19:29
Появляющаяся/исчезающая кнопка при прокрутке страницы MailRes Элементы интерфейса 2 22.06.2011 11:49