Забыли пароль?
Запросите новый здесь.

Голосование
Что вас интересует на нашем сайте больше всего?

База аддонов
База аддонов
14% [1 Голос]

Форум, поиск ответов
Форум, поиск ответов
14% [1 Голос]

Общение
Общение
43% [3 Голосов]

Новости
Новости
0% [0 Голосов]

Другое
Другое
29% [2 Голосов]

Голосов: 7
Вы должны авторизироваться, чтобы голосовать.
Начат: 16.05.2017 07:06

Архив опросов
Случайная тема
Друзья проекта
Unlogic W0rst Lab
All Fusion :: Плагины, моды, темы оформления для 6 и 7 версий PHP-Fusion
Система Smart для PHP-Fusion
Миничат
Только пользователи могут отправлять сообщения.

Pisatel
Offline
· 13.06.2017 12:07
Vova, не люблю сторонние сервисы)) Тем более, у меня нет больших рассылок, статистика особо не нужна

Vova
Offline
· 13.06.2017 11:33
Pisatel: у меня везде smtp и все работает, чтобы видеть статусы писем есть постмастеры и fbl. Попробуй mailgun.com.

Vova
Offline
· 13.06.2017 11:31
Есть Атомы n2800, 4gb ram ddr3, 2 tb sata по 600руб в месяц без платы за установку. ДЦ Гравлин и Рубе.

Pisatel
Offline
· 13.06.2017 08:20
Надеюсь, понятно объяснил)) Я себе фикс небольшой сделал, теперь норм все. Как варик еще - в настройках мыло не майл

Pisatel
Offline
· 13.06.2017 08:18
Суть в том, что если в настройках сайта мыло майла, то получается, что на майл письмо пришло с майла, а это не так, поэтому и блок

Архив миничата
Сейчас на сайте
» Гостей: 15

Гости:
» [Ваш IP] 06:50:35
/Статьи
» Bing [Bot] 06:50:25
/Статьи
» 217.182.132.183 06:50:21
/Поиск
» 164.132.161.96 06:50:20
/Поиск
» 217.182.132.176 06:50:06
/Поиск
» 46.229.168.76 06:50:02
/moddb/error.php
» 144.76.112.23 06:50:00
/Поиск
» 51.255.65.97 06:49:59
/Поиск
» 69.162.124.235 06:49:27
» 46.229.168.74 06:49:26
/moddb/error.php
5 - не показано

» Всего пользователей: 1,295
» Новый пользователь: ket
В базе имеется
аддонов: 951
тем: 137
Иерархия статей
Выпадающий текст при нажатии на ссылку
Этот выпадающий текст при нажатии на ссылку очень может пригодиться для экономии места на сайте, особенно если текста много и его желательно показывать порциями...

Пример будет очень простой, но хорошо показывающий всю прелесть и краткость технологии jQuery.

Начнем с того что создадим файл index.html, содержимое которого будет следующим:


----------------------------------------------------------------------------------
< html >< head >
< script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" >< /script >
< style type="text/css" >
#panel {
background: #0099FF;
color: #FFFFFF;
height: 200px;
width: 400px;
padding: 5px;
display: none;
}
.btn-slide {
background: #CCCCCC;
color: #0066FF;
}
.active {
background: #FFFF99;
}
< /style >
< /head >

< body >
< a href="" class="btn-slide" >Нажми на меня!< /a >

< script type="text/javascript" >
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
< /script >

< div id="panel" >
Тра-та-та, тра-та-та, мы ведём с собой кота...
< /div >

< /body >
< /html >

----------------------------------------------------------------------------------

Разберем более детально что к чему.

На 2-й строке мы подключаем библиотеку jQuery с официального сайта. Далее с 3-й по 19-ю строку идет CSS код, который Вы можете изменять или дополнять своими свойствами, тем самым изменяя внешний вид выпадающего блока с текстом. 23-я строка представляет собой ссылку, при нажатии на которую появляется скрытый текст.

Далее идет javascript код, работу которого я объясню чуть ниже.
И, наконец, завершает html код наша выпадающая панелька с любой всевозможной информацией.

Принцип работы яваскрипта состоит в следующем: после загрузки документа (строка 26) и при нажатии на ссылку с классом btn-slide (строка 27), панель с id=#panel выдвигается и показывает свое содержимое (строка 28), при этом класс ссылки меняется на active (строка 29).

Вот в принципе и все, не забудьте убрать лишние пробелы в тегах.

ДЕМО: выпадающий текст

PS: автором статьи Софронов Максим.

Поделиться этой статьей
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:


#1 | yury 30.09.2010 22:42
No Avatar
Отсутствует
Супер Администратор
Активный
С 26.07.2010 13:12
пример надо было сразу вставитьad
#2 | jikaka 01.10.2010 07:17
Avatar
Отсутствует
Супер Администратор
Активный
С 26.07.2010 12:10
сделал...
мысли | фото
#3 | Virgo 15.02.2011 23:36
No Avatar
Отсутствует
Пользователь
Активный
С 15.02.2011 23:13
Здравствуйте! У меня есть вопрос. Как правильно сделать несколько таких ссылок подряд? Просто я хочу сделать страницу с ответами на вопросы, где вопросы это ссылка, а ответ - выплывающее окно. Список таких (часто задаваемых вопросов) состоит из 20. Как правильно использовать код в таком случае? Я использовал в таком порядке:
В раздел < head > вставил
< script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" >< /script >
< style type="text/css" >
#panel {
background: #0099FF;
color: #FFFFFF;
height: 200px;
width: 400px;
padding: 5px;
display: none;
}
.btn-slide {
background: #CCCCCC;
color: #0066FF;
}
.active {
background: #FFFF99;
}
< /style >
Дальше в нужном месте раздела <body> разместил
< a href="" class="btn-slide" >Нажми на меня!< /a >

< script type="text/javascript" >
$(document).ready(function(){
$(".btn-slide"ad.click(function(){
$("#panel"ad.slideToggle("slow"ad;
$(this).toggleClass("active"ad; return false;
});
});
< /script >

< div id="panel" >
Тра-та-та, тра-та-та, мы ведём с собой кота...
< /div >
Но после того как я разместил этот код второй раз, чтобы получить вторую ссылку, скрипт начал глючить. При нажатии любой ссылки он открывает содержание только первой, при этом сразу закрывает выплывающее окно. Возможно использовать этот скрипт как я хочу в данном примере? Если да, то подскажите как это правильно сделать! За ранее спасибо
#4 | jikaka 16.02.2011 07:58
Avatar
Отсутствует
Супер Администратор
Активный
С 26.07.2010 12:10
Virgo, почитай вот это: http://rusfusion....icle_id=36
мысли | фото
#5 | alastor 09.09.2011 19:33
Avatar
Отсутствует
Пользователь
Активный
С 20.08.2010 18:39
не совсем понимаю, для чего нужна сия конструкция...
Делаю дизайн для Php Fusion.
Обращаться в лс
#6 | jikaka 11.09.2011 18:06
Avatar
Отсутствует
Супер Администратор
Активный
С 26.07.2010 12:10
например бб-код спойлерaf
мысли | фото
Добавить комментарий
Пожалуйста, залогиньтесь для добавления комментария.
Рейтинги
Нет данных для оценки.

Рейтинг доступен только для пользователей.

Пожалуйста, авторизуйтесьили зарегистрируйтесь для голосования.