如何在C#中为Calendar WebControl构建强大的工具提示 [英] How to build a power tooltip for Calendar WebControl in C#

问题描述

在那里
我需要在项目中为Calendar WebControls提供自定义的工具提示.当我将鼠标悬停在某一天时，必须显示一个工具提示，其中包含当日将发生的事件的列表，并且我可以更改工具提示的样式，例如背景色，字体等，即使列表中的每个条目也是如此可以是指向相应事件的具体信息页面的超链接.我用谷歌搜索，但是没有合适的工具提示可以满足我的需求.那么关于如何实现这种工具提示的任何想法?谢谢.
希望让自己清楚
最好的问候
Jfhu

Hi, there
I need a customized tooltip for Calendar WebControls in my project. When I hover my mouse on one day, a tooltip must appears with a list of events which will happens on that day, and I could change the style of tooltip such as background color, the font and so on, even every entry in the list can be a hyperlink to corresponding event''s concrete information page. I googled, but no proper tooltip can meet my demand. So any one ideas about how to implement such a tooltip? Thanks.
Hope make myself clear
Best regards
Jfhu

推荐答案

嗨
遵循 Tooltip.css
中的代码

Hi
Following code in Tooltip.css

.tooltip
{
    position: absolute;
    border: 1px solid #8EAACE;
    background: #E9F2FF;
    color: black;
    padding: 3px 3px 3px 3px;
    z-index: 1000;
    display: none;
    font-family: "Trebuchet MS" , Arial, Helvetica, sans-serif;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    overflow: hidden;
    /*height: 50px;
    width: 150px;*/
}
.tooltiptitle
{
    font-weight: bold;
    font-size: 12px;
}
.tooltipdetail
{
    font-size: 11px;
}

Tooltip.js
中的以下代码

following code in Tooltip.js

//In this function you can pass either HTMLText or HTMLObject that you want display in Tooltip
var tooltipID;
var tooltipTitleID = 'dvTooltipTitle'
var tooltipTextID = 'dvTooltipText'
var animationSpeed = 10;
var tooltip;
var tooltipWidth;
var tooltipHeight;
var tooltipShowDelay = 500;  //delay is the number of milliseconds
var tooltipTimer;
var tooltipAnimationTimer;
var isDisplayed = false;
var incrementX = 10;
var incrementY = 10;
function showTooltip(e, containerId, title, text) {
    tooltipID = containerId;
    tooltip = getElement(tooltipID);
    if (typeof title != 'undefined' && title != '') getElement(tooltipTitleID).innerHTML = title;
    if (typeof text != 'undefined' && text != '') getElement(tooltipTextID).innerHTML = text;
    tooltipWidth = parseInt(tooltip.style.width);
    tooltipHeight = parseInt(tooltip.style.height);
    var position = positionTooltip(e);
    tooltipTimer = setTimeout(function () { displayTooltip(position); }, tooltipShowDelay);
}
function displayTooltip(position) {
    clearTimeout(tooltipTimer);
    tooltip.style.left = position.Left + 'px';
    tooltip.style.top = position.Top + 'px';
    //following is for animation
    tooltip.style.height = "0px";
    tooltip.style.width = "0px";
    tooltip.style.display = 'block';
    animateTooltip();
}
function positionTooltip(e) {
    var currentX = (e.x) ? parseInt(e.x) : parseInt(e.clientX);
    var currentY = (e.y) ? parseInt(e.y) : parseInt(e.clientY);
    var mouseX;
    var mouseY;
    var height;
    var width;
    if (typeof (document.documentElement.clientWidth) == 'number') {
        width = document.body.clientWidth;
        height = document.body.clientHeight;
    }
    else {
        width = parseInt(window.innerWidth);
        height = parseInt(window.innerHeight);
    }
    mouseX = ((currentX + tooltipWidth + 10) < width) ? currentX + 10 : mouseX = currentX - tooltipWidth;
    mouseY = ((currentY + tooltipHeight) < height) ? currentY : mouseY = currentY - tooltipHeight - 10;
    if (window.pageYOffset) {
        mouseY = mouseY + window.pageYOffset;
        mouseX = mouseX + window.pageXOffset;
    }
    else {
        mouseY = mouseY + document.body.scrollTop;
        mouseX = mouseX + document.body.scrollLeft;
    }
    return { "Top": mouseY, "Left": mouseX };
}
function hideTooltip(element) {
    clearTimeout(tooltipTimer);
    clearTimeout(tooltipAnimationTimer);
    tooltip.style.width = tooltipWidth + 'px';
    tooltip.style.height = tooltipHeight + 'px';
    tooltip.style.display = 'none';
}
function animateTooltip() {
    var i = parseInt(tooltip.style.width) + incrementX;
    var j = parseInt(tooltip.style.height) + incrementY;
    tooltip.style.width = (i <= tooltipWidth) ? i + "px" : tooltip.style.width = tooltipWidth + "px";
    tooltip.style.height = (j <= tooltipHeight) ? j + "px" : tooltip.style.height = tooltipHeight + "px";
    //Opacity setting
    var maxOriginalSize = Math.max(tooltipWidth, tooltipHeight);
    var maxCurrentSize = Math.max(i, j);
    var opacity = parseInt((100 * maxCurrentSize) / maxOriginalSize);
    setOpacity(tooltip, opacity);
    if (!((i > tooltipWidth) && (j > tooltipHeight)))
        tooltipAnimationTimer = setTimeout("animateTooltip();", animationSpeed);
    else
        clearTimeout(tooltipAnimationTimer);
}
function setOpacity(element, iOpacity) {
    var opacityAsDecimal = iOpacity;
    if (iOpacity > 100)
        iOpacity = opacityAsDecimal = 100;
    else if (iOpacity < 0)
        iOpacity = opacityAsDecimal = 0;
    opacityAsDecimal /= 100;
    if (iOpacity < 1) iOpacity = 1; // IE7 bug, text smoothing cuts out if 0
    element.style.opacity = (opacityAsDecimal);
    element.style.filter = "alpha(opacity=" + iOpacity + ")";
}

common.js
中的以下代码

following code in common.js

function setTooltip() {
    var sPrefix = 'Tooltip.';
    //Getting all the elements from body which are Anchor tag
    var docElemnts = document.getElementsByTagName('a');
    for (var e = 0; e < docElemnts.length; e++) {
        with (docElemnts[e]) {
            //Check founded Anchor tag is belongs to Tooltip
            if (getAttribute('rel') != undefined && getAttribute('rel') != null) {
                var rel = getAttribute('rel');
                //Check whether current element has rel attribute with "Tooltip."
                if (rel.indexOf(sPrefix) >= 0) {
                    var key = rel.split(sPrefix)[1];
                    for (tip in aTooltips) {
                        var str = aTooltips[tip];
                        //Perform a case-sensitive search
                        if (str.search(key) == 0) {
                            var Tooltip = str.split('¦')[1];
                            docElemnts[e].setAttribute('TooltipTitle', Tooltip.split('|')[0]);
                            docElemnts[e].setAttribute('TooltipDescription', Tooltip.split('|')[1]);
                            //Automatically attach mouse over and mouse out event to the Grid Action Button
                            docElemnts[e].onmouseover = attachTooltip;
                            docElemnts[e].onmouseout = function () {
                                hideTooltip('dvTooltip');
                            }
                            break;
                        }
                    }
                }
            }
        }
    }
}
//Attaching event to the current element of the Grid Action Button
function attachTooltip(e) {
    if (!e) var e = window.event;
    showTooltip(e, 'dvTooltip', this.getAttribute('TooltipTitle'), this.getAttribute('TooltipDescription'));
}
//Return object
function getElement(element) {
    if (typeof element == 'object')
        return element;
    else
        return document.getElementById(element);
}

您需要在.aspx页中添加

you need to add in .aspx page

<script language="javascript" type="text/javascript" src="Tooltip.js"></script>
<script language="javascript" type="text/javascript" src="Common.js"></script>
<link href="Tooltip.css" type="text/css" rel="Stylesheet" />

在您的锚标签
中添加以下属性 rel ="Tooltip.Search"
Tooltip.Search会自动将搜索标题和描述分配给将在common.js中定义的链接.

div id ="dvTooltip"
div的ID为dvTooltip的div包含标题"和描述"容器，您可以根据需要更改样式和格式.

add following attribute your Anchor tag
rel="Tooltip.Search"
Tooltip.Search is automatically assign search Title and Description to the link this will be defined in common.js

div id="dvTooltip"
div with id dvTooltip which contain Title and Description container you can change style and format as per your requirement.

<div id="dvTooltip" class="tooltip" style="height: 50px; width: 160px;">
       <div class="tooltiptitle" id="dvTooltipTitle">
       </div>
       <div class="tooltipdetail" id="dvTooltipText">
       </div>
   </div>

<a href="javascript:void(0)" rel="Tooltip.Search" >Search New</a>

这篇关于如何在C#中为Calendar WebControl构建强大的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！