Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.08.2012, 17:16
Новичок на форуме
Отправить личное сообщение для GBelka Посмотреть профиль Найти все сообщения от GBelka
 
Регистрация: 31.08.2012
Сообщений: 3

Убрать наследование return false от родительского элемента
Существуют некие выезжающие табы-вкладки. По клику на язычок (div состоит из img языка и того div, в котором всё лежит) вкладки происходит нечто такое:
$opener1.click(function() {
	$($Link2).animate({"left": "970px"}, "slow").removeClass('expanded');
	$($Link3).animate({"top": "591px"}, "slow").removeClass('expanded'); 
	$($Link4).animate({"left": "-970px"}, "slow").removeClass('expanded'); 
  if($Link1.css('top')==0) {
  //alert('0 point');
  } else {
  $Link1.animate({"top": "0px"}, "slow").addClass('expanded');
  }
      return false;
  });

Если щелкнуть не по языку, то все закрывается:
$(document).not($Link1).click (function() {
    closeAll = setTimeout(function() {
      $Link1.animate({top: '-591'}, "slow");
    }, 1000);
  }).mouseenter(function() {
    clearTimeout(closeAll);
  });

Для того, чтобы при клике внутри самой вкладки, вкладка никудашеньки не девалась, было дописано следующее:
$Link1.click(function() {
		return false;
	});

ТЕПЕРЬ, если кликнуть, к примеру, на какую-нибудь ссылочку, к примеру, внутри этой вкладки, но не произойдёт ничего, что законно, ибо return false ссылка наследует со своего родительского элемента, или вообще ничего не наследует, но поскольку блокированный родитель круче, то ссылка и не думает работать. А надо бы...А это сделать, подскажите, пожалуйста!
P.S. Если кто-то подскажет, как ещё это элегантнее написать, не на каждую отдельную вкладку одну и ту же функцию (этот код повторяется 4 разу на все 4 вкладки), а на все сразу, то скажу двойное спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 31.08.2012, 18:28
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Сообщение от GBelka
ТЕПЕРЬ, если кликнуть, к примеру, на какую-нибудь ссылочку, к примеру, внутри этой вкладки, но не произойдёт ничего, что законно, ибо return false ссылка наследует со своего родительского элемента, или вообще ничего не наследует, но поскольку блокированный родитель круче, то ссылка и не думает работать. А надо бы...А это сделать, подскажите, пожалуйста!
P.S. Если кто-то подскажет, как ещё это элегантнее написать, не на каждую отдельную вкладку одну и ту же функцию (этот код повторяется 4 разу на все 4 вкладки), а на все сразу, то скажу двойное спасибо.
Ccылка рабочая -есть ?
Или Приведите Образцы HTML кода для кликабельной вкладки , без перехода и реальной ссылки с нужностью перехода - но живая страница - лучше!
Ответить с цитированием
  #3 (permalink)  
Старый 31.08.2012, 19:06
Аватар для LittlePony
Кандидат Javascript-наук
Отправить личное сообщение для LittlePony Посмотреть профиль Найти все сообщения от LittlePony
 
Регистрация: 19.08.2012
Сообщений: 100

возможно догадываюсь, о чём речь, хотя и приходится включать телепатические способности.
Стоит для закрытия делать подложку, по клику на которую всё ненужное закрывается, а всё остальное пусть работает как хочет
Ответить с цитированием
  #4 (permalink)  
Старый 31.08.2012, 19:17
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

LittlePony,
Просто нун сделать not(Тут отличия)
$Link1.not(Тут отличия).click(function() { 
        return false; 
    });
Ответить с цитированием
  #5 (permalink)  
Старый 31.08.2012, 19:32
Аватар для LittlePony
Кандидат Javascript-наук
Отправить личное сообщение для LittlePony Посмотреть профиль Найти все сообщения от LittlePony
 
Регистрация: 19.08.2012
Сообщений: 100

иногда это бывает слишком нагромождённо.
А вообще действительно надо смотреть задачу и только тогда принимать решение.
Ответить с цитированием
  #6 (permalink)  
Старый 02.09.2012, 05:55
Новичок на форуме
Отправить личное сообщение для GBelka Посмотреть профиль Найти все сообщения от GBelka
 
Регистрация: 31.08.2012
Сообщений: 3

Огромное спасибо за ответ, но именно
$Link1.not(Тут отличия).click(function() {
        return false;
    });

уже задействован.
Если щелкнуть по чему угодно, кроме вкладки, то вот как раз она и закрывается. Если щелкнуть по самой вкладке, то для того, чтобы она также как и всё остальное не закрывалась, на неё и навешен return false...Конечно, можно ещё добавить что-то вроде
$Link1.not('a').click(function() {
        return false;
    });

Но это мы не полностью раскроем контент вкладки, а лишь конкретно ссылки. А ведь, например, ссылка может быть и на онклике по изображению, верно?
Вот необходимая схема. К сожалению, на сервере нигде нет.
<div id="wrapper">
	<div class="tab main">
		лого
	</div>

	<div id="service" class="tab slide" style="top: 0px; left:-970x;">
		<img id="clickarea1" class="yazik" src="images/service645ts.png" alt="service" style="float:right; margin-top: 322.5px; margin-bottom:82px;"/>
		<div>
			<a class="closeback l" onclick="$('#service').animate({'left': '-970px'}, 'slow').removeClass('expanded');"></a>
			что-то тут
		</div>
	</div>

	<div id="icons" class="tab slide" style="top:-591px; left: 0px;" >
		<div>
			<a class="closeback t" onclick="$('#icons').animate({'top': '-591px'}, 'slow').removeClass('expanded');"></a>
		
			<p>Officianime consece perspit, same et et <a href="http://www.yandex.ru">vendendis</a> num voloremquas consequis dolorer natiosa ndendio nsequae eos dic tem acianto qui quis ullabor epudit voluptus, nusa dollace ruptur, venduci psanimus evelique.</p>			
		</div>		
		<img id="clickarea2" class="yazik" src="images/icons1024ts.png" alt="icons" style="margin-left: 272px; margin-right: 512px;"/>
	</div>

	<div id="how" class="tab slide" style="top: 0px; left: 970px;">
		<img id="clickarea3" class="yazik" src="images/how645ts.png" alt="how" style="float:left; margin-top: 83px; margin-bottom: 322px;"/>	
		<div>
			<a class="closeback r" onclick="$('#how').animate({'left': '970px'}, 'slow').removeClass('expanded');"></a>
			<p>Tios et, qui occaborro quis esto omnisti denis dolupti oreperum a parunt.
			Quas eati aut poria cupta sitate quibus molorerum quo moluptasi tene nonse qui volestrunt arum exero dolupta tectinu llabore iciaspe rcienis in eos voluptia doluptat aut quodita corepta temporiores adiciundi di officid molupta eat apitend isquissum rest, veni officimagnis sitias volores ecest, sanis cust faccus que volor anda et ressequ isquidu ciliquamus explis atia coria conem rereprat.</p>	
		</div>
	</div>

	<div id="about" class="tab slide" style="top: 591px; left:0px;">
		<img id="clickarea4" class="yazik" src="images/about1024ts.png" alt="about" style="margin-left: 512px; margin-right: 272px;"/>	
		<div>
			<p>Harum ene nectasp eritenem dit minusam quibusam se nonsequ aerio. Bitation parcipsae nam, idebisint dolupta volum fuga. Nem facit harumque voluptati acearis quisit, qui dolore ius videles delloribus voluptas eaquas ipsaeptat incius.
			Fugiassit, volut latur? Uciis conseque es dolest faccum faccust, ut prem simus as volorem porpore de consent quas sed maio cullabo rporerf erroriam, sum que rem eumque pedipis.</p>
			
			<a class="closeback b" onclick="$('#about').animate({'top': '591px'}, 'slow').removeClass('expanded');"></a>			
		</div>
	</div>

</div>
Ответить с цитированием
  #7 (permalink)  
Старый 02.09.2012, 06:00
Новичок на форуме
Отправить личное сообщение для GBelka Посмотреть профиль Найти все сообщения от GBelka
 
Регистрация: 31.08.2012
Сообщений: 3

