Javascript.RU

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

Помогите с jQuery и кнопкой.
Приветствую уважаемое сообщество. Сам я совсем еще чайник, но учусь

Делаю меню для сайта. Это горизонтальный ряд кнопок, которые при :hover медленно изменяют цвет, а при нажатии меняют цвет на оранжевый, пока не будет нажата другая кнопка. Весь текст в Div'ах, которые при нажатии отображаются, в зависимости от нажатой кнопки.
Проблема в том, что если всю функцию целиком засунуть в <button onclick=****> все работает отлично. Но это куча лишнего кода на странице. Из отдельного файла это работать не хочет. Догадываюсь, что это из-за $(this).css('background-color','rgba(255,162,0,0.7)');
Вся проблема, похоже, в (this). Если при вызове из onclick, скрипт понимает, что (this) это та кнопка, которая нажата, то скрипт в файле этого не понимает. На что поменять (this) ? Как передать в скрипт информацию, какая кнопка нажата ?
<style>
.btnnavi
{
background-color:rgba(0,0,0,0.7);
height:90px;
width:15%;
color:white;
border-style:hidden;
border-bottom-left-radius:1px;/*без этого в опере нет прозрачности, почему-то*/
font-size:90%;
 -webkit-transition-property:background-color, li; 
 -webkit-transition-duration: 1s, 1s; 
 -webkit-transition-timing-function: linear, ease-in;
 -moz-transition-property:background-color, li; 
 -moz-transition-duration:1s; 
 -moz-transition-timing-function: linear, ease-in; 
 -o-transition-property:background-color, li; 
 -o-transition-duration:1s; 
 -o-transition-timing-function: linear, ease-in;
}

#btnnavi-l
{
border-bottom-left-radius:15px;
border-top-left-radius:15px;
}
#btnnavi-r
{
border-bottom-right-radius:15px;
border-top-right-radius:15px;
}
.btnnavi:hover,#btnnavi-l:hover,#btnnavi-r:hover
{
background-color:rgba(0,110,255,0.7);
}
</style>

<div>
<button class="btnnavi" id="btnnavi-l" onclick="$(navigate('page1'));">Пункт 1</button>
<button class="btnnavi" onclick="$(navigate('page2'));">Пункт 2</button>
<button class="btnnavi" id="btnnavi-r"onclick="$(navigate('page3'));">Пункт 3</button>
</div>


function navigate(page) {
$('.text').hide(); /*скрываем открытый div*/
$('#' + page).fadeIn('slow'); /*показываем другой div*/
$('.btnnavi').css('background-color','rgba(0,0,0,0.7)'); /*сбрасываем цвет нажатой кнопки*/
$(this).css('background-color','rgba(255,162,0,0.7)');/*устанавливаем цвет нажатой кнопки*/
}
Ответить с цитированием
  #2 (permalink)  
Старый 13.02.2013, 11:33
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

не пользуйтесь onclick)

Пишите скрипты только в файле скрипта, например так:

$(/*пункт меню (селектор)*/).click(function() {
/*функция по клику на пункт меню, где this = тот пункт меню на который мы нажали*/
});


Тогда вам не надо писать функции для каждого пункта меню. Можно написать одну функцию на все.
Допустим меню сделано списком:
$('li').click(function() {
  $('ul').find('active').toggleClass('active');//Снимаем класс актив с пункта меню
  $(this).toggleClass('active');//Добавляем класс актив к кликнутому пункту
/*В таком варианте вы просто задаёте цвет для class='active' через css*/
})

Последний раз редактировалось tsigel, 13.02.2013 в 11:37.
Ответить с цитированием
  #3 (permalink)  
Старый 13.02.2013, 12:32
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

Сообщение от vladvo
если всю функцию целиком засунуть в <button onclick=****> все работает отлично
...
Из отдельного файла это работать не хочет
Значит плохая твоя функция... Или не так указываешь имя файла...
Ответить с цитированием
  #4 (permalink)  
Старый 13.02.2013, 12:34
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

Сообщение от vladvo
Как передать в скрипт информацию, какая кнопка нажата ?
Тестовый пример нормальный сделай... И напиши что хочешь получить...
Ответить с цитированием
  #5 (permalink)  
Старый 13.02.2013, 13:15
Новичок на форуме
Отправить личное сообщение для vladvo Посмотреть профиль Найти все сообщения от vladvo
 
Регистрация: 13.02.2013
Сообщений: 3

Получить хочу меню. При наведении на кнопку меняет цвет. При нажатии на кнопку - нажатая кнопка меняет цвет на оранжевый, и остается такой, пока другую не нажму.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.btnnavi
{
background-color:rgba(0,0,0,0.7);
height:90px;
width:15%;
color:white;
border-style:hidden;
border-bottom-left-radius:1px;/*for button transparency in opera*/
font-size:90%;

 -webkit-transition-property:background-color, li; 
 -webkit-transition-duration: 1s, 1s; 
 -webkit-transition-timing-function: linear, ease-in;

 -moz-transition-property:background-color, li; 
 -moz-transition-duration:1s; 
 -moz-transition-timing-function: linear, ease-in; 

 -o-transition-property:background-color, li; 
 -o-transition-duration:1s; 
 -o-transition-timing-function: linear, ease-in;
}

#btnnavi-l
{
border-bottom-left-radius:15px;
border-top-left-radius:15px;
}
#btnnavi-r
{
border-bottom-right-radius:15px;
border-top-right-radius:15px;
}
.btnnavi:hover,#btnnavi-l:hover,#btnnavi-r:hover
{
background-color:rgba(0,110,255,0.7);
}
.btnnavi:active,#btnnavi-l:active,#btnnavi-r:active
{
background-color:rgba(255,162,0,0.7);
}
</style>
</head>
<body>

<script type="text/javascript">
$(document).ready(function(){
$('.btnnavi').click(function() 
{
$('.text').hide();
$('#page'+ $(this).attr("value")).fadeIn('slow');

$('.btnnavi').find(':active').toggleClass(':active');
$(this).toggleClass('active');

});
});
</script>

<div class="bodyTop"> 
<button class="btnnavi" id="btnnavi-l" value="1">Главная</button>
<button class="btnnavi" value="2">Порядок работы</button>
<button class="btnnavi" value="3">Стоимость услуги</button>
<button class="btnnavi" value="4">Контакты</button>
<button class="btnnavi" value="5">Документы</button>
<button class="btnnavi" id="btnnavi-r" value="6">Информация</button>
</div>
</body>
</html>


Вот так это выглядит. Не могу справиться с
$('.btnnavi').find(':active').toggleClass(':active ');
$(this).toggleClass('active');
Что-то не так делаю. Не остается она оранжевой после нажатия.

Последний раз редактировалось vladvo, 13.02.2013 в 13:24.
Ответить с цитированием
  #6 (permalink)  
Старый 13.02.2013, 13:28
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

Сообщение от vladvo
При наведении на кнопку меняет цвет. При нажатии на кнопку - нажатая кнопка меняет цвет на оранжевый, и остается такой, пока другую не нажму.
Ну со стилями ты явно перемудил...
Как вариант.

<!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">
.btnnavi {
	background-color:rgba(0,0,0,0.7);
	height:90px;
	width:15%;
	color:white;
	border-style:hidden;
	border-bottom-left-radius:1px;/*for button transparency in opera*/
	font-size:90%;
	-webkit-transition-property:background-color, li; 
	-webkit-transition-duration: 1s, 1s; 
	-webkit-transition-timing-function: linear, ease-in;
	-moz-transition-property:background-color, li; 
	-moz-transition-duration:1s; 
	-moz-transition-timing-function: linear, ease-in; 
	-o-transition-property:background-color, li; 
	-o-transition-duration:1s; 
	-o-transition-timing-function: linear, ease-in;
}
#btnnavi-l {
	border-bottom-left-radius:15px;
	border-top-left-radius:15px;
}
#btnnavi-r {
	border-bottom-right-radius:15px;
	border-top-right-radius:15px;
}
.btnnavi:hover {
	background-color:rgba(0,110,255,0.7);
}
.btnnavi:active {
	background-color:rgba(255,162,0,0.7);
}
.btnnavi.on:hover,
.btnnavi.on:active,
.on {
	background-color: orange;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
	$('.btnnavi').click(function () {
		$('.bodyTop .btnnavi').removeClass('on');
		$(this).addClass('on');
	});
});
</script>
</head>
<body>
<div class="bodyTop"> 
	<button class="btnnavi" id="btnnavi-l" value="1">Главная</button>
	<button class="btnnavi" value="2">Порядок работы</button>
	<button class="btnnavi" value="3">Стоимость услуги</button>
	<button class="btnnavi" value="4">Контакты</button>
	<button class="btnnavi" value="5">Документы</button>
	<button class="btnnavi" id="btnnavi-r" value="6">Информация</button>
</div>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 13.02.2013, 13:33
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

Усилю нажим со стилями...

<!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">
.btnnavi {
	background-color:rgba(0,0,0,0.7);
	height:90px;
	width:15%;
	color:white;
	border-style:hidden;
	border-bottom-left-radius:1px;/*for button transparency in opera*/
	font-size:90%;
	-webkit-transition-property:background-color, li; 
	-webkit-transition-duration: 1s, 1s; 
	-webkit-transition-timing-function: linear, ease-in;
	-moz-transition-property:background-color, li; 
	-moz-transition-duration:1s; 
	-moz-transition-timing-function: linear, ease-in; 
	-o-transition-property:background-color, li; 
	-o-transition-duration:1s; 
	-o-transition-timing-function: linear, ease-in;
}
.btnnavi:first-child {
	border-bottom-left-radius:15px;
	border-top-left-radius:15px;
}
.btnnavi:last-child {
	border-bottom-right-radius:15px;
	border-top-right-radius:15px;
}
.btnnavi:hover {
	background-color:rgba(0,110,255,0.7);
}
.btnnavi:active {
	background-color:rgba(255,162,0,0.7);
}
.btnnavi.on:hover,
.btnnavi.on:active,
.on {
	background-color: orange;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
	$('.btnnavi').click(function () {
		$('.bodyTop .btnnavi').removeClass('on');
		$(this).addClass('on');
	});
});
</script>
</head>
<body>
<div class="bodyTop"> 
	<button class="btnnavi" value="1">Главная</button>
	<button class="btnnavi" value="2">Порядок работы</button>
	<button class="btnnavi" value="3">Стоимость услуги</button>
	<button class="btnnavi" value="4">Контакты</button>
	<button class="btnnavi" value="5">Документы</button>
	<button class="btnnavi" value="6">Информация</button>
</div>
</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 13.02.2013, 13:35
Новичок на форуме
Отправить личное сообщение для vladvo Посмотреть профиль Найти все сообщения от vladvo
 
Регистрация: 13.02.2013
Сообщений: 3

Ооооо! Благодарю ! То, что требовалось. Пойду работу над ошибками делать. Спасибо огромное !

Понятно. А в варианте first(last)-child кроме того, что убирается лишний id есть преимущества ?

И в .on
{
background-color: orange;
}
все-таки не orange a rgba(255,162,0,0.7), для прозрачности.

И вдогонку еще вопрос :
Почему в Опере прозрачность работает, только если указать
border-bottom-left-radius:1px;
Без этой строки, кнопки, которые не крайние не делаются прозрачными. Баг в опере ?

Последний раз редактировалось vladvo, 13.02.2013 в 13:41.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
помогите преобразовать javascript в jquery Rayzor jQuery 1 13.09.2012 12:00
Помогите с jquery KTO jQuery 3 09.05.2012 09:32
Помогите доработать навигацию jquery слайдера dima-f1 jQuery 0 29.02.2012 18:36
Помогите разобратся с Jquery append unsiker jQuery 3 08.07.2011 22:06
Помогите внедрить свой jQuery в другой A.N.R.I jQuery 25 19.07.2009 01:50