1

私は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>

例として、クラス li class="false" を設定し、「スライド」ごとに 2 つの li タグを設定できるのではないかと考えました (x が true の場合は 1 つを表示し、そうでない場合はもう 1 つを表示します)。

したがって、これが理にかなっているのかどうかはわかりませんが、ほとんどの場合、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;

   })

 }
}
4

1 に答える 1

1

タブの色だけを変更したい場合は、このcssを使用してください

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

実際にタブを無効にしたい場合は、もう少し手間がかかります。この機能を組み合わせて、特定のタブを有効または無効にします。この関数を付与すると、そのタブのハッシュタグ機能が壊れ、そのパネルを対象とするキーボードやスクリプトが無効になることはありません。プラグインにいくつかの変更を加える必要があります（デモ）。

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);

    1つしかない場合は、この短い変数が機能します

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

  • 次のようにタブを無効にします。

    settab(3, false);

  • 次のようにタブを有効にします。

    settab(3, true);
于 2010-10-26T18:45:22.733 に答える