今日のスペシャル：これはどのように行われますか？それを行うjqueryプラグインまたは製品はありますか？

Question

このテクニックは、Webページの下部にあり、TABはページの下部に配置されていて、詳細情報を表示するために開閉できます。私は別の日に別の特別なものを表示するために回転させることができると仮定します。それを好きなものに教えたり、テクニックを説明したりできますか？ありがとう。ここにサンプルがあります：http://www.tmdhosting.com/ページの下部を見てください。

Answer 1

position: fixedは、スクロールするかどうかに関係なく、ページの下部または上部に何かを保持する方法です。

これは、放火犯の（http://getfirebug.com/）を使用して、容易に発見であるが、要素の機能

Answer 2

を検査あなたはuxspoke.com

でこのの私のバージョンをチェックアウトすることができ、私はそれを行うためのjQueryプラグインを書きました、

$('#about').pulloutPanel({open:true}). 
    click(function() { $(this).trigger('toggle'); }) }); 

私は基本的にパネルを "オープン"、 "クローズ"イベントをサポートし、それらの周りの適切なアニメーションを実装するために使います。唯一の "難しい"部分は、高さを正しく得ることです。また、「トグル」もサポートしているので、一般的なクリックハンドラを追加して開くか閉じることができます。最後に、開いた/閉じたクラスを使用して、現在の状態を追跡します。それでおしまい！

コードは、ページ（Csster）の技術と結びついていて、それが入っているデザインなので、うまくいくとは思えません。 Cssterを使うか、スタイルシートにCSSルールを入れてコードから削除するだけです。重要なCss属性は、位置と底である。ここで

ことです：

$.fn.pulloutPanel = function(options) { 

    var settings = $.extend({}, { 
     attachTo: 'bottom', 
     css: { 
     left: 0, 
     minHeight: 390, 
     border: '1px 1px 1px 0 solid #666', 
     has: [roundedCorners('tr', 10),boxShadow([0,0], 10, phaseToColor('requirements').saturate(-30).darken(50))], 
     cursor: 'pointer' 
    }, options); 

    return $(this).each(function() { 
     var $this = $(this); 

     $this.addClass('pullout_panel'); 

     $this.bind('open', function(event) { 
      $this.animate({bottom: 0}, 'slow', 'easeOutBounce', function() { 
       $this.removeClass('closed').addClass('opened'); 
       $this.trigger('opened'); 
      }); 
     }); 
     $this.bind('close', function(event) { 
      var height = $this.innerHeight(); 
      $this.animate({bottom: -height + 50}, 'slow', 'easeOutBounce', function() { 
       $this.addClass('closed').removeClass('opened'); 
       $this.trigger('closed'); 
      }); 
     }); 
     $this.bind('toggle', function(event) { 
      $this.trigger($this.hasClass('opened') ? 'close' : 'open'); 
     }); 

     once(function() { 
      Csster.style({ 
       '.pullout_panel': { 
        position: 'fixed', 
        bottom: 0, 
        has: [settings.css] 
       } 
      }); 
     }); 

     $this.trigger(settings.open ? 'open' : 'close'); 

    }); 
};