jquery提示_jquery提示框 - CSDN
精华内容
参与话题
  • jquery文字提示

    千次阅读 2018-08-01 15:21:29
    使用jquery为table的某一个td添加文字提示框,鼠标滑入出现,鼠标滑出消失 html //因为tbody的内容是后来添加的,所以可以直接根据table来找到要加效果的td元素 //如果html中td元素不是动态添加的,则可以...

    使用jquery为table的某一个td添加文字提示框,鼠标滑入出现,鼠标滑出消失

    html

    
      //因为tbody的内容是后来添加的,所以可以直接根据table来找到要加效果的td元素
      //如果html中td元素不是动态添加的,则可以直接给td加class名或id名,获取后再操作就可以了
     <tbody id="guding">
     </tbody>

    js

    
      // 创建文字提示框并赋值属性与样式
      // 外层div
      var tip = document.createElement('div')
      $(tip).attr('class', 'tip')
      $(tip).css('pointer-events', 'none')
      // 文字框 
      var box = document.createElement('div')
      $(box).attr('class', 'box')
      // 向下箭头
      var arrow = document.createElement('div')
      $(arrow).attr('class', 'arrow')
      $(tip).append(box)
      $(tip).append(arrow)
      //通过find()方法找到td
      var tdList = $('#guding').find('td:nth-child(3)')
      // 鼠标滑入事件
      $(tdList).on('mouseenter', function(ev) {
        // 获取event元素,即获取事件状态(元素,键盘,鼠标等的状态)
        var oEvent = ev || event
        // 将td内容填充到文字提示框中
        $(box).html($(this).text())
        // 根据鼠标在屏幕中的位置,设置文字提示框的位置
        $(tip).css('left', oEvent.clietX - 50 + 'px')
        $(tip).css('top', oEvent.clientY - 50+ 'px')
        // 此处一开始用position定位,但position:absolute是根据设置了relative的父元素进行定位的,所以当屏幕大小发生变化时(如果存在滚动内容,absolute是根据父元素进行定位),位置也会发生变化
        // 浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条,而position:fixed属性也是设置元素在当前可视窗口的位置
        $(tip).css('position', 'fixed')
        $(tip).css('z-index', '9000')
        // 将文字提示框添加到body中
        $('body').append(tip)
        // 也可直接使用字符串拼接省略上面“创建文字框步骤”
        var appendHtml = '<div class="tip" style="pointer-events:none;position:fixed;left:' + x + ';top:' + y + ';z-index:9000"><div class="box">'+$(this).text()+'</div><div class="arrow" style="margin-top:-5px"></div></div>'
        $('body').append(appendHtml)
        // 因为如果直接使用clienX与clientY属性来定位元素,鼠标位置就是元素的左上角,上边使用各减50px来进行位置调整,但如果文字过长就会导致位置还不是特别精准,箭头处不会处在要进行文字提示的元素正上方位置,所以此处应该减去的是文字提示框的长度/2,这样箭头位置几乎处于元素最上方
        var w = $('.box').outerWidth()
            var x1 = oEvent.clientX - w / 2 + 'px'
            $('.tip').css({
              'position': 'fixed',
              'left': x1,
              'top': y,
              'z-index': 9000,
            })
      }) 
      // 鼠标滑出事件
      // 在此使用移出子节点方法remove()而不是使用"display: none",因为创建太多节点也不移除只是隐藏的话会影响性能
      $(tdList).on('mouseleave', function(ev, a) {
        $('body').remove(tip)
      })

    css

     /* 在这里一开始给了.tip和.box宽度为200最大400,但是当宽度超过200时还是不能显示完全,又不能不给宽度,所以在这里只需要给.box最小宽度min-width */
    <style type="text/css" media="screen">
      .tip {
        position: relative;
        color: #fff;
        text-align: center;
      }
      .box {
        min-width: 400px;
        height: 40px;
        line-height: 40px;
        background: #3c3636;
      }
      /* 向下箭头只是一个小方形,通过定位与旋转实现效果 */
      .arrow {
        width: 10px;
        height: 10px;
        position: absolute;
        background: #3c3636;
        left: 47%;
        bottom: -5px;
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);       /* IE 9 */
        -webkit-transform: rotate(45deg);   /* Safari and Chrome */
        -o-transform: rotate(45deg);        /* Opera */
        -moz-transform: rotate(45deg);  
      }
    
    </style>
    展开全文
  • jquery的自动提示

    2018-01-02 20:09:00
    当你在eclipse中的JSP中写JavaScript或者JQuery代码的时候,eclipse是不会自动提示的,所以你需要在eclipse中安装一下插件,该插件的名字叫:Spket IDE,它可以作为一个插件存在,也可以作为一个独立的IDE存在。...

    当你在eclipse中的JSP中写JavaScript或者JQuery代码的时候,eclipse是不会自动提示的,所以你需要在eclipse中安装一下插件,该插件的名字叫:Spket IDE,它可以作为一个插件存在,也可以作为一个独立的IDE存在。它具有提示js或者JQuery代码的功能。 
    (1)Spket IDE下载地址: 
    http://www.spket.com/download.html  
    注意:下载里面的Plugin插件,

    下载完后解压缩里面会有两个文件夹,如下图所示: 
    这里写图片描述 
    把features和plugins文件夹中的相应内容复制到你的eclipse安装目录中的features和plugins文件夹中,然后重新启动你的eclipse。 
    (2)重新启动你的eclipse后,打开window—preference后,你就可以在左侧列表看到Spket,如下图所示: 
    这里写图片描述 
    (3)点击其中的JavaScript Profiles,你可以看到里面的相应信息,其中是不存在JQuery的,你需要点击new,会弹出一个对话框,此时你需要填写一个Profile的Name,最好是纯英文,见明知义,确定后点击Add Library,然后在下拉框选择JQuery这一项,最后,你只需要点击Add File,把你项目中用到的JQuery文件(JQuery1.**)添加进去,此时你对于JQuery的配置就完成了,下面是对于你的配置的测试,效果如下图,分别是对JS和JQuery的测试: 
    这里写图片描述 
    这里写图片描述 
    以上就是我对于在eclipse中安装Spket插件来提示JS或者JQuery代码。


    展开全文
  • alert弹出[object Object]解决方法

    万次阅读 2019-03-23 21:29:39
    如题,可以使用这个方法来获取值 var str = JSON.stringify(obj); alert(str);

    弹窗  

    如题,可以使用这个方法来获取值 
    var str = JSON.stringify(obj); 
    alert(str); 

    æææ¾ç¤º

    展开全文
  • 30个非常流行的jQuery提示信息插件

    千次阅读 2012-10-08 11:18:54
    如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件jQuery Tooltip Plugin,希望对大家有帮助。  每个插件都配有比较直观...

    来自:http://www.admin10000.com/document/305.html


     在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用。如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件jQuery Tooltip Plugin,希望对大家有帮助。

      每个插件都配有比较直观的截图,也就不做详细地介绍了,如果大家喜欢某一个插件,点击超链接,自己学习如何使用吧。

    1. Dynamic tooltip

    2. Popup Bubble

    3. jQuery Horizontal Tooltips Menu Tutorials

    4. Prototip

    5. Coda Popup Bubble

    6. Awesomeness

    7. TipTip

    8. (mb)Tooltip

    9. vTip

    10. jGrowl

    11. jQuery Ajax Tooltip

    12. Digg-style post sharing tool with jQuery

    13. Input Floating Hint Box

    14. Simpletip

    15. qTip

    16. Orbital Tooltip

    17. Inline HTML Tooltip

    18. tipsy

    19. Easiest jQuery Tooltip Ever

    20. BsTip

    21. EZPZ Tooltip

    22. BeautyTips

    23. Tooltip

    24. clueTip

    25. Creating A Simple Tooltip Using jQuery and CSS

    26. BetterTip

    27. jTip

    28. jqTooltip

    29. Pop!

    30. Create a Simple CSS + Javascript Tooltip with jQuery


    展开全文
  • Jquery提示框效果(确认提示框)

    千次阅读 2016-11-23 09:49:34
    <!DOCTYPE html> 普通提示框和确认提示框 <script src="js/jquery-1.11.1.js"> *{margin: 0;padding
  • 1. jQuery信息提示工具 效果如下图 源码:http://www.helloweba.com/view-blog-123.html 演示:http://www.helloweba.com/demo/poshytip/ 2. jQuery Dialog 对话框 效果如下图 源码及演示:...
  • 安装了Aptana插件后,怎么有jQuery提示。官方文档的那些好像都是Web Project的(web project 才有Properties > Project Build Path)。但是我的是Dynamic Web Project,没有Project Build Path。求解决,Eclipse版本...
  • MyEclipse 开启 jQuery 提示

    千次阅读 2017-05-29 11:30:57
    MyEclipse的 JavaScript 编辑器默认是不开启 各种代码提示的,如果是 Eclipse,可以装...无奈的我发现,我已经写了几个月没有一丁点提示的js代码了,好像现在已经不需要代码提示了,不过有提示还是会省很多时间的。
  • 开发时经常用到jQuery,但是eclipse本身是没有jquery提示的,只有javascript的提示(我的版本较新);那开发时对于jquery的提示也是有必要的,增加开发效率。那就要另外安装eclipse插件才能支持jQuery智能提示,常用的...
  • WebStorm配置JQuery提示

    万次阅读 2016-05-25 16:48:02
    安装中。...这样JQuery就有自动提醒功能了;     选择“Attach Files”,找到本地文件存放的位置,选中这2个文件后,点击OK就可以了 再点击“ok”就可以了 再点击“ok”,大功告成!!!
  • 1、首先点击工具栏里的Preferences,看看里面有没有Package Settings和Package Control 就是这样的: 2、如果没有,进行下面的操作,用快捷键ctrl + '~'打开Show Control命令行界面,执行下面的命令: ... Con
  • jquery 提示信息显示后自动消失

    千次阅读 2013-12-18 15:31:56
    经常需要做让一个提示信息显示几秒然后自动消失的效果,之前是用setTimeout去实现,但是发现如果页面上有多个setTimeout就不太好。今天找到了两个很简单的方法.mark一下。  方法一:  Java代码  $...
  • Myeclipse8.6添加 jQuery提示功能

    千次阅读 2012-03-31 17:53:09
    有一个Myeclipse>JavaScript>Build Path,里面有Libraries的选项卡,点击AddLibrary后,选择列表中的第一项“JavaScriptLibrary”,点击next, 我们可以看到MyEclipse里面内置了三个库,是DOJO、JQUery和YUI。...
  • 最近处于公司项目的需要,一直在学习jquery,但是在VS2010中写js代码时非常令人苦恼  的是其对JS代码智能提示很差,再加上自己又是个新手,写起代码来非常吃力,也试着按网上  对于VS中更好地支持jquery...
  • 需要在用户把光标移到某个元素上时显示一些额外信息时,提示框是一种不错的方式,提示框会在鼠标停留的时候显示,鼠标移开时消失。 适当的使用提示框能大大提升网站的友好度,并且可以节省一些不必要的网页空间,...
  • 前端小知识:jquery提示框自动消失

    千次阅读 2018-06-12 11:12:21
    js 提示框自动消失showType:定义将如何显示该消息。可用值有:null,slide,fade,show。默认:slide。showSpeed:定义窗口显示的过度时间。默认:600毫秒。width:定义消息窗口的宽度。默认:250px。height:定义消息...
  • JQuery 提示用户名密码不为空

    千次阅读 2015-12-03 11:06:00
    $(document).ready(function(){    //HTML()替换 HTML函数  //append()追加 :input = :text,:password  $(":text,:password").blur(function(){  var v = $(this).val
  • eclipse添加jQuery提示

    千次阅读 2011-10-15 11:37:35
    我是使用spket来提示jQuery的。 1.先安装spket:插件安装地址是Spket -http://www.spket.com/update/ 在eclipse中点击help—Install New Software—Add 确认 下一步直到
  • Eclipse的jQuery提示Aptana插件安装方法

    千次阅读 2014-09-25 20:02:33
    今天 Aptana - http://download.aptana.com/studio3/plugin/install
  • Eclipse 支持jQuery 自动提示

    千次阅读 2013-12-06 22:31:31
    1,Eclipse安装 spket 插件。(两种方式):  在线安装:Help->Install New Software...->Add...->Name: "Spket", Location: http://www.spket.com/update/ 下载完毕重启 Eclipse 。  手动安装:到...
1 2 3 4 5 ... 20
收藏数 105,856
精华内容 42,342
关键字:

jquery提示