Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 07.03.2014, 09:41
Интересующийся
Отправить личное сообщение для Mizter Egoist Посмотреть профиль Найти все сообщения от Mizter Egoist
 
Регистрация: 05.03.2014
Сообщений: 23

$(document).ready(function(){
	showBasketLine();
	showBasketSmall();
	$(".storeBuy a").click(showBasketLine);
});
$("html").click(function() {
	if($(".basketSmallBox").is(":visible")){
		$(".basketSmallBox").removeClass("shower").hide();
	}
});
function showSmallBasket(event) {
	$(".basketLine a").click(function (event) {
		if($(".basketSmallBox").is(":visible")){
			$(".basketSmallBox").removeClass("shower").hide();
		} else if ($(".basketSmallBox").is(":hidden")) {
			showBasketSmall();
			$(".basketSmallBox").addClass("shower").show();
			event.stopPropagation();
		}
	});
}
function showBasketLine() {
	$.ajax({
		url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
		type: "GET",
		cache: true,
		timeout: 1000,
		data: "block=basketLine",
		dataType: "html",
		success: function(data){
			$('.basketLineBox').html(data)
		}
	});
}
function showBasketSmall() {
	$.ajax({
		url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
		type: "GET",
		cache: true,
		timeout: 1000,
		data: "block=basketSmall",
		dataType: "html",
		success: function(data){
			$('.basketSmallBox').html(data)
		}
	});
}

Вот так работает, только есть два минуса.
Первый, на ссылку нужно нажать два раза чтобы был отклик.
Второй, Если нажать внутри малой корзины, она скрывается
Ответить с цитированием
  #12 (permalink)  
Старый 07.03.2014, 09:51
Интересующийся
Отправить личное сообщение для Mizter Egoist Посмотреть профиль Найти все сообщения от Mizter Egoist
 
Регистрация: 05.03.2014
Сообщений: 23

$(document).ready(function(){
	showBasketLine();
	showBasketSmall();
	$(".storeBuy a").click(showBasketLine);
	$("html").click(function() {
		if($(".basketSmallBox").is(":visible")){
			$(".basketSmallBox").removeClass("shower").hide();
		}
	});
});
function showSmallBasket() {
	$(this).click(function (event) {
		if($(".basketSmallBox").is(":visible")){
			$(".basketSmallBox").removeClass("shower").hide();
		} else if ($(".basketSmallBox").is(":hidden")) {
			showBasketSmall();
			$(".basketSmallBox").addClass("shower").show();
			event.stopPropagation();
		}
	});
}
function showBasketLine() {
	$.ajax({
		url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
		type: "GET",
		cache: true,
		timeout: 1000,
		data: "block=basketLine",
		dataType: "html",
		success: function(data){
			$('.basketLineBox').html(data)
		}
	});
}
function showBasketSmall() {
	$.ajax({
		url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
		type: "GET",
		cache: true,
		timeout: 1000,
		data: "block=basketSmall",
		dataType: "html",
		success: function(data){
			$('.basketSmallBox').html(data)
		}
	});
}

Вот так работает открытие и закрытие по щелчку на ссылке, а вот при щелчке на body или html ничего не происходит.
Ответить с цитированием
  #13 (permalink)  
Старый 07.03.2014, 10:05
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Все через ж.

1. Сервер сам нарисует кол-во и сум-му заказов в процессе выдачи хтмл. Более того, там на сервере эти показания полезно закешировать скажем в профиле юзера который естественно кешируется в сессии. Вплоть до события обновления корзины. Следовательно не нужен вызов рендера заказов по событию загрузки страницы.

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

Это значит на ссылку вешается запрет пропаганды и на контейнер корзины вешается запрет пропаганды щелчка. Один раз и навсегда. По которому контейнер опять же тупо сам себя убирает, потому что проверять нечего - невидимый контейнер не щелкабелен. Переключатель только в ссылке. Если видим - скрыть, если скрыт - увидеть.

И вообще, на кой такой гемор. Открыли - закрыли по тому же месту. При чем тут туловище...
Ответить с цитированием
  #14 (permalink)  
Старый 07.03.2014, 10:36
Интересующийся
Отправить личное сообщение для Mizter Egoist Посмотреть профиль Найти все сообщения от Mizter Egoist
 
Регистрация: 05.03.2014
Сообщений: 23

Я скажем так javascript не особо знаю, у меня это получилось благодаря гуглу и экспериментов, особой осмысленности в этом нет, и толком не знаю как реализовать все что Вы пишите((
Ответить с цитированием
  #15 (permalink)  
Старый 07.03.2014, 18:06
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Как-то не вяжется. Кто в js не понимает тот пытается разобраться с js, а не с опупевшим jquery.

В общем из рабочего. Простейший вьюер. див на всю ширину, поверх него две "кнопки", то есть два дива по 30% шириной слева и справа, абсолютно позиционированы. Щелчок на этих кнопках вызывает соответственно следующую или предыдущую картинку, а щелчок посередине - по div под ними - закрывает плеер.

Как сделать чтобы щелчок на кнопках не проникал в контейнер для картинок?

prev_button.addEventListener("click", 
	function(event) {
		event.stopPropagation ? event.stopPropagation() : event.cancelBubble = !0;
	this.elem_anchor.click();
}, false);


Кнопки невидимые, без заливки, без обводки, без ничего. Только указатель мыши меняется в зависимости от расположения над: левой кнопкой - палец влево, правой - вправо, посередине - zoom-out.

Див-контейнер сам себя скрывает элементарно

overlay.addEventListener("click", 
	function(event) {
		this.style.visibility = "hidden";
}, false);


Ему не надо проверять видим я или невидим, потому что по невидимому щелкнуть не выйдет.

Появляется он после щелчка по ссылке на странице, куче которых вешается обработчик события щелчок по факту загрузки документа

...
elem.addEventListener("click", load_image, false);


вот она

var load_image = function(e) {

		if (e.preventDefault)
			e.preventDefault(); 
		e.returnValue = false;
		
// тут вырезано действующее вещество
		
		var arr = page_scrolls();
		overlay.style.visibility = "visible";
		overlay.style.top = arr[1] + "px";
//...
	};


Все то же самое у вас, с той лишь разницей что вместо оверлея - боди, и ссылка всего одна.
Ответить с цитированием
  #16 (permalink)  
Старый 12.03.2014, 10:50
Интересующийся
Отправить личное сообщение для Mizter Egoist Посмотреть профиль Найти все сообщения от Mizter Egoist
 
Регистрация: 05.03.2014
Сообщений: 23

Не могу понять как мне все это цельным кодом написать
Ответить с цитированием
  #17 (permalink)  
Старый 12.03.2014, 11:24
Интересующийся
Отправить личное сообщение для Mizter Egoist Посмотреть профиль Найти все сообщения от Mizter Egoist
 
Регистрация: 05.03.2014
Сообщений: 23

Подумал, подумал, вот что вышло, не знаю работает ли, но что то тут не так.
var showSmallBasket = function () {
	$(this).addEventListener("click", 
		function(event) {
			event.stopPropagation ? event.stopPropagation() : event.cancelBubble = !0;
		this.elem_anchor.click();
	}, false);
}
body.addEventListener("click", 
	function(event) {
		this.style.visibility = "hidden";
}, false);
document.onclick = function(e) {
	//не могу придумать
}
Ответить с цитированием
  #18 (permalink)  
Старый 12.03.2014, 11:32
Интересующийся
Отправить личное сообщение для Mizter Egoist Посмотреть профиль Найти все сообщения от Mizter Egoist
 
Регистрация: 05.03.2014
Сообщений: 23

<!DOCTYPE html>

<html>
<head>
	<title>Корзина</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script type="text/javascript">
		var showSmallBasket = function () {
			$(this).addEventListener("click", 
				function(event) {
					event.stopPropagation ? event.stopPropagation() : event.cancelBubble = !0;
				this.elem_anchor.click();
			}, false);
		}
		body.addEventListener("click", 
			function(event) {
				this.style.visibility = "hidden";
		}, false);
		document.onclick = function(e) {
			
		}
	</script>
</head>

<body>
<div class="basketLineBox">
	<div class="basketLine">
		<a href="#" onclick="showSmallBasket(); return false;">В корзине <b>2</b> товара</a>
	</div>
</div>
<div class="basketSmallBox">
	<div class="basketSmall">
		<h3>Позиции в Вашей корзине:</h3>
		<div class="basketSmallConteiner">
			<div class="smallName"><a href="#" title="Товар №2"><h3>Товар №2</h3></a></div>
			<div class="smallPrice">Цена:&nbsp;1 руб.</div>
			<div class="smallQuantity">Количество:&nbsp;3.00</div>
		</div>
		<div class="basketSmallConteiner">
			<div class="smallName"><a href="#" title="Товар №2"><h3>Товар №2</h3></a></div>
			<div class="smallPrice">Цена:&nbsp;1 руб.</div>
			<div class="smallQuantity">Количество:&nbsp;3.00</div>
		</div>
		<div class="buttonWaySmallBasket">
			<form method="get" action="/p/cart">
				<input type="submit" value="Изменить количество">
			</form>
		</div>
		<div class="buttonWaySmallBasket">
			<form method="get" action="/p/order">
				<input type="submit" value="Оформить заказ">
			</form>
		</div>
	</div>
</div>
</body>
</html>
Ответить с цитированием
  #19 (permalink)  
Старый 12.03.2014, 12:25
Интересующийся
Отправить личное сообщение для Mizter Egoist Посмотреть профиль Найти все сообщения от Mizter Egoist
 
Регистрация: 05.03.2014
Сообщений: 23

Дальше этого не ушел((
Работает только клик по ссылке, разворачивает и скрывает, а клик по body не работает.
var showSmallBasket = function () {
	$(this).click(function (event) {
		if($(".basketSmallBox").is(":visible")){
			$(".basketSmallBox").removeClass("shower").hide();
		} else if ($(".basketSmallBox").is(":hidden")) {
			$(".basketSmallBox").addClass("shower").show();
		}
		event.stopPropagation ? event.stopPropagation() : event.cancelBubble = !0;
	});
}
$("html").click(function() {
	if($(".shower"))
	$(".basketSmallBox").removeClass("shower").hide();
});
Ответить с цитированием
  #20 (permalink)  
Старый 12.03.2014, 12:38
Интересующийся
Отправить личное сообщение для Mizter Egoist Посмотреть профиль Найти все сообщения от Mizter Egoist
 
Регистрация: 05.03.2014
Сообщений: 23

А вот та все работает, но есть один минус, при клике на body все скрывается, но при повторном клике на body все открывается.
var showSmallBasket = function () {
	$(this).click(function (event) {
		if($(".basketSmallBox").is(":visible")){
			$(".basketSmallBox").removeClass("shower").hide();
		} else if ($(".basketSmallBox").is(":hidden")) {
			$(".basketSmallBox").addClass("shower").show();
		}
		event.stopPropagation ? event.stopPropagation() : event.cancelBubble = !0;
		$(body).click(function() {
			if($(".shower")) {
				$(".basketSmallBox").removeClass("shower").hide();
			}
		});
	});
}
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение размера элемента при клике Derekovich Элементы интерфейса 25 05.12.2013 20:45
Отображение при клике + закрытие предыдущего Galyanov jQuery 8 13.11.2013 20:01
Смена фона картинки при клике на иконку Letto Элементы интерфейса 2 08.11.2013 18:31
Изменение фона элемента при клике. psydo Элементы интерфейса 8 28.06.2012 23:53
Вопрос по jquery. Как запретить один из скриптов при клике vuler Общие вопросы Javascript 1 07.03.2012 22:35