4

jquery tabslideout プラグインを使用しています。それは問題なく動作しますが、tabslideout プラグインがいつスライドインおよびスライドアウトするかを検出したいと考えています。検出できれば、別のルーチンを呼び出すことができます。tabslideout div スライドインとスライドアウトのタイミングをキャプチャする方法を決定するためのアイデアは頭に浮かびません。だから私を導いてください。ありがとう

ここに私のコードがあります

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

<script type="text/javascript">
$(function(){
$('.slide-out-div').tabSlideOut({
    tabHandle: '.handle',                     //class of the element that will become your tab
    pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
    imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
    imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
    tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
    speed: 300,                               //speed of animation
    action: 'click',                          //options: 'click' or 'hover', action to trigger animation
    topPos: '200px',                          //position from the top/ use if tabLocation is left or right
    leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
    fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
});

});

</script>

<style type="text/css">
.slide-out-div {
  padding: 20px;
  width: 250px;
  background: #ccc;
  border: 1px solid #29216d;
 }      
 </style>

 <div class="slide-out-div">
    <a class="handle" href="http://link-for-non-js-users.html">Content</a>
    <h3>Contact me</h3>
    <p>Thanks for checking out my jQuery plugin, I hope you find this useful.
    </p>
    <p>This can be a form to submit feedback, or contact info</p>
 </div>
4

1 に答える 1

8

プラグインはそれが発生したことを通知する方法はありませんが、プラグインを変更して通知できるようにしました.

プラグインに対する私の変更は、アニメーションの完了後に実行するコールバック関数 (オプションで提供できます) を追加することでした。

ここに例があります

唯一の変更点は、スライドインまたはスライドアウトしたときに呼び出す関数を提供することです。そのようです

$(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //class of the element that will become your tab
            pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
            imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
            imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
            tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of animation
            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '200px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
            fixedPosition: false,                      //options: true makes it stick(fixed position) on scroll
            onSlideOut: function() {
                alert('Opened');
            },
            onSlideIn: function() {
                alert('Closed');
            }
        });

    });

JsFiddle で変更したバージョンを使用する必要があることに注意してください。

お役に立てれば

アップデート

Op は、プラグインへの私の変更に関する詳細情報を要求しました。

最初に、空の関数である 2 つの新しいプロパティをデフォルト設定に追加しました。

onSlideOut: function() {},
onSlideIn:  function() {}

次に、その値をコード内の animate メソッドのコールバックに入れます。

//Square Bracket for emphasis only
obj.animate({top:'-' + properties.containerHeight}, settings.speed,[settings.onSlideIn]).removeClass('open'); 
obj.animate({top:'-3px'},  settings.speed,[settings.onSlideOut]).addClass('open');

その後、ユーザーはメソッドの独自の実装を提供して、デフォルトをオーバーライドできます。

コードを処理するためにより多くのフックが必要な場合は、コールバックを使用する代わりに、カスタム イベントの発生とリッスンを検討することを検討してください。

于 2012-12-20T15:58:16.783 に答える