Переключиться справа налево

Используя AlloyUI Toggler, можно ли переключать div справа налево, а не стандартно вниз->вверх? Я проверил Toggler API, но не нашел переключателя direction .

Вот мой текущий код Toggler:

new Y.Toggler({
    animated : true,
    closeAllOnExpand : true,
    container : '#mySearchForm',
    content : '.content',
    expanded : false,
    header : '.header',
    transition : {
            duration : 0.2,
            easing : 'cubic-bezier(0, 0.1, 0, 1)'
    }//always toggles from the bottom->up
});

person Clay Banks    schedule 03.09.2014    source источник


Ответы (1)


Чтобы заставить Toggler переключаться по горизонтали, вам нужно сделать 3 вещи:

  1. Примените float: left; ко всем элементам Toggler, чтобы сделать Toggler горизонтальным.
  2. Измените animated: true, на:

    animated: {
        to: { right : '300px' }
    },
    

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

  3. Замените Toggler на TogglerDelegate.

Вот JSFiddle, в котором все это объединено с исходным кодом.

Ознакомьтесь с YUI Anim и Easing для получения более подробной информации о том, как изменять анимацию.

person stiemannkj1    schedule 06.09.2014