2011-12-22 8 views
0

次のスクリプトを使用して、閉じるボタンをクリックするとツールチップを閉じます。エスケープボタンをクリックしても、私のツールチップを閉じる必要があります。どのように関数を書くことができます。ここで私が使った機能があります。close jqueryのツールヒントon esc

<script type="text/javascript"> 

// SuperNote setup: Declare a new SuperNote object and pass the name used to 
// identify notes in the document, and a config variable hash if you want to 
// override any default settings. 

var supernote = new SuperNote('supernote', {}); 

// Available config options are: 
//allowNesting: true/false // Whether to allow triggers within triggers. 
//cssProp: 'visibility'  // CSS property used to show/hide notes and values. 
//cssVis: 'inherit' 
//cssHid: 'hidden' 
//IESelectBoxFix: true/false // Enables the IFRAME select-box-covering fix. 
//showDelay: 0    // Millisecond delays. 
//hideDelay: 500 
//animInSpeed: 0.1   // Animation speeds, from 0.0 to 1.0; 1.0 disables. 
//animOutSpeed: 0.1 

// You can pass several to your "new SuperNote()" command like so: 
//{ name: value, name2: value2, name3: value3 } 


// All the script from this point on is optional! 

// Optional animation setup: passed element and 0.0-1.0 animation progress. 
// You can have as many custom animations in a note object as you want. 
function animFade(ref, counter) 
{ 
//counter = Math.min(counter, 0.9); // Uncomment to make notes translucent. 
var f = ref.filters, done = (counter == 1); 
if (f) 
{ 
    if (!done && ref.style.filter.indexOf("alpha") == -1) 
    ref.style.filter += ' alpha(opacity=' + (counter * 100) + ')'; 
    else if (f.length && f.alpha) with (f.alpha) 
    { 
    if (done) enabled = false; 
    else { opacity = (counter * 100); enabled=true } 
    } 
} 
else ref.style.opacity = ref.style.MozOpacity = counter*0.999; 
}; 
supernote.animations[supernote.animations.length] = animFade; 



// Optional custom note "close" button handler extension used in this example. 
// This picks up click on CLASS="note-close" elements within CLASS="snb-pinned" 
// notes, and closes the note when they are clicked. 
// It can be deleted if you're not using it. 
addEvent(document, 'click', function(evt) 
{ 
var elm = evt.target || evt.srcElement, closeBtn, note; 

while (elm) 
{ 
    if ((/note-close/).test(elm.className)) closeBtn = elm; 
    if ((/snb-pinned/).test(elm.className)) { note = elm; break } 
    elm = elm.parentNode; 
} 

if (closeBtn && note) 
{ 
    var noteData = note.id.match(/([a-z_\-0-9]+)-note-([a-z_\-0-9]+)/i); 
    for (var i = 0; i < SuperNote.instances.length; i++) 
    if (SuperNote.instances[i].myName == noteData[1]) 
    { 
    setTimeout('SuperNote.instances[' + i + '].setVis("' + noteData[2] + 
    '", false, true)', 100); 
    cancelEvent(evt); 
    } 
} 
}); 


// Extending the script: you can capture mouse events on note show and hide. 
// To get a reference to a note, use 'this.notes[noteID]' within a function. 
// It has properties like 'ref' (the note element), 'trigRef' (its trigger), 
// 'click' (whether its shows on click or not), 'visible' and 'animating'. 
addEvent(supernote, 'show', function(noteID) 
{ 
// Do cool stuff here! 
}); 
addEvent(supernote, 'hide', function(noteID) 
{ 
// Do cool stuff here! 
}); 


// If you want draggable notes, feel free to download the "DragResize" script 
// from my website http://www.twinhelix.com -- it's a nice addition :). 

</script> 

答えて

1

文書のキーダウンにバインドして、ESCキーが押されているかどうかを確認できます。次に、コールバック内にツールチップを閉じるカスタムコードを書くことができます。

$(document).bind('keydown', function (event) { 
    if (event.keyCode == 27) { 
    // close the tooltip 
    var note = $('.snb-pinned'); 
    var noteData = note.id.match(/([a-z_\-0-9]+)-note-([a-z_\-0-9]+)/i); 

    for (var i = 0; i < SuperNote.instances.length; i++) 

    if (SuperNote.instances[i].myName == noteData[1]) 
    {  
     setTimeout('SuperNote.instances[' + i + '].setVis("' + noteData[2] + 
     '", false, true)', 100);   
     }  
    } 
    }); 
+0

私はjqueryの初心者です。ツールチップを閉じるためのカスタムコードを提供してください。 – designersvsoft

+0

ちょうど私の答えを編集しました。 – scripto

+0

ありがとうございます。私はあなたのコードを試しました。しかし、まだそれはエスケープで閉じることはありません。 – designersvsoft