Для полноты картины:
$(document).ready(function() {

  var closeAll,
	$Link1 = $('#icons'),
	$Link2 = $('#how'),
	$Link3 = $('#about'),
	$Link4 = $('#service'),
	$opener1 = $('#clickarea2'),
	$opener2 = $('#clickarea3'),
	$opener3 = $('#clickarea4'),
	$opener4 = $('#clickarea1');
	
	$($Link1).animate({"top": "-591px"}, 0);
	$($Link2).animate({"left": "970px"}, 0);
	$($Link3).animate({"top": "591px"}, 0); 
	$($Link4).animate({"left": "-970px"}, 0); 	

  $opener1.click(function() {
	$($Link2).animate({"left": "970px"}, "slow").removeClass('expanded');
	$($Link3).animate({"top": "591px"}, "slow").removeClass('expanded'); 
	$($Link4).animate({"left": "-970px"}, "slow").removeClass('expanded'); 
  if($Link1.css('top')==0) {
  //alert('0 point');
  } else {
  $Link1.animate({"top": "0px"}, "slow").addClass('expanded');
  }
      return false;
  });
 
  $opener2.click(function() { 
	$($Link1).animate({"top": "-591px"}, "slow").removeClass('expanded');
	$($Link3).animate({"top": "591px"}, "slow").removeClass('expanded'); 
	$($Link4).animate({"left": "-970px"}, "slow").removeClass('expanded'); 
  if($Link2.css('left')==0) {
  //alert('0 point');
  } else {
  $Link2.animate({"left": "0px"}, "slow").addClass('expanded');
  }
      return false;
  });
 
  $opener3.click(function() {
	$($Link1).animate({"top": "-591px"}, "slow").removeClass('expanded');
	$($Link2).animate({"left": "970px"}, "slow").removeClass('expanded');
	$($Link4).animate({"left": "-970px"}, "slow").removeClass('expanded'); 
  if($Link3.css('top')==0) {
  //alert('0 point');
  } else {
  $Link3.animate({"top": "0px"}, "slow").addClass('expanded');
  }
      return false;
  });
 
  $opener4.click(function() {
	$($Link1).animate({"top": "-591px"}, "slow").removeClass('expanded');
	$($Link2).animate({"left": "970px"}, "slow").removeClass('expanded');
	$($Link3).animate({"top": "591px"}, "slow").removeClass('expanded'); 
  if($Link4.css('left')==0) {
  //alert('0 point');
  } else {
  $Link4.animate({"left": "0px"}, "slow").addClass('expanded');
  }
      return false;
  });
  //
  $Link1.click(function() {
		return false;
	});
  $Link2.click(function() {
		return false;
	});
  $Link3.click(function() {
		return false;
	});
  $Link4.click(function() {
		return false;
	});	
  
  //Next  
  
  $(document).not($Link1).click (function() {
    closeAll = setTimeout(function() {
      $Link1.animate({top: '-591'}, "slow");
    }, 1000);
  }).mouseenter(function() {
    clearTimeout(closeAll);
  });

  $(document).not($Link2).click (function() {
    closeAll = setTimeout(function() {
      $Link2.animate({left: '970'}, "slow");
    }, 1000);
  }).mouseenter(function() {
    clearTimeout(closeAll);
  });

  $(document).not($Link3).click (function() {
    closeAll = setTimeout(function() {
      $Link3.animate({top: '591'}, "slow");
    }, 1000);
  }).mouseenter(function() {
    clearTimeout(closeAll);
  });

  $(document).not($Link4).click (function() {
    closeAll = setTimeout(function() {
      $Link4.animate({left: '-970'}, "slow");
    }, 1000);
  }).mouseenter(function() {
    clearTimeout(closeAll);
  });

});

Планировала каждую из этих
$($Link1).animate({"top": "-591px"}, 0);
$($Link2).animate({"left": "970px"}, 0);
$($Link3).animate({"top": "591px"}, 0);
$($Link4).animate({"left": "-970px"}, 0);

запихнуть просто в нечто вроде
function x(){
$($Link1).animate({"top": "-591px"}, 0);
};
и далее вместо бесконечных повторов вставлять
x();

но что-то выдаёт мне undefined при встрече с x();
Ответить с цитированием
  #8 (permalink)  
Старый 02.09.2012, 08:51
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Сообщение от GBelka
уже задействован.
Если щелкнуть по чему угодно, кроме вкладки, то вот как раз она и закрывается. Если щелкнуть по самой вкладке, то для того, чтобы она также как и всё остальное не закрывалась, на неё и навешен return false...Конечно, можно ещё добавить что-то вроде
Ссылка живая есть ?
Может Воспользовацо UI tabs ? http://jquery.page2page.ru/index.php5/Вкладки_UI
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите разобраться ŞΘLƉiΞR Общие вопросы Javascript 2 28.08.2012 10:57
return false, Влияет на вложенные меню Gamestop Общие вопросы Javascript 7 29.10.2011 12:59
Ресайз элемента, div-блока Magneto Элементы интерфейса 1 01.09.2011 00:15
буфер обмена в Firefox KOLANICH Общие вопросы Javascript 4 01.07.2010 17:12
Проблема с if...else parzh-junior Элементы интерфейса 18 04.12.2009 16:17