VPF::применить функцию к элементу меню

kr3v3tkus

Дата 18.7.2012, 03:06 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 107
Регистрация: 8.3.2008

Репутация: нет
Всего: 1

заранее пардон - не знал куда постить, сюда или в css, вобщем:
есть 5 элементов в менюхе, они раскрываются в меню, как сделать, чтобы один из них был раскрыт сразу?

Код


<script type="text/javascript">
$().ready(function() {
    $('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad', complete: 'callback'});
    });
</script>

Код


<div class="jimgMenu">
  <ul>
    <li id="landscapes"><a href="#">Landscapes</a></li>
    <li id="people"><a href="#">People</a></li>
    <li id="nature"><a href="#">Nature</a></li>
    <li id="abstract"><a href="#">Abstract</a></li>
    <li id="urban"><a href="#">Urban</a></li>
  </ul>
</div>



The CSS is adapted slightly for kwicks
.jimgMenu {
    position:relative;
    margin: 0px 0px 0px 50px;
    padding: 0px;
    width:475px;
    height:200px;
    overflow: hidden;
}
.jimgMenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: block;
    height: 200px;
    position: relative;
    }    
.jimgMenu ul li {
    width: 95px;
    float: left;
    display: block;
    overflow: hidden;
}
.jimgMenu ul li a {
    text-indent: -1000px;
    background:#fff repeat scroll 0%;
    border-right: 2px solid #fff;
    cursor:pointer;
    display:block;
    overflow: hidden;
    height: 200px;
}
.jimgMenu ul li#landscapes a {
    background: url(images/landscapes.jpg) repeat scroll 0%; 
}
.jimgMenu ul li#people a {
    background: url(images/people.jpg) repeat scroll 0%;
}

.jimgMenu ul li#nature a {
    background: url(images/nature.jpg) repeat scroll 0%; 
}
.jimgMenu ul li#abstract a {
    background: url(images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li#urban a {
    background: url(images/urban.jpg) repeat scroll 0%;
    border-right-style: none;
}

Aliance

Дата 18.7.2012, 11:15 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Как вариант имитировать событие onmouseover для первого элемента:

Код


$(function(){
    $('ul li:first').trigger('mouseover');
});

Здесь обсуждали аналогичную тему.

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

kr3v3tkus

Дата 18.7.2012, 12:19 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 107
Регистрация: 8.3.2008

Репутация: нет
Всего: 1

спасибо!

kr3v3tkus

Дата 18.7.2012, 13:15 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 107
Регистрация: 8.3.2008

Репутация: нет
Всего: 1

эмм, что-то не подумал - а можно убрать процедуру свёртывания обратно гармошки? дс, к сожалению, не знаю, думал свёртывает

Код


easing: 'easeOutQuad'

но, видимо, это процедура плавного закрытия?
В примере последняя часть гармошки не закрывается - подскажите, что за процедура скидывает её?

Код


<script type="text/javascript">
$(document).ready(function () {
  // find the elements to be eased and hook the hover event
  $('div.jimgMenu ul li a').hover(function() {    
    // if the element is currently being animated
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad", complete: "callback"});
    } else {
      // ease in quickly
      $(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad", complete: "callback"});
    }
  }, function () {
    // on hovering out, ease the element out
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad", complete: "callback"})
    } else {
      // ease out slowly
      $(this).stop(':animated').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad", complete: "callback"});
    }
  });
});
</script>

в самом начале последняя часть гармошки ставится, видимо, в css

Код


.jimgMenu ul li#nature a {
    background: url(images/nature.jpg) repeat scroll 40%;
    min-width:310px;
}

Добавлено через 7 минут и 48 секунд
зы
наверно можно так же как и

Код


$(function(){
    $('ul li:first').trigger('mouseover');
});

применить процедуру раскрытия, только на mouseout и не на первый, а текущий? только как узнать текущий и повесить на него?

Aliance

Дата 18.7.2012, 13:28 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

В примере последний раскрыт - т.к. в аккордионе всегда должен быть открыт хотя бы один, по умолчанию это последний в этой скрипте видимо. Если вызвать триггер на первом - последний будет закрыт.
В чем еще вопрос не понимаю.

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

kr3v3tkus

Дата 18.7.2012, 13:55 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 107
Регистрация: 8.3.2008

Репутация: нет
Всего: 1

эту гармошку я для примера привёл C: конкретно - есть 5 одинаковых сегментов гармошки, после имитации onmouseover - один из элементов раскрывается (ну допустим у меня это средний), нужно, чтобы при уходе мыши с элемента (на котором был фокус мыши) он так и оставался раскрытым, а остальные сжатые. сейчас же у меня после наведения и снятия фокуса все 5 сегментов принимают исходные равные по длине позиции (каждый по 200px).

Это сообщение отредактировал(а) kr3v3tkus - 18.7.2012, 13:56

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »