【JQuery UI】工具提示插件——tooltip
2016-04-08 00:52
881 查看
工具提示插件可以定制元素的提示外观,提示内容支持变量、Ajax远程获取,还可以自定义提示内容显示的位置,它的调用格式如下:
$(selector).tooltip({options});
其中selector为需要显示提示信息的元素,可选项参数options为tooltip()方法的配置对象,在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。
例子:将文本输入框元素绑定提示插件,当鼠标在文本输入框中移动时,在指定的位置并以动画的效果显示对应的title属性值内容。
<body>
<div id="divtest">
<div class="title">
工具提示插件</div>
<div class="content">
<div>
<label for="name">
姓名</label>
<input id="name" name="name" title="我是土豪,欢迎与我做朋友" />
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#name").tooltip({
show: {
effect: "slideDown",
delay: 1000
},
hide: {
effect: "explode",
delay: 1000
},
position: {
my: "left top",//提示框(我的左上)
at: "left bottom"//当前框(在你的右下)
}
});
});
</script>
</body>
$(selector).tooltip({options});
其中selector为需要显示提示信息的元素,可选项参数options为tooltip()方法的配置对象,在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。
例子:将文本输入框元素绑定提示插件,当鼠标在文本输入框中移动时,在指定的位置并以动画的效果显示对应的title属性值内容。
<body>
<div id="divtest">
<div class="title">
工具提示插件</div>
<div class="content">
<div>
<label for="name">
姓名</label>
<input id="name" name="name" title="我是土豪,欢迎与我做朋友" />
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#name").tooltip({
show: {
effect: "slideDown",
delay: 1000
},
hide: {
effect: "explode",
delay: 1000
},
position: {
my: "left top",//提示框(我的左上)
at: "left bottom"//当前框(在你的右下)
}
});
});
</script>
</body>
相关文章推荐
- jQuery之on
- jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
- Ajax-(get/post/jQuery方式请求)
- jQuery操作JSON数据
- jQuery: 以类名获取对象,删除类名对事件的影响。
- Jquery Select2服务端实例及几个小问题
- jQuery中height()、innerheight()、outerheight()的区别是什么
- jquery动画累积执行解决方法
- easyui + jquery 提交form表单 jquery submit失效
- jQuery——小案例:点击图片放大缩小
- jquery如何遍历json字符串
- 【JQuery UI】微调按钮插件——spinner
- jquery 的队列queue
- a毛 jquery 学习记 4过滤选择器1
- jQuery选择器
- example_Jquery Ajax + php 三级联动
- jquery 实现导航栏滑动效果
- Jquery判断数组中是否包含某个元素$.inArray()的用法
- jquery 实现 点击按钮后倒计时效果
- Jquery学习第一步