3

私はリストを持っています：

<ul>
   <li><h2>Header</h2><p>Text</p></li>
   <li><h2>Header</h2><p>Text</p></li>
   <li><h2>Header</h2><p>Text</p></li>
</ul>

ヘッダーテキストは、Cufonで生成されたキャンバスとして表示されています。

リストのクローンを作成し、2番目のリストをQuicksandスクリプトの代わりに使用しています。

すべてが期待どおりに機能しますが、並べ替え後にヘッダーは表示されません（ただし、キャンバスはまだそこにあります！）。

それを修正する方法は？

実例：

http://bartekka.ayz.pl/quicksand/

（リンクをクリックするとすべての「CufonTitle」が消えます。Cufon.now（）を削除すると役立ちますが、私のプロジェクトではコードのこの部分が必要なので、これは答えではありません）

4

2 に答える 2

8

これは、Cufon が要素を作成する方法によるものです。常に問題が発生します。私がしていることは、JavaScript とのやり取りの後にテキストを再描画することです。最も簡単な方法はCufon.refresh()、ページ上のすべての cufon アイテムを再描画する を呼び出すことです。または、それらを具体的にターゲットにすることもできます。

これを行うとき、変更するcufonアイテムの初期描画を行う関数を作成する傾向があります. 次に、並べ替え (または何でも) js が完了したら、その関数を思い出すことができます。

HTH :)

コメントに応じて編集

もちろん、心配はいりません :) 使用している並べ替えプラグインにはコールバック機能があるため、次のようにするだけです。

jQuery('.portfolio-sorted').quicksand( cache_list.find('li[data-value=Video]'), {
        duration: 500,
    },
    function(){
        Cufon.refresh();
        // OR Cufon.replace('h2', { fontFamily: 'Quicksand' });
        // OR Cufon.replace($('.portfolio-sorted li h2'), { fontFamily: 'Quicksand' }); 
    });

編集2

そうです - 非常に興味深いものを見つけました。Quicksand にはまさにそのような目的のためのオプションがあります。これを試してみてください (注 - テストを容易にするために、4 つの関数を 1 つに圧縮しました - おそらくこれは使用できるものでしょうか?):

var cache_list = jQuery(this).clone().append('content');
//Add on click event handler to everything at once
  jQuery('ul.portfolio-terms li a').click(function(e) {
  //Call quicksand on the original works_list list(the one visible to the user)
  //pass to it all the 'li' elements from the cached clone 
  //since we want to display them all

  //get the target element based on data value
  var target = 'li[data-value='+$(this).attr('data-value')+']';

  if ($(this).attr('data-value') == "All") {
    target = 'li';
  }

  jQuery('.portfolio-sorted').quicksand( cache_list.find(target), {
          duration: 500,
          enhancement: function() {
                Cufon.refresh();
                // OR Cufon.replace('h2', { fontFamily: 'Quicksand' });
                // OR Cufon.replace($('.portfolio-sorted li h2'), { fontFamily: 'Quicksand' });
              }
  });
  e.preventDefault();
});

それでうまくいくと思います（ChromeとFFでうまくいきます）。呼び出しは、元のenhancement関数に追加する場合に重要です。

成功を祈っている！

于 2011-05-27T12:38:36.863 に答える
0

HTMLを検証します。かなりの数の場所で不明な属性に問題がありdata-idますdata-value。例：<li data-id="1" data-value="Image">

于 2011-05-27T12:29:26.630 に答える