使用jQuery UI修饰title属性的气泡悬浮框
2013-05-13 20:35
309 查看
使用jQuery UI的tooltip()函数,可以使悬浮提示框不再那么千篇一律。点击这里先看看效果吧:http://www.keleyi.com/keleyi/phtml/tooltip/
以下是完整代码:保存到html文件打开也可以看效果。
本文转载自柯乐义:http://www.keleyi.com/a/bjac/a6d651710217f7a0.htm
以下是完整代码:保存到html文件打开也可以看效果。
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>使用jQuery UI修饰title属性的气泡悬浮框(Tooltip) - 柯乐义</title> <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> <link rel="stylesheet" href="http://www.keleyi.com/keleyi/pmedia/jquery/ui/1.10.2/themes/sunny/jquery-ui.min.css" /> <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery/ui/jquery-ui-1.10.2.custom.min.js"></script> <script type="text/javascript"> $(function () { $(document).tooltip(); }); </script> <style type="text/css"> label { display: inline-block; } </style> </head> <body> <h2>不一样的悬浮提示框</h2> <p>如果为一个元素添加了title属性,那么当光标移到该元素上时,会在元素旁显示出一个悬浮提示框。</p> <p>一般悬浮提示框是无法使用样式修饰的,但如果使用<a href="http://www.keleyi.com/menu/jquery/" title="jQuery特效、资料等学习内容。" target="_blank">jQuery</a> UI,则可以显示不同效果了,方法很加单:$(document).tooltip(); </p><p>把光标移到输入框(或超链接)上看看悬浮提示框的效果吧。</p> <p><label for="age">Email:</label><input id="age" title="可作为取回密码的手段,建议填写。" /></p> <p><a href="http://www.keleyi.com" target="_blank" title="柯乐义首页">柯乐义</a> 现在是样式一 <a href="http://www.keleyi.com/keleyi/phtml/tooltip/tooltip2.htm" title="样式二:redmond">样式二</a> <a href="http://www.keleyi.com/a/bjac/a6d651710217f7a0.htm" target="_blank" title="查看原文">原文</a></p> </body> </html>
本文转载自柯乐义:http://www.keleyi.com/a/bjac/a6d651710217f7a0.htm
相关文章推荐
- 使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
- 使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
- 使用static关键字修饰一个属性
- NSString的属性修饰使用copy和strong的区别
- img标签中alt和title属性的正确使用
- HTMLimg标签的alt属性和title属性使用介绍
- Hibernate中使用@Temporal修饰日期类型的属性
- 使用final修饰属性后,属性的特征
- iPhone开发:Objective-C属性修饰关键字使用详解
- 【Hibernate学习笔记-5.1】使用@Transient修饰不想持久保存的属性
- 使用V7包后,设置ActionBar的title等的属性
- 【转】图片IMG标记的alt属性和title属性的使用
- 在Hibernate中使用@lob修饰大数据类型的属性
- title 属性的使用 当table单元格内容过长时需要用...来代替 ,鼠标移入的时候显示全部内容
- 关于Html中的title属性内容换行,以及Bootstrap的tooltip的使用
- iOS 面试题(九):为什么block要使用copy而不是strong或者其他属性修饰?
- img标签中alt和title属性的正确使用
- 正确使用HTML title属性的一些建议
- 代码块(block)的使用---iOS4.0以后推出(声明成属性的时候,用copy修饰)
- HO3003: IE6 IE7 IE8(Q) 中 IMG 元素的 alt 属性在没有 title 属性的情况下会被当作提示信息使用