Нужен скрипт слайдера

DSL · 04.07.2010

В общем нужен скрипт "сворачивания/разворачивания" небольшой области при нажатии кнопки то есть:

Кнопка:

Посмотреть вложение 1154

На неё нажали (развернулось вниз):

Посмотреть вложение 1155

Желательно чтоб разворачивалось плавно.

P.S Много раз видел этот скрипт, а когда понадобился нету :biggrin:

Felix · 04.07.2010

Оо хотел тему создать, а тут есть уже. Потдерживаю! Мне тоже такой нужен :blush:

tigra60 · 04.07.2010

С jQuery все легко и просто:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Выпадающий текст</title>
<style type="text/css">
#content {
	display:none;
	width:130px;
	background-color:#3333;
	color:#FFF;
	padding:10px;
	border-bottom:solid 3px #999;
}
#content p {margin:0;} /* иначе будет разрыв между блоком контета и кнопкой - заголовком */

#on-off-btn {
	background-image:url(post-11035-1278250724,507_thumb.png);
	width:150px;
	height:25px;
}
</style>
</head>

<body>
<div id="content">
<p>Какой то текст, которым нужно заполнить пространство блока</p>
<p>Это второй абзац текста, котоорым нужно заполнить пространство блока</p>
</div>
<div id="on-off-btn"></div>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
// назначаем событие onclick блоку-кнопке on-off-btn
$(function() {
	$('#on-off-btn').click(function() { 
		$('#content').slideToggle(1000); // 1000 - время разворачивания/сворачивания в мс
	});
}); 
</script>
</body>
</html>

Felix · 04.07.2010

А можно без АktiveX сделать как нибуть ?

Если нет, то хотелось бы найти скрип такова рода.
Пишется кнопка типа получить код. Кликаем на кнопку и по верх сайта подгружается окошко в котором отображается необходимый текст.

Serg@NT · 04.07.2010

Felix сказал(а):
А можно без АktiveX сделать как нибуть ?

Если нет, то хотелось бы найти скрип такова рода.
Пишется кнопка типа получить код. Кликаем на кнопку и по верх сайта подгружается окошко в котором отображается необходимый текст.

А где вы тут ActiveX нашли? :blink: Ну, можно, наверное, без jQuery обойтись. То есть написать то же самое, что уже давно (и лучше) написано в jQuery на чистом javascript. Оно вам надо?

DSL · 04.07.2010

Тигра огромное спасибо. Как всегда спасаешь

Felix · 04.07.2010

Serg@NT сказал(а):
А где вы тут ActiveX нашли? :blink: Ну, можно, наверное, без jQuery обойтись. То есть написать то же самое, что уже давно (и лучше) написано в jQuery на чистом javascript. Оно вам надо?

Когда этот когд в HTML сохранаю и открываю эксплорером пишет типа подключите ActiveX :blink:
И почемуто этот код у меня не работает. Ничего не разворачивает и не сворачивается просто отображается BG и всё.
Ещё вопрос что это за код <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script> ?

Можно рабочий пример глянуть ?

tigra60 · 04.07.2010

И почемуто этот код у меня не работает. Ничего не разворачивает и не сворачивается просто отображается BG и всё.

Феликс! Ну дык надо ж подключить jQuery!
Это как раз и делает вот эта строка:

Код:

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>

По поводу рабочего примера:
1. У себя на компе в какой-нибудь папке создаете, к примеру, example.html и копируете в него код из моего поста.
2. В ту же папку копируете картинку кнопки из 1-го поста.
3. Туда же скачиваете и разархивируете вложенную библиотеку jQuery (это чтобы Вам по инету не шляться за нею).
4. Проверьте, чтобы в стиле было правильное имя картинки - бэкграунда.
5. Поправьте путь к библиотеке jQuery вот так:

Код:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

6. Запускайте example.html и наслаждайтесь.

Felix · 04.07.2010

Вот тако вот скрипт нужен.

Урааа!! СПС Тигра всё заработало! Прошу заценить! Клик

tigra60 · 04.07.2010

Чот я недопонял...
Феликс! Вы не путайте, пожалуйста, слайдер и модальное окно (у Вас на рисунке).
Самое простое, если нужно выдать пользователю какое-то сообщение, использовать стандартную javascript функцию alert():

Код:

<button onclick="alert('Вы нажали кнопку Нажми меня')">Нажми меня</button>

Модальное окно посложнее описано у меня на сайте.
Ну а если уж использовать jQuery, если покопаться, можно очень шикарные и стильные плагины модальных окон найти.

Извините, не понял что заценить?
Портал в целом уже видел, впечатления самые приятные. А что применительно к теме, простите не вкурил...

Felix · 05.07.2010

Мне нужен и слайдер и модальное окно.
На скриншоте я нарисовал модальное окно ну чтобы было понятно что я имел виду.

А заценить нужно слайдер я его на той странице поставил на которую дал линк.

kein · 05.07.2010

Про ActiveX. На заметку:
http://dev/test.html - ИЕ не ругается на ActiveX
file://c:/home/dev/www/test.html - ИЕ ругается на ActiveX.

Так всегда при использовании JS в локальных файлах.

Felix · 05.07.2010

kein сказал(а):
Про ActiveX. На заметку:

Спасибо! Теперь всё понятно.

Мне нужно модальное окно в которое я согу заталкать JS код который будет подгружать флеш файл.

tigra60 · 05.07.2010

Мне нужно модальное окно в которое я согу заталкать JS код который будет подгружать флеш файл.

Проще всего - поискать плагины для jQuery в инете. Ну, вот, например, первое попавшееся.

Felix · 06.07.2010

Отлично тигра то что надо! Как всегда выручил! Щас будем пробовать установить.

DSL · 06.07.2010

Вот что сделал с помощью этого скрипта:

При наведении:

Раскрытие:

CSS изменял чуть. Только теперь вопрос как сделать так чтоб при раскрытии кнопка оставалась такая же как при наведении?
Вот CSS:

Код:

#on-off-content {
 display:none;
 width:190px;
 background:url(/images/bg-content-on-off-btn.png) no-repeat 5px;
 color:#FFFFFF;
 
}
#on-off-content p {margin:0;
 padding-left:18px;
}

#on-off-btn {
 background:url(/images/on-off-btn.png);
 width:190px;
 height:30px;
}

 
#on-off-btn:hover {
 background: url(/images/on-off-btn2.png);
 cursor: pointer;
}

Felix · 06.07.2010

Код:

#on-off-btn:visited {
background: url(/images/on-off-btn2.png);
 cursor: pointer;
}

Вроде так!

DSL · 06.07.2010

Felix сказал(а):
Код:

#on-off-btn:visited { background: url(/images/on-off-btn2.png); cursor: pointer; }

Вроде так!

Нет не работает

motek · 06.07.2010

RaPPer сказал(а):
Вот что сделал с помощью этого скрипта:

Посмотреть вложение 1159

При наведении:

Посмотреть вложение 1160

Раскрытие:

Посмотреть вложение 1161

Слово "сеть" пишется через "е"

DSL · 06.07.2010

Слово "сеть" пишется через "е"

Спасибо :biggrin:

Нужен скрипт слайдера

Well-Known Member

Друг форума

Спасатель

Друг форума

Well-Known Member

Well-Known Member

Друг форума

Спасатель

Вложения

Друг форума

Спасатель

Друг форума

Частный случай

Друг форума

Спасатель

Друг форума

Well-Known Member

Друг форума

Well-Known Member

злой как @

Well-Known Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей