jquery插件tooltip应用实例[实例]

小杨学JAVA

浏览: 900490 次
性别:
来自: 上海

最近访客更多访客>>

loginboot

cnlihao

raoqin

dawninautumn

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

刚做完成公司项目，剩下的时间来总结下项目所用到的技术要点：

1.tooltip应用：实现的效果为鼠标经过有提示信息，这个和链接<a href="xxx" title="xxx' >xx</a>

属性类似。

2.下面介绍步骤：

2.1 导入jquery插件和tooltip插件（大家可以上网下载）

2.2 调用tooltip的方法

3.代码如下：

    注意：导入js的顺序先导入jquery的包再后为tooltip包。
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery tooltip test</title>
<link href="<%=request.getContextPath()%>/css/jquery.tooltip.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/screen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.tooltip.js"></script>
<script type="text/javascript">

$(function() {

    $('#right a').tooltip({
        track: true,
        delay: 800,
        showURL: false,
        extraClass: "right",
        fade: true,
        positionLeft: false,
        opacity: 0.3,
        top: -15,
        left: 5 ,
        bodyHandler: function() {
            return $("<img/>").attr("src", "images/163/yeahlogo_middle.gif"); //可以自己写图片的位置
        }
    });

    $("map *").tooltip({ positionLeft: true });

});

</script>
</head>
<body>
        <fieldset>
            <legend>Testing repositioning at viewport borders</legend>
            <p id="right">
                Tooltip with fixed width<br/>
                <a title="Short title" href="http://goggle">Google me!</a><br/>
                <a title="Rather a very very long title with nomeaning but yet quite long long long" href="http://goggle">Googleme!</a>
            </p>
            <p id="right2">
                Tooltip width auto width<br/>
                <a title="Short title" href="http://goggle">Google me!</a><br/>
                <a title="Rather a very very long title with nomeaning but yet quite long long long" href="http://goggle">Googleme!</a>
            </p>
            <h3>Code</h3>
            <pre><code class="mix"></code></pre>
        </fieldset>


        <fieldset>
        <legend>Image map with tooltips.</legend>

        <img id="map" src="images/163/karte.png" width="345" height="312" border="0" usemap="#Landkarte">

        <map name="Landkarte">
        <area shape="rect" coords="11,10,59,29"
                href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz">
        <area shape="rect" coords="42,36,96,57"
                href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden">
        <area shape="rect" coords="42,59,78,80"
                href="http://www.mainz.de/" alt="Mainz" title="Mainz">
        <area shape="rect" coords="100,26,152,58"
                href="http://www.frankfurt.de/" alt="Frankfurt" title="Frankfurt">
        <area shape="rect" coords="27,113,93,134"
                href="http://www.mannheim.de/" alt="Mannheim" title="Mannheim">
        <area shape="rect" coords="100,138,163,159"
                href="http://www.heidelberg.de/" alt="Heidelberg" title="Heidelberg">
        <area shape="rect" coords="207,77,266,101"
                href="http://www.wuerzburg.de/" alt="Würzburg" title="Würzburg">
        <area shape="rect" coords="282,62,344,85"
                href="http://www.bamberg.de/" alt="Bamberg" title="Bamberg">

        <area shape="rect" coords="255,132,316,150"
                href="http://www.nuernberg.de/" alt="Nürnberg" title="Nürnberg">
        <area shape="rect" coords="78,182,132,200"
                href="http://www.karlsruhe.de/" alt="Karlsruhe" title="Karlsruhe">
        <area shape="rect" coords="142,169,200,193"
                href="http://www.heilbronn.de/" alt="Heilbronn" title="Heilbronn">
        <area shape="rect" coords="140,209,198,230"
                href="http://www.stuttgart.de/" alt="Stuttgart" title="Stuttgart">
        <area shape="rect" coords="187,263,222,281"
                href="http://www.ulm.de/" alt="Ulm" title="Ulm">
        <area shape="rect" coords="249,278,304,297"
                href="http://www.augsburg.de/" alt="Augsburg" title="Augsburg">
        <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
                href="http://www.baden-aktuell.de/" alt="Baden" title="Baden">
        </map>
    </fieldset>

</body>
</html>

转载：http://blog.csdn.net/wwwyuanliang10000/article/details/5683605

分享到：

iText学习 ---表格 | JQgrid要实现在jqGrid表格上动态的加行、删 ...

2012-02-29 11:15
浏览 2121
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论