X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

4 страниц V   1 2 3 4 >
Открыть тему
Тема закрыта
> Разворачиваюшие блоки, Блоки с меняюшимся содержанием
Letmetouchyou
Letmetouchyou
Topic Starter сообщение 17.1.2010, 21:43; Ответить: Letmetouchyou
Сообщение #1


реализация с помощью библиотеки Jquery (min.Jquery)

1. Создание раздвижных блоков.
Под раздвижными блоками понимаються элементы меню, информационные участки сайта и тому подобное.
В HTML ето может выглядитьь так:
<div class="slide_block">Блок#1</div>
<div class="sub_menu">
<ul>
<li>Подменю#1</li>
<li>Подменю#1</li>
<li>Подменю#1</li>
<li>Подменю#1</li>
<li>Подменю#1</li>
<li>Подменю#1</li>
</ul>
</div>

slide_block - ето заголовок блока, под которым будет появлятся дургой блок. Грубо говоря, в данном случае ето кликабельная часть блока.
sub_menu - ето информациоонная чатсь блока. Часть которая будет раскрываться. В данному примере - ето меню.
Теперь CSS:
.bot_menu {display:none;}

етого хватает для нужного функционирования. С помощью display:none мы делаем все раскрываюшиеся блоки невидимыми при загрузки страницы. И при клике на заголовок блок будет раскрываться. Если не использовать display:none, то будет просто наоборот - изначально все блоки видны, и при клике на заголовок они буду сворачиваться.
Теперь js:
$(document).ready(function(){
    $('.slide_block').click(function(){
         $(this).next().slideToggle("slow");
            });
});

теперь по порядку
  1. $(document).ready(function(){ ... }); - событие ready.Функция будет выполнена когда DOM будет готов.
  2. $('.slide_block').click(function(){ ... }); - здесь: slide_block DOM элемент к которму привязана функция, которая вызываеться по событию click на етот DOM элмент. Ето может быть class, id, selector. С помощью библиотеки jquery возможны различные удобные способы селекции.
  3. $(this).next().slideToggle("slow"); - здесь: this идет обращение уже к DOM элементу по которму была вызвана функция то есть к .slide_block. Нужда использовать здесь именно this вместо обычного $('.slide_block') заключаеться в том что на странице может быть не сколько элементов с классом slide_block и по этому при вызове функции если не использовать this функция сработает для всех элементов. А this ограничивает. То есть идет обрашение только к тому элементу , по кторму было вызвано событие click.
    .next() - идет обращение к следуюшему DOM элементу. Если посматреть в html код , который показан выше, то ввидим , что у нас после элемента .slide_block идет элемент sub_menu. То есть обрашение происходит к нему.
    .slideToggle("slow"); - Функция делает все элементы скрытыми или видимыми в "скользящей" манере.

    slideToggle(speed, callback)
    speed (Строка, Число): строка представленная одним из трёх вариантов скоростей ("slow", "normal", or "fast") или в миллисекундах (например 1000).
    callback (Функция): функция выполнемая, когда анимация будет завершена, выполняется единажды, для каждого анимируемого элемента.



Пример

Если нужно, чтобы в один момент времени был развренут только один блок, можно сделать так:
js:
$(document).ready(function(){
var el = $('.bot_menu');
var mode=1; // 1 - только один раскртый блок. 0 - все раскрыты.
    $('.slide_block').click(function(){
        if (mode == 0){
         $(this).next().slideToggle("slow"); //старая функция
                } else {    
                            $(el).slideUp("slow"); //сварачаем  развреный элемент
                            $(this).next().slideDown("slow"); //разворачивание элемента
                            el = $(this).next(); //текшуий откртый элемент в переменную

                    }
    });
        
});

Пример
Но тут проблема. Нету возможности свернуть все блоки. То есть один блок будет развернут в любом случае. ЧТобы избавиться от етого можно делать как будет показано в послденем примерер про Блоки с меняющимся содержанием.
Для разнообразия поступим по другому:
js:
$(document).ready(function(){
var el = $('.bot_menu');
var mode=1; // 1 - только один раскртый блок. 0 - все раскрыты.
    $('.slide_block').click(function(){
        if (mode == 0){
         $(this).next().slideToggle("slow"); //старая функция
                } else {    
                        //опредление наличия класса check  у элемента по которому
                        //было вызвано событие click
                        if( $(this).next().get(0).className.toString().split(' ')[1] != 'check') {
                            $(el).removeClass('check'); // убираем класс check   развернутого элемента
                            $(el).slideUp("slow"); //сварачаем  развреный элемент
                            $(this).next().slideDown("slow"); //разворачивание элемента
                            $(this).next().addClass('check'); //присвоение ему класса check
                            el = $(this).next(); //текшуий откртый элемент в переменную
                        } else {
                            $(this).next().slideUp("slow"); //сворачиваем видимый блок.
                                $(this).next().removeClass('check'); //убираем у него же класс check
                            }
                    }
    });
        
});

если переменная mode выставлениа в еденицу - то в один момент времени будет развренут только один блок.
Смысл состоит в присовениее опередленного класс (лиш бы небыло его описания в таблице каскадных стилей ( CSS ) ), для того чтобы была возможность свернуть все блоки. Если такой класс присутвует у элемента , то сворачиваем только его. Если нет - разворачиваем блок по кторому был клик и сворачиваем предыдуший развренутый блок.
Пример
Реализовать подобное тысячами различных способов. Я привел пример как я обычно ето делаю :)

2.Блоки с меняющимся содержанием
Тут помжно ето понимать как хотите. Это может быть как и информациооный блок так и блок с коментариями так и блок с навигацией и т.д.)
Приведу пример как я это делал.
HTML:
<ul class="control">
<li><a href="#first" class="b1">First Contnet</a></li>
<li><a href="#second" class="b2">Second Contnet</a></li>
</ul>
<div class="full">
<div class="cont1">
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
</div>
<div class="cont2">
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
</div>
</div>

Здесь:
ссылки (.b1 и .b2) - ето грубо говря кнокпи управления блоками. Вместо них может быть любой дргуой ДОМ элемент.
.cont1 - первый контейнер.
.cont2 - второй контейнер
.full - див , включаюший в себя оба контейнера. Не обезателен.
Необходимый минимум ксс:
.cont2 {display:none;}

ето значит что при загрузке странице будет видим первый контейнер.
Теперь JS:
$(document).ready(function(){
    $('.b2').click(function(){
        $('.cont1').fadeOut("slow",function(){
            $('.cont2').fadeIn("slow");
            });
        });
    $('.b1').click(function(){
        $('.cont2').fadeOut("slow",function(){
            $('.cont1').fadeIn("slow");
            });
        });
});

Т.К. в примере выше разбирал по частям, здесь расмотрю самое основное.
Здесь все просто, по клику по управляюшим сылкам (.b1 u .b2) выполняетсья функция которая скрывает текущий блок и показывает второй. В данном случае ето анимация ( fadeIn - прозрачность от 0 до 1 , fadeOut - прозрачность от 1 до 0). Этот пример отличаеться от предыдушего , тем что здесь используеться callback после fadeIn и fadeOut. То етсь выполнени функции после завершения текушей.

fadeIn(speed, callback)
speed (Строка, Число): значение скорости, строка представленная одним из трёх вариантом скоростей ("slow", "normal", or "fast") или в миллисекундах (например 1000).
callback (Функция): функция выполянейтся, когда анимация будет завершена, выполняется единажды, для каждого анимируемого элемента.
(fadeOut такие же аргументы)

то есть:
$('.cont1').fadeOut("slow",function(){
            $('.cont2').fadeIn("slow");
            });

при заврешение fadeOut , в данном случае ето исчезновение первого контейнера, выполнитсья анимация fadeIn - появление второго контейнера.
Данный пример являетсья полной статикой, то есть если вам нужно не два, а нaпример три меняющихя контейнера , то ето просто нужно добваить в html - еше однуу ссылку, еше одни блок; в СSS - еше display:none для ноовго блока; в JS - еше обработку клику по добавленной ссылке.

Cделаем универсально:
html
<ul class="control">
<li><a href="#first" class="b1">First COntnet</a></li>
<li><a href="#second" class="b2">Second COntnet</a></li>
<li><a href="#second" class="b3">Third COntnet</a></li>
</ul>
<div class="full">
<div class="b1">
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
</div>
<div class="b2">
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
Second content<br/>
</div>
<div class="b3">
First Content3<br/>
First Content3<br/>
First Content3<br/>
First Content3<br/>
First Content3<br/>
First Content3<br/>
First Content3<br/>
First Content3<br/>
First Content<br/>
First Content<br/>
First Content<br/>
First Content<br/>
</div>
</div>

js:
$(document).ready(function(){
$('.full > div').css('display','none'); //все дивы в  нутри обшего  делаються невидиыми.
$('.full div:first').css('display','block'); //Первй див делаетьсяв видимым.
var curr = $('.full div:first').get(0).className.toString().substr(1,1); //номер видимого элемента.
var a; //переменная будет хранить норме управляюшей ссылки и блока
    $('ul.control a').click(function(){ //функция для события clik по управляюше ссылке.
        a=this.className.toString().substr(1,1);  //определяеться номер управляющей ссылки.
        if (a != curr){        // сравние номер управлюшей ссыли с номер видимого блока.
            $('div.b'+curr).fadeOut("slow", function(){ //Анимация исчезновние видимого блока.
                $('div.b'+a).fadeIn("slow"); //Анимация появления  нового блока.
                curr = a; //записываеть номер текущего видимого блока.
                });
            }
        });
});

Смысл такой: для каждой упраляюшей ссылки создаеться блок с таким же класом как сама ссылка.
В начале в перменную curr записываем номер видимого блока.
var curr = $('.full div:first').get(0).className.toString().substr(1,1);

$('.full div:first') - берем первый див, так как выше мы первый див сделали видимым.
.get(0) - обращаемся к индивидуальному элементу.
.className - определяем класс
.toString() - преобразуем полученное в строку
.substr(1,1)- режем. так как классы у нас b1 b2 b3 .. , то береем последний символ, что являеться номером управляющей ссылки и номером дива.
далее идет отслеживание клика по ссылкам в спсике .controls. При срабатывании етого события - опредляем номер управляюшей сылки по кторой произошел клик, сравниваем с номером видимого элемента, если равно - то ничгео не делаем. ( ето нужно для того чтобы если элемент уже видим, не скрывать и не показывать ето заного).
Если не равны - происходит анимация исчезновения текшего видимого блока,
анимация появления новго блока ( его номер - ето номер упрвляюшей ссылки по кторой произошол клик), и запись в переменную curr номер текущего видимого блока. (то есть номер упрвляюшей ссылки по кторой произошол клик).


Теперь чтобы довбать еше один блок, следует просто в обший блок (.full) добавить блок с классом bn , где n - следуюший номер блока. (b1 b2 b3 b4 b5...)
и в списко control добвать еше одну ссылку с таким же классом.


Пример
Анимация появления и исчезновения может быть различная, все завсит только от вашей фантазии. В примере завтра выложу несколько вариантов.

cкачать можно тут
Автор: Я
Для: html.by
Зачем?: просто интересно, тем более ето поплуряная тема :)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
forest69
forest69
сообщение 17.1.2010, 23:10; Ответить: forest69
Сообщение #2


молодец! полезная вещь!

Я так понимаю это аккордион?
Подобная вещь есть в Dreamweaver'e, но минус то, что много css. Этот вариант намного лучше и настраивать мона больше

За пост 5++
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MaxiumofmaX
MaxiumofmaX
сообщение 18.1.2010, 23:14; Ответить: MaxiumofmaX
Сообщение #3


а можно блок с меняющимся содержимым грузился из отдельного файла?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
Topic Starter сообщение 19.1.2010, 0:05; Ответить: Letmetouchyou
Сообщение #4


MaxiumofmaX
Блоки с подгружаемым соержанием
js:
$(document).ready(function(){
var curr=1;
$('.full div').load(curr+'.html'); //заргужаем в див .full файл 1.html
var a; //переменная будет хранить норме управляюшей ссылки и блока
    $('ul.control a').click(function(){ //функция для события clik по управляюше ссылке.
        a=this.className.toString().substr(1,1);  //определяеться номер управляющей ссылки.
        if (a != curr){        // сравние номер управлюшей ссыли с номер текушего блока.
            $('.full div').fadeOut("slow", function(){ //Анимация исчезновние видимого блока.
                $('.full div').load(a+'.html', function() { //загрузка из файла ногво содержания
                                    $('.full div').fadeIn("slow");//Анимация появления  нового блока.
                                    });
                curr = a; //записываеть номер текущего видимого блока.
                });
            }
        });
});
html:
<ul class="control">
<li><a href="#first" class="b1">First </a></li>
<li>::</li>
<li><a href="#second" class="b2">Second </a></li>
<li>::</li>
<li><a href="#second" class="b3">Third </a></li>
</ul>
<div class="full" >
<div align="left">
</div>
</div>

для работоспособности тут ксс ненуден :)
файлы которые загружаться должны назвать 1.html, 2.html, 3.html (ето нужно чтобы для тоо чтобы дваоть еше один файл, следует просто его создать и сделать для него управляюшуу ссылку, что в данном сулчае представляет из себя просто сылка ( тэг <a> ) в списке ( <ul> ) класса .control; )
вместо таких файлов может быть и txt документ. ТОлько тогда следует заменить ".htm" на ".txt" в коде.


load( url, [data], [callback] ) - Загружает HTML из файла URL и вставляет его в содержимое в определенный объект WEB-страницы.


url - адрес страницы содержимое которой надо загрузить
[data] - необязательный параметр, данные которые надо передать загружаемой странице(в форме массива). По умолчанию (без [data]) выполняется как GET-запрос, однако, если будут переданы данные, выполнится как POST-запрос.
[callback] - функция, которая будет запущена когда данные буду подгружены.

Пример тут, скачать тут

завтра покажу как избавить от мерцания при изменеии контейнера :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
happyhand
happyhand
сообщение 20.1.2010, 17:21; Ответить: happyhand
Сообщение #5


А как организовать вывод сообщения типа "Включите JavaScript" при выключенном JS при клике на кликабельном месте, а то вся эта прелесть не работает, если выключен JS?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
Topic Starter сообщение 20.1.2010, 17:38; Ответить: Letmetouchyou
Сообщение #6


Контейнер <NOSCRIPT> показывает свое содержимое, если браузер не поддерживает работу со скриптами или их поддержка отключена пользователем. В остальных случаях браузер игнорирует этот тег и все, что располагается внутри него.
<html>
<head>
<script type="text/javascript">
alert("Hello, world!")
</script>
</head>
<body>

<noscript><p>Ваш браузер не поддерживает скрипты!</p></noscript>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MaxiumofmaX
MaxiumofmaX
сообщение 20.1.2010, 21:24; Ответить: MaxiumofmaX
Сообщение #7


Letmetouchyou,вообще есть смысл реализовывать переход по контенту сайта такими методами? или есть какие-нибудь подводные камни? или что-нибудь получше?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
Topic Starter сообщение 20.1.2010, 21:36; Ответить: Letmetouchyou
Сообщение #8


MaxiumofmaX, что значит переход по конетнтк ? это обычные блоки, которуые могут содержать любую информацию
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MaxiumofmaX
MaxiumofmaX
сообщение 20.1.2010, 22:09; Ответить: MaxiumofmaX
Сообщение #9


<ul class="control">
<li><a href="#first" class="b1">First </a></li>
<li>::</li>
<li><a href="#second" class="b2">Second </a></li>
<li>::</li>
<li><a href="#second" class="b3">Third </a></li>
</ul>
такс а как мне для каждого <а> задать свой класс который прописан в css если тут и так классы b1, b2, b3

и можно ли как-нибудь имена файлов сделать не 1 2 3 и тд?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
Topic Starter сообщение 20.1.2010, 22:15; Ответить: Letmetouchyou
Сообщение #10


так ето в ксс и используй.
или делай два класса
<a href="#" class="b1 links">qwe</a>

links - еше один класс для ссылки
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
4 страниц V   1 2 3 4 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Продам места под сквозные блоки на СМИ сайте
текст или графика
0 seo_vladimir 762 2.9.2020, 12:14
автор: seo_vladimir
Открытая тема (нет новых ответов) Не могу выровнять блоки по правую сторону
1 Dark_Delphin 5902 18.11.2016, 0:14
автор: -Петр Чирнов-
Открытая тема (нет новых ответов) При уменьшении масштаба разъезжаются блоки
0 Alex.Bulgakov 3474 9.11.2016, 15:28
автор: -Alex.Bulgakov-
Открытая тема (нет новых ответов) Как поднять блоки вверх
2 Denis_sf 12868 21.11.2013, 22:32
автор: -hennessy-
Открытая тема (нет новых ответов) Сайт расползается на блоки при смене размера шрифта
3 datenrettung 5613 26.2.2013, 22:16
автор: -Arks-


 



RSS Текстовая версия Сейчас: 28.3.2024, 16:35
Дизайн