前端开发

 首页 > 前端开发 > jquery教程 > jQuery提示效果代码分享_jquery_自学php网

jQuery提示效果代码分享_jquery_自学php网

分享到:
【字体:
导读:
          这里给大家分享几段JQuery提示效果的代码,非常的简单实用,有需要的小伙伴直接拿走吧...

代码一:

复制代码 代码如下:

复制代码 代码如下:

$(function(){
            $(".tooltip").mouseenter(function(e){
                this.mytitle=this.title
                this.title=""
                var a="
"+this.mytitle+"
"
                $("body").append(a);
                $("div").css({
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX  + x) + "px"
                }).show("fast")
            }).mouseout(function(){
                this.title= this.mytitle;
                $("div").remove();
             });
       })

学习心得:
 
不要在p标签下追加div元素,会出现一个大的偏差值!
 
原来!this和$("this")是有所不同,如果上文
 this.title改写成$("this").attr("title")会导致下面的mouseout事件无法访问保存下来的title

代码二:

引用css:jqueryui/css/ui-lightness/jquery-ui-1.8.18.custom.css
引用js:jqueryui/js/jquery-ui-1.8.18.custom.min.js

复制代码 代码如下:



代码三:

使用javascript弹出层组件easyDialog

easyDialog在经过一段时间的使用后,对使用中碰到的一些问题进行了总结,最近花了点时间对原来的代码进行了重构和优化,并加入了一些新功能。原来的版本只是为了实现简单的弹出层的基本功能,从项目的角度来说就是如何能快速的完成项目,而这个版本不仅仅是实现基本的功能,更多的考虑了弹出层如何更好更轻松的应用于项目中。
easyDialog v2.0新增的功能:

1. 增加了默认的弹出层内容模板,如果只是一些简单的应用,自己可以不去写弹出层内容的结构,而只需传几个简单的参数即可,原来的使用方法:

复制代码 代码如下:

easyDialog.open({
  container : 'demoBox'
});

使用默认的内容模板,那么container参数可以这么用:

复制代码 代码如下:

easyDialog.open({
  container : {
    header : '弹出层标题',
    content : '欢迎使用easyDialog : )',
 yesFn : btnFn,
    noFn : true
  }
});

显示的效果如下图所示:

如果要修改默认的内容模板的样式,可以修改下载文档中的easydialog.css文件来实现你想要的样式。
2. 增加了拖拽效果,使弹出层有更好的用户体验,并且自定义弹出层内容也可以轻松实现拖拽效果。
3. 内部增加了缓存系统、微型事件处理系统,对弹出层内容也做了缓存,使弹出层性能更佳。
另外修改了一个参数的命名,原来的isOverlay改成了overlay,原来的弹出层各元素的id也重新命名,尽量避免冲突。

上面3种都是本人常用的提示效果了,大家根据自己的项目需求,自由使用吧

分享到:
jQuery验证插件 Validate详解_jquery_自...
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation。Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评。作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填...
jQuery 中$(this).index与$.each的使用指...
工作当中响应某个需求,切换选项卡的一个效果,根据每个选项下的内容元素的总数不同而进行不同的html变化(如果选项卡下的内容为空就等于XXX,否则就XXX)   复制代码 代码如下:  $(function(){          $(".bao").hide();           $(".bao").eq(0).show();           $(".head li"...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……