AngularJSでディレクティブを介してツールチップを実装していますが、要素の座標を取得できません。ツールチップが表示されたら、その位置の座標を取得し、位置に応じて表示したいと思います。
'use strict';
var utility = angular.module("utility", []);
utility.directive("tooltip", function () {
var directive = {};
directive.restrict = 'A';
directive.transclude = true;
directive.link = function ($scope, element, attributes) {
element.html("This is the new content: ");
element.bind('mouseenter', createDiv);
element.bind('mouseleave', destroyDiv);
function createDiv() {
//need the coordinate of the pointer to display div on hover of attribute.
var divTag = document.createElement("div");
var toolTipHtml;
divTag.id = "divToolTip";
divTag.setAttribute("align", "center");
//divTag.style.border = "1px solid #ccc";
divTag.style.zIndex = "999";
divTag.style.position = "absolute"
divTag.style.width = "200px";
divTag.style.height = "115px";
toolTipHtml = "<div style=\" opacity:0.8; border-bottom:15px solid #000; border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0; \"></div>"
toolTipHtml += "<div style = \"background-color:black; opacity:0.8; border: 1px solid #F11; width:98%; height:95%; -webkit-border-radius:20px; position:relative;\">";
toolTipHtml += "<div style=\" width:96%; height:10px; margin-top:15px;\"> <div style=\" float:left; width:90%; height:9px;\"></div> <div style=\" float:left; width:10%\"> <img src=\"./img/close.png\" alt=\"HTML Tutorial\"/> </div> </div>";
toolTipHtml += "<div style=\"float:left; width:150px;\"/> " + $scope.toolTipData.message + "</div>";
toolTipHtml += "</div>";
divTag.innerHTML = toolTipHtml;
element.append(divTag);
}
function destroyDiv() {
var divTag = document.getElementById("divToolTip");
divTag.remove();
}
}
directive.scope = true;
return directive;
});
angle.elementはjQuery互換のAPIです。
jQueryライブラリがページに含まれている場合、実際にはjQueryを使用しますが、これは依存関係ではありません。
jQueryのイベントハンドラーの最初の引数はイベントオブジェクトであるため、その引数をイベントハンドラー関数に渡す必要があります。そうすれば、座標にアクセスできます。
function createDiv(event){
var pageX = event.pageX,
pageY = event.pageY;
/* your existing code */
}
また、これを使用して、新しい要素を作成および操作することもできます。
var divTag = angular.element('<div>');
divTag.css({zIndex:999, position:'absolute', width: 200, height: 115});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加