`
小杨学JAVA
  • 浏览: 901462 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

 
阅读更多

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

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&uuml;rzburg" title="W&uuml;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&uuml;rnberg" title="N&uuml;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

分享到:
评论

相关推荐

    jQuery实例_ ToolTip的实现

    本实例将深入探讨如何使用jQuery实现一个实用的Tooltip功能。Tooltip是一种常见且有用的UI元素,它可以在用户鼠标悬停在某个元素上时显示额外的信息。 首先,让我们了解一下jQuery的核心概念。jQuery通过选择器来...

    jQuery Tooltip Plugin各种浮动提示效果插件.rar

    这是使用jQuery Tooltip Plugin弹出各种浮动提示效果插件的一些例子,用这个插件可以显示自定义的鼠标悬停提示,比如文字提示框、图片框,在鼠标放在特定位置时激活,鼠标移开后消失,如示例所示为弹出一个图片浮动...

    50个jQuery插件实用图例

    而“30个jQuery插件-Tooltip气泡悬浮框的.doc”则详细列出了各种Tooltip插件的实例,可以帮助开发者了解并选择最适合他们项目的解决方案。 在实际开发中,了解并掌握这些jQuery插件的使用,能够大大提升开发效率,...

    jquery插件.rar

    通过理解插件的工作原理,开发者可以创建出符合需求的个性化功能,同时利用现有的优秀插件如jQuery UI和QTip,可以快速构建出专业级别的Web应用。掌握jQuery插件的开发技巧,对于提升Web开发效率至关重要。

    近百个jQuery实例

    参照《jQuery完全攻略》亲自手打并测试的100多个实例(部分实例来自网络如消息框、tooltip、面包屑式菜单、层级菜单以及一些jQuery插件的用法)。 主要分为: jQuery操作DOM节点、数组和字符串 jQuery表单验证 ...

    jQuery入门实例:使用jQuery编写简单的类tooltip的小插件

    标题中的“jQuery入门实例:使用jQuery编写简单的类tooltip的小插件”表明了本文将介绍如何使用jQuery这个流行的JavaScript库来创建一个类似tooltip的功能。jQuery是一个轻量级的库,它简化了HTML文档遍历、事件处理...

    jQuery Tooltip弹出式分享按钮插件.zip

    jQuery Tooltip弹出式分享按钮插件是一个用于网页交互增强的工具,主要利用jQuery库实现。jQuery,一个轻量级的JavaScript库,因其简洁的API和强大的功能,深受开发者喜爱。这个插件主要用于创建动态提示信息,当...

    jQuery插件开发详细教程

    这样,使用插件的jQuery对象可以继续与后续的jQuery方法链式调用。例如: ```javascript $.fn.lockDimensions = function(type) { return this.each(function() { // 操作jQuery对象的代码 }); }; ``` 此外,在...

    jQuery Tooltip气泡提示工具栏代码.zip

    jQuery Tooltip是一种常见的网页交互元素,它为用户提供了一种在鼠标悬停时显示额外信息的方式,通常用于...总之,这个压缩包是一个实用的资源,无论你是要快速实现Tooltip功能,还是想要深入了解jQuery的实践应用。

    JQuery Flot 画图插件 +实例源码 使用非常方便,效果非常漂亮

    - **插件扩展**:Flot社区提供了许多插件,如Legend、Tooltip、Pie charts等,进一步增强其功能。 - **与其他库结合**:Flot可以与其他jQuery库(如Bootstrap、jQuery UI)结合,实现更复杂的布局和交互效果。 - ...

    jquery插件

    在本文中,我们将深入探讨jQuery插件的原理、用途以及一些常见的插件实例。 首先,jQuery插件是jQuery库的扩展,它们提供了额外的功能和便捷的接口,帮助开发者更高效地实现页面交互、动画效果、数据处理等功能。...

    Jquery-poshytip实例应用

    **jQuery PoshyTip实例应用详解** 在Web开发中,用户交互体验是至关重要的,而提示信息作为用户与网站沟通的桥梁,能有效提高用户体验。jQuery PoshyTip是一款优秀的jQuery插件,专门用于创建美观且可自定义的提示...

    jQuery tooltip鼠标提示层.rar

    jQuery tooltip鼠标提示层,jQuery CSS实现,鼠标移到链接文字上会弹出一个图片 文字的层提示框,鼠标移走后提示自动消失,特效代码来自国外的前端设计网站。这个链接提示层支持在弹出层中显示图片、文字和链接格式...

    jquery formValidation表单验证插件实例

    1. **初始化插件**:在jQuery的`$(document).ready()`函数中,使用`$.fn.formValidation`方法初始化表单验证。指定一个容器(通常是包含表单的元素),并传递一个配置对象: ```javascript $(document).ready...

    基于Vue.js的Tooltip用户通知弹出框

    之前我们分享过一些比较实用的jQuery/CSS3 Tooltip弹出框,大部分都是鼠标滑过链接文字或者按钮时弹出一个提示层,比如这款jQuery Tooltip气泡提示框插件就拥有多种风格让你选择。这次我们要带来另外一款Tooltip用户...

    Toolbar.js-实用的tooltip样式jQuery工具栏插件

    Toolbar.js是基于jQuery的一个工具栏插件,它专为创建具有Tooltip样式的功能丰富的工具栏而设计。这个插件的主要特点是其简洁的外观和灵活的自定义选项,使得开发者能够在网页中轻松集成各种功能。 1. **Tooltips...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    29.jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30.jquery实现图片可拖动展示的实例下载 31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33....

    HTML5 tooltips工具提示jquery插件

    JavaScript实例化过程通常在文档加载完成后进行,可以使用jQuery的`$(document).ready()`函数来确保DOM已经完全加载。然后,你可以通过调用`tooltip.js`的初始化方法来应用工具提示效果: ```javascript $(document...

    jQuery 星级评分效果实例 基于jQuery 的星级评分效果实例,淘宝网和口啤网等大网站都可见到本效果,本代码同样借鉴了口啤网,感谢原作者,因本人水平有限,本星级评分代码性能仍有一定提升空间,只是闲来无聊练手之作。

    本文将详细讲解如何实现基于jQuery的星级评分效果,这种效果广泛应用于电商平台、评论系统以及各种需要用户给出评价的场景,如淘宝网和口啤网。 首先,实现星级评分效果的核心是利用jQuery的DOM操作和事件监听功能...

    jquery Highcharts统计图表(实例+源码+中文版API)

    本资源包含了一系列关于jQuery Highcharts的实例、源码以及中文版API,旨在帮助开发者更好地理解和应用Highcharts。 首先,我们要理解jQuery Highcharts的基础知识。Highcharts的核心功能在于提供丰富的图表类型,...

Global site tag (gtag.js) - Google Analytics