Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Уникальный аккордеон с использованием CSS и jQuery
Уникальный аккордеон с использованием CSS и jQuery
footballmasterДата: Понедельник, 18.10.2010, 20:24 | Сообщение # 1
Спикер
Группа: Пользователи
Пользователь №: 191
Сообщений: 207
Награды: 9
Репутация: 43
Статус: оффлайн
Очень красивый и стильный аккордеон для ucoz.
Демо

Установка:

Стили <head> и </head> :

Code
<style type="text/css">
h2.acc_trigger {
       padding: 0;    margin: 0 0 5px 0;
       background: url(http://img716.imageshack.us/img716/2182/h2triggera.gif) no-repeat;
       height: 46px;    line-height: 46px;
       width: 500px;
       font-size: 2em;
       font-weight: normal;
       float: left;
}
h2.acc_trigger a {
       color: #fff;
       text-decoration: none;
       display: block;
       padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
       color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
       margin: 0 0 5px; padding: 0;
       overflow: hidden;
       font-size: 1.2em;
       width: 500px;
       clear: both;
       background: #f0f0f0;
       border: 1px solid #d6d6d6;
       -webkit-border-bottom-right-radius: 5px;
       -webkit-border-bottom-left-radius: 5px;
       -moz-border-radius-bottomright: 5px;
       -moz-border-radius-bottomleft: 5px;
       border-bottom-right-radius: 5px;
       border-bottom-left-radius: 5px;
}
.acc_container .block {
       padding: 20px;
}
</syle>

Оживляем с помощью jQuery. Вставляем это между <head> и </head> :

Code
<script type="text/javascript">
$(document).ready(function(){
             
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
       if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
        $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
       }
       return false; //Prevent the browser jump to the link anchor
});

});
</script>

Аккордеон активируется с помощью этого кода:

Code
<div class="container">

       <h2 class="acc_trigger"><a href="#">Ваш текст</a></h2>
       <div class="acc_container">
        <div class="block">
         <h3>Ваш текст</h3>
         <a href="ссылка"><img src="картинка" alt="" /></a>
         <p>Ваш текст </p>
        </div>
       </div>
</div>

Оцениваем и комментируем. Скрипт от: footballmaster эксклюзивно для MVC



Кто хочет заказать у меня дизайн сайта стучите в Skype: alexandru_lampard ; ICQ: 614017088


Сообщение отредактировал footballmaster - Понедельник, 18.10.2010, 20:34
 
вверх
cechДата: Понедельник, 18.10.2010, 21:35 | Сообщение # 2
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
footballmaster, всмысле ты сам его написал полностью?) на демо явно баг какой то вправо аккордеон уходит, при раскрытии)


 
вверх
footballmasterДата: Понедельник, 18.10.2010, 21:47 | Сообщение # 3
Спикер
Группа: Пользователи
Пользователь №: 191
Сообщений: 207
Награды: 9
Репутация: 43
Статус: оффлайн
cech, Сделай скрин а-то у меня всё норм)

Добавлено (18.10.2010, 21:47)
---------------------------------------------
Если ты имеешь в виду ширину аккордеона то это можно исправить.
Нужно вместо "width: 500px;" вставить "width: 498px;" или другое значение.
То-есть укоротить ширину



Кто хочет заказать у меня дизайн сайта стучите в Skype: alexandru_lampard ; ICQ: 614017088


Сообщение отредактировал footballmaster - Понедельник, 18.10.2010, 21:49
 
вверх
cechДата: Вторник, 19.10.2010, 00:28 | Сообщение # 4
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
footballmaster, да все я знаю как делается, ты че?)) я имею ввиду баг вот такой

Происходит при открытии нижнего, это Опера)



 
вверх
GoLeodorДата: Вторник, 19.10.2010, 14:24 | Сообщение # 5
Болтун
Группа: Пользователи
Пользователь №: 244
Сообщений: 85
Награды: 1
Репутация: 0
Статус: оффлайн
А у меня все норм!


Я Никита, обычный парень
 
вверх
footballmasterДата: Вторник, 19.10.2010, 17:50 | Сообщение # 6
Спикер
Группа: Пользователи
Пользователь №: 191
Сообщений: 207
Награды: 9
Репутация: 43
Статус: оффлайн
cech, Это у тех у кого не подключён jQuery. Поставь этот код в <body> и аккордеон будет работать

Code
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

На uCoz-e аккордеон работает и без этого кода.



Кто хочет заказать у меня дизайн сайта стучите в Skype: alexandru_lampard ; ICQ: 614017088
 
вверх
cechДата: Вторник, 19.10.2010, 19:08 | Сообщение # 7
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
footballmaster, пхах накой мне этот аккордеон, этот скрин с твоего демо!) И Jquery подключать в uCoz не нужно, т.к. уже есть автоматом)


 
вверх
ELYSIUMДата: Среда, 20.10.2010, 14:38 | Сообщение # 8
Говорун
Группа: Пользователи
Пользователь №: 16
Сообщений: 55
Награды: 0
Репутация: 2
Статус: оффлайн
cech, я заметил с Оперой давно что то не то, например твой форум у меня все кнопки смещаются в правую сторону, на некоторых сайтах таких как мэйл почта, в Опере ужас что творится))) не знаю с чем это связанно, или сайт пс-аватар к примеру у меня Опера последняя стоит и у друга тоже, так у него всё норм показывает, а у меня всё разъежается, хотя Опера у нас с ним одинаковая......

Добавлено (20.10.2010, 14:38)
---------------------------------------------
Так же пробывал сервис броузершот, так там вообще другие глюки.... biggrin


Реклама запрещена!
 
вверх
cechДата: Среда, 20.10.2010, 16:38 | Сообщение # 9
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
ELYSIUM, Последняя опера как раз таки самое то, если в ней отображается что-то не так значит код не правильный и точно есть где то ошибка.


 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Уникальный аккордеон с использованием CSS и jQuery
  • Страница 1 из 1
  • 1
Поиск: