jQuery提示效果代码分享


Posted in Javascript onNovember 20, 2014

代码一:

<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>

<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>

<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>

<p><a href="#" title="这是自带提示2.">自带提示2.</a></p>
$(function(){

            $(".tooltip").mouseenter(function(e){

                this.mytitle=this.title

                this.title=""

                var a="<div>"+this.mytitle+"</div>"

                $("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

<script>

$( "#dialog:ui-dialog" ).dialog( "destroy" );

     

    $( "#dialog-message" ).dialog({

         

        height: 120,

        width: 220,

        modal: true,

        buttons: {

            "否": function() {

                //dosomething

                $( this ).dialog( "close" );   

            },

            "是": function() {

                //dosomething

                $( this ).dialog( "close" );

            }

        }

    });

</script>

<div id="dialog-message" title="消息框" style="display:none;height: 120px; width:220px;">我是弹出的消息框</div>

代码三:

使用javascript弹出层组件easyDialog

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

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

easyDialog.open({

  container : 'demoBox'

});

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

easyDialog.open({

  container : {

    header : '弹出层标题',

    content : '欢迎使用easyDialog : )',

 yesFn : btnFn,

    noFn : true

  }

});

显示的效果如下图所示:

jQuery提示效果代码分享

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

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

Javascript 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
Vue波纹按钮组件制作
Apr 30 Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 #Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 #Javascript
js中数组排序sort方法的原理分析
Nov 20 #Javascript
javascript继承机制实例详解
Nov 20 #Javascript
jQuery验证插件 Validate详解
Nov 20 #Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 #Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 #Javascript
You might like
PHP脚本的10个技巧(1)
2006/10/09 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
浅谈php自定义错误日志
2015/02/13 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
Python的Flask框架与数据库连接的教程
2015/04/20 Python
Python数据结构之翻转链表
2017/02/25 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
linux下进程间通信的方式
2013/01/23 面试题
魅力教师事迹材料
2014/01/10 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
毕业生入职感言
2015/07/31 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
python装饰器代码解析
2022/03/23 Python
python中数组和列表的简单实例
2022/03/25 Python
尝试使用Python爬取城市租房信息
2022/04/12 Python