jQueryプラグインをまとめてサーバーにクエリを実行し、ツールチップポップアップを表示します。ええ、おそらくもっと良いものがあることは知っていますが、私のモチベーションの半分は自分でそうする方法を学ぶことです。ライブデモはhttp://jsfiddle.net/sVZah/にあり、スクリプトを以下に示します。要素にカーソルを合わせると、開発者がサーバーに送信するデータを追加できるようにしたいと思います。私の考えは、プラグインにgetData（）メソッドを追加することでした（ajaxをシミュレートするためにdemoJSONオブジェクトを渡す必要があるため、jsfiddleの例ではこれを行わないことに注意してください）。問題はthis、メソッド内が最初の要素（つまりp.myElement）ではなくツールチップを参照しているため、元の要素（つまり）に関連付けられたデータにアクセスできないことです。data-id）。getDataメソッド内の元のターゲット要素にアクセスするにはどうすればよいですか？私の一般的なアプローチ全体が理想的ではない場合は、私に知らせて、より良いアプローチをお勧めします。これは非常に多くの学習経験です。
非公式の質問として、要素の右側にホバリングするとポップアップが開始されないようにするにはどうすればよいですか？これはおそらくHTMLの質問であると認識しており、回答は期待していませんが、回答をいただければ幸いです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>screenshot</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.ajaxTip.js" type="text/javascript"></script>
<style type="text/css">
.myElement{margin:100px;}
.ajaxToolActive{color:blue;}
.myAjaxTip {
position:absolute;
border:1px solid #CECECE;
background:white;
padding:10px;
display:none;
color:black;
font-size:11px;-moz-border-radius:4px;
box-shadow: 3px 1px 6px #505050;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
</style>
<script type="text/javascript">
$(function(){
$('.myElement').ajaxTip({
display: function(d){return '<p>'+d.name+'</p><p>'+d.address+'</p><p>'+d.city+', '+d.state+'</p>';},
getData:function(){console.log(this);return {id:123}},
'class':'myAjaxTip'
});
});
</script>
</head>
<body>
<p class="myElement" data-id="1" title="ajaxTip Popup">John Doe</p>
<p class="myElement" data-id="2" title="ajaxTip Popup">Jane Doe</p>
<p class="myElement" data-id="3" title="ajaxTip Popup">Baby Doe</p>
</body>
</html>
/*
* jQuery ajaxTip
* Copyright 2013 Michael Reed
* Dual licensed under the MIT and GPL licenses.
*
* Notes
*/
(function( $ ){
var methods = {
init : function( options ) {
// Create some defaults, extending them with any options that were provided
var settings = $.extend({
'url' : 'getAjaxTip.php', //To include extra data sent to the server, included it in the url
'class' : 'standardAjaxTip',
'mouseMove': true,
'delay' : 250, //miliseconds to delay before requesting data from server
'xOffset' : 20,
'yOffset' : 10,
'dataType' : 'json',
'getData' : function(){return {}}, //Use to set additional data to the server
'display' : function(data){ //User function must include function(data) {... return string}
var string='';
for (var key in data) {string+='<p>'+data[key]+'</p>';}
return string;
}
}, options || {}); //Just in case user doesn't provide options
return this.each(function(){
var showing,title,timeoutID,ajax,$t=$(this),ajaxTip;
$t.hover(function(e) {
if(!showing){
title = this.title;this.title = "";//Prevent title from being displayed,and save for later to put back
timeoutID=window.setTimeout(function() {
ajax=$.get( settings.url,settings.getData(),function(data){
ajaxTip=$('<div />').addClass(settings.class).html(((title != '')?'<h3>'+title+'</h3>':'')+settings.display(data))
.css("top",(e.pageY - settings.yOffset) + "px")
.css("left",(e.pageX + settings.xOffset) + "px")
.appendTo('body').fadeIn("fast");
showing = true;
$t.addClass('ajaxToolActive');
}, settings.dataType);
},settings.delay); //Delay before requesting data from server
}
},
function()
{
//When not hover
if (typeof ajax == 'object') {ajax.abort();}
window.clearTimeout(timeoutID);
this.title = title;
$t.removeClass('ajaxToolActive');
if(showing){ajaxTip.remove();}
showing = false;
});
$t.mousemove(function(e) {
if(settings.mouseMove && showing) {ajaxTip.css("top",(e.pageY - settings.yOffset) + "px").css("left",(e.pageX + settings.xOffset) + "px");}
});
});
},
//Add additional methods as needed
//destroy : function() {}
};
$.fn.ajaxTip = function(method) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.ajaxTip' );
}
};
})( jQuery );