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 相关文章推荐
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
angular.js实现购物车功能
Oct 23 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
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命令行使用方法和命令行参数说明
2014/04/08 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
Function.prototype.bind用法示例
2013/09/16 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
建筑专业自我鉴定
2013/10/22 职场文书
优秀教师先进事迹
2014/01/22 职场文书
银行开业庆典方案
2014/02/06 职场文书
法律意见书范文
2015/06/04 职场文书
丧事主持词
2015/07/02 职场文书
实验室安全管理制度
2015/08/05 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
Nginx缓存设置案例详解
2021/09/15 Servers
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python