3

Web サイトのユーザーにスクロール可能な (水平) コンテンツを提供するために、jQuery 用の jCarousel プラグインを使用しようとしています。

私が言及しているコンテンツは、基本的にユーザー定義<li>の要素であり、タブの感触と外観を持つようにスタイル設定されています。基本的に、pageflakes.com のタブと同じ効果を達成しようとしています。ご想像のとおり、ユーザーは自分でタブを作成し、タブ名を提供しています。

jCarousel では、コンテンツの固定幅を指定する必要があります。たとえば、すべての例は、高さと幅が固定された画像に基づいています。しかし、私の場合、ユーザーが自分のタブに何を付けるかを制御できません...合計コンテナdivの幅を推測することは不可能です。

各文字が約5ピクセルであると仮定してプログラムで幅を推測し、タブの名前として指定した単語の長さに5を掛けるなど、ばかげた方法を使用してみました。この場合でも、cssファイルを動的に操作する必要がありましたが、その方法がわからず、実行可能であっても..

どんな解決策も感謝します...

<lu>
<li class='MyTab' id='578'>This is my tab</li>
<li class='MyTab' id='579'>of which I can</li>
<li class='MyTab' id='580'>never guess</li>
<li class='MyTab' id='581'><img src='img/bullet_key.png' /> The length of</li>
</lu>

上記の html は、ajax_tabs_output.aspx を介してプログラムで生成され、javascript 配列に読み込まれ、jCarousel が残りを処理します。

     function outputTabsArray() {
        $.ajax({
            url: 'ajax_tabs_output.aspx', 
            type: 'get', 
            data: 'q=array', 
            async: false, 
            success: function(out) 
                {
                    tabs_array = out;
                } 
            });
            }// end outputTabsArray

        function mycarousel_itemLoadCallback(carousel, state)
        {
            for (var i = carousel.first; i <= carousel.last; i++) {
                if (carousel.has(i)) {
                    continue;
                }

                if (i > tabs_array.length) {
                    break;
                }

                carousel.add(i, mycarousel_getItemHTML(tabs_array[i-1]));
            }
        };

        /**
         * Item html creation helper.
         */
        function mycarousel_getItemHTML(item)
        {
            return '<div class="MyTab" id="' + item.tab_id + "'>" + item.tab_name + '</div>';
        };


            $('#mycarousel').jcarousel({
                size: tabs_array.length,
                itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
        });
4

4 に答える 4

5

あなたが望むものに最も近いのは、おそらくjscrollhorizo​​ntalpaneです。私はそれを使用したことがないので、この特定の問題に対する解決策としての有効性を保証することはできません.

この種のウィジェットは、試してみたい場合に作成するのは難しくありません。私が使用するおおよその方法を分解します。

ラップは多めに使ってください。

<div class="scrollable">
  <div class="window">
    <div class="space">
      <ul class="tabs">
        <li class="tab">...</li>
        <li class="tab">...</li>
        <li class="tab">...</li>
      </ul>
    </div>
  </div>
  <a href="#" class="left">&larr;</a>
  <a href="#" class="right">&rarr;</a>
</div>

これから行うことは、 「 window 」要素内で「 space」要素を前後に移動することです。これは、「window」と 「space」に設定してから、 を使用するようにシフトすることで実行できますが、ここではプロパティを使用します。position:relativeposition:absoluteleft:-??pxscrollLeft

CSS を追加します。

.window {
  overflow : hidden;
  width : 100%;
}
.space {
  width : 999em;      /* lots of space for tabs */
  overflow : hidden;  /* clear floats */
}
.tabs {
  float : left;       /* shrink so we can determine tabs width */
}
.tab {
  float : left;       /* line tabs up */
}

これは、テクニックに必要な基本的なものです。このようなもののいくつかは、jQuery で適用できます。

ウィンドウのサイズ変更にイベントを追加します。

$(window)
  .resize(function () {
    var sz = $('.window');
    var ul = sz.find('ul');
    if ( sz.width() < ul.width() ) {
      $('.scrollable a.left, .scrollable a.right').show();
    }
    else {
      $('.scrollable a.left, .scrollable a.right').hide();
    }
  })
  .trigger('resize');

スクロール ボタンにイベントを追加します。

$('.scrollable a.left').hover(
  function (e) {
    var sz = $('.window');
    sz.animate({ scrollLeft : 0 }, 1000, 'linear');
  },
  function (e) {
    $('.window').stop();
  });

$('.scrollable a.right').hover(
  function (e) {
    var sz = $('.window');
    var margin = sz.find('ul').width() - sz.width();
    sz.animate({ scrollLeft : margin }, 1000, 'linear');
  },
  function (e) {
    $('.window').stop();
  });

終わり！

幅は、「タブ」要素をループして upp を合計することによって計算することもできますouterWidth。これは、完全に制御できる場合は不要ですが、完全なスタンドアロン プラグインの場合はより適切な選択になる可能性があります。

于 2009-01-03T00:44:13.877 に答える
0

探しているのはタブではなく、ドラッグ可能なパネルです。JQuery Portletsと呼ばれる 1 つの例をここで見つけることができます。ポートレットに関する関連ブログ エントリは、ここにあります。

また、 JQuery UIの Draggable、Droppable、および Sortable プラグインを調べることもできます。

于 2008-12-30T07:11:06.747 に答える
0

私が知る限り、あなたは JCarousel に、決して設計されていないことをさせようとしています。JCarousel Web サイトで読んだ内容に基づいて、画像回転子のようです。

あなたが望むように聞こえるのは、タブ付きのインターフェースです。実装方法に関するデモとドキュメントについては、JQuery UI タブを参照してください。

私が完全に間違っていて、あなたが探しているのが適切な CSS タブを行う方法に関するチュートリアルだけである場合は、以下をご覧ください。

http://unraveled.com/projects/css_tabs/

于 2008-12-29T07:22:58.267 に答える
0

ソヴィウト、

あなたは実際にはかなり正しいです！JCarousel に設計されていないことをさせようとしています。

ただし、出力を完全に制御する必要があるため、タブプラグインや同様のものも使用したくありません。ダブルクリック、読み込み、その他多くの要素など、必要に応じてタブに要素を挿入するなど。

実際には、div 内のコンテンツを左右に矢印で水平方向にスクロールする方法を探しています。より正確には、www.pageflakes.comに表示されるタブとまったく同じ構造が必要です。

ユーザーは、リンク (またはその他の要素) をクリックしてタブを作成できます。その名前をインライン編集できます。div の長さよりも多くのタブがある場合はいつでも、ボタンが表示されます。それらが div 内でスライドできるように、イベントをロード、クリック、およびダブルクリック イベントにバインドします。

要約すると、スライド/スクロール部分を除いて、すべての準備ができて機能しています。この機能を実現する方法について、皆さんから助けを得る必要があるのは私だけです..

敬具、

于 2008-12-29T07:47:56.923 に答える