AnythingSlider: сделать вкладки Nav неактивными? - PullRequest
Новая
       6

AnythingSlider: сделать вкладки Nav неактивными?

1 голос
/ 26 октября 2010

Я использую инструмент AnythingSlider и у меня возникли проблемы с CSS и JS по этому вопросу.По сути, слайдер имеет несколько навигационных вкладок, которые помогают переходить от слайда к слайду.Я хочу изменить это так, чтобы при выполнении условного запуска Coldfusion некоторые вкладки либо оставались в состоянии по умолчанию, либо становились неактивными (измените цвет вкладки на серый, чтобы при щелчке пользователя по этой вкладке ничего не происходило)

В общем, мой CF будет примерно таким: 

<cfif #X# is ""> //if true, make tab #2 not clickable, change color to grey
                 //else, if false, keep tab normal.

Слайдер в основном настроен на html следующим образом: 

<ul>
    <li></li>  //slide #1
    <li></li>  //slide #2  etc etc
</ul>

У меня была идея, что, возможно, я мог бы настроитьclass li class = "false" в качестве примера и иметь два тега li на каждый слайд (показать один, если x равен true, другой - если нет.)

Итак, я не уверен, имеет ли это смыслно в основном мне нужна рука, манипулирующая CSS.Код для вкладок слайдера выглядит следующим образом: 

div.anythingSlider.activeSlider .thumbNav a.cur, div.anythingSlider.activeSlider .thumbNav a {
    background-color: #7C9127;
}

ОБНОВЛЕНИЕ Ну, я не понимаю.Это код в конце моей страницы (непосредственно перед завершением тега BODY. Я добавил туда несколько предупреждений, чтобы убедиться, что код работает и работает. Но ничего не происходит. Вкладки не становятся неактивными, а цвет никогда не меняется.

Я изменил anythingslider.css, чтобы включить это: 

div.anythingSlider.activeSlider .thumbNav a.false,
            div.anythingSlider.activeSlider .thumbNav a.false:hover { background: #555; }

, и это в нижней части моей главной страницы. Этот скрипт обернут в некоторые теги cfoutput: 

    <cfif #selected_main_details.X# IS "">
        settab(3, false);
    <cfelse>
        settab(3, true);
    </cfif>

function settab(num, enable){
 var panel = $('.thumbNav a.panel' + num);
 if (enable){
  panel
   .removeClass('false')
   .unbind('click')
   .bind('click', function(){
    panel.closest('.anythingSlider').find('.anythingBase').data('AnythingSlider').gotoPage(num);
    return false;

   })
 } else {

  panel
   .addClass('false')
   .unbind('click focusin')
   .bind('click', function(){                     
    return false;

   })

 }
}

1 Ответ

1 голос
/ 26 октября 2010

Если вы хотите просто изменить цвет вкладки, используйте эту CSS 

div.anythingSlider.activeSlider .thumbNav a.false,
div.anythingSlider.activeSlider .thumbNav a.false:hover { background: #555; }

Это немного больше работы, если вы действительно хотите отключить вкладку. Я собрал эту функцию, чтобы включить или отключить конкретную вкладку. Конечно, эта функция нарушит функциональность хэш-тега для этой вкладки и не отключит клавиатуру или любой скрипт, предназначенный для этой панели - это потребует некоторых изменений в плагине ( Demo ). 

function settab(num, enable){
 var panel = $('.thumbNav a.panel' + num);
 if (enable){
  panel
   .removeClass('false')
   .unbind('click')
   .bind('click', function(){
    panel.closest('.anythingSlider').find('.anythingBase').data('AnythingSlider').gotoPage(num);
    return false;
   })
 } else {
  panel
   .addClass('false')
   .unbind('click focusin')
   .bind('click', function(){
    return false;
   })
 }
}

Используйте вышеуказанную функцию следующим образом

  • Если у вас есть более одного AnythingSlider на странице, тогда переменная панели должна быть определена следующим образом с #slider, предназначенным для конкретного ползунка: 

    var panel = $('#slider').closest('.anythingSlider').find('.thumbNav a.panel' + num);

    если есть только один, тогда эта более короткая переменная будет работать 

    var panel = $('.thumbNav a.panel' + num);

  • Отключить вкладку следующим образом: 

    settab(3, false);

  • Включите вкладку следующим образом: 

    settab(3, true);
...