提醒消息框的用法(Sprytooltip.js)
2013-06-20 14:37
120 查看
具体见:http://adobe.github.io/Spry/samples/tooltip/SpryTooltipSample.html
Spry Tooltip Widget
This page highlights the capabilities of the Spry Tooltip Widget. By default the widget will need to receive the id of the hidden element to be displayed when the mouse will move overthe trigger elements. The trigger elements are sent in the widget constructor as CSS selectors. To see a sample of using Spry Data and the Tooltip widget, check this page.
The widget supports a limited list of CSS selectors. You can use class names, element ids and element HTML tags or any combination of these.
The tooltip may contain anything from simple text to complex HTML:
Mouse over me for simple tooltip or Mouse over me for complex tooltip
Using CSS Selectors to determine the trigger
You can use CSS selectors to specify a single trigger or multiple triggers for the same tooltip. In this case, the tooltip looks for 2 page element with 'selectMe' class applied to them.<script type="text/javascript"> var multiple_tooltip = new Spry.Widget.Tooltip('tooltipMultipleSample', '#multipleSample .selectMe'); var multiple_tooltip2 = new Spry.Widget.Tooltip('tooltipMultipleSample2', '.multipleSample2 .selectMe'); </script>
I'm the first trigger
I'm the second trigger
I'm the third trigger
I'm the first trigger with the same class
I'm the second trigger with the same class
I'm the third trigger with the same class
Delays
By default, the tooltip shows up immediately. You can set delays to slow down the showing and hiding of the tooltip. These are set as an option in the constructor.<script type="text/javascript"> var showDelay_tooltip = new Spry.Widget.Tooltip('showDelay', '#showDelayTrigger', {showDelay: 2000}); var hideDelay_tooltip = new Spry.Widget.Tooltip('hideDelay', '#hideDelayTrigger', {hideDelay: 1000}); </script>
Keep the mouse over for 1 second or the tooltip can close with a delay.
Class on trigger
In this sample, a CSS class is set on the trigger to alert the user that something happens on the element. This is set as an option in the constructor.<script type="text/javascript"> var highlight_tooltip = new Spry.Widget.Tooltip('highlighttrigger', '#classonme', {hideDelay:500, hoverClass:"enlarge"}) </script>
Tooltip positioning
By default, the tooltip is positioned 20px lower and to the right of the cursor. Setting the offsetX and offsetY allows you to set a new position for the tooltip. Pixels are measuredfrom the cursor, not the original tooltip origin. The position indicates the top, left position of the tooltip element.
Positioned up and to the left | Positioned
to the left and same height as cursor
<script type="text/javascript"> var positioned_tooltip = new Spry.Widget.Tooltip('option', '#option', {showDelay: 500, offsetX: -30, offsetY: -30}); var positioned2_tooltip = new Spry.Widget.Tooltip('optionValue', '#optionValue', {showDelay: 500, offsetX: "-200px", offsetY: "0px"}); </script>
Tooltip animation
The tooltip widget contains 2 built in effects for opening the tooltip: Fade and Blind. Set these as an option in the constructor. The values of the effects are hard coded and cannotbe changed.
<script type="text/javascript"> var fadeTooltip = new Spry.Widget.Tooltip('fadeMe', '#fadeTrigger', {useEffect: 'Fade'}); var blindTooltip = new Spry.Widget.Tooltip('blindMe', '#blindTrigger', {useEffect: 'Blind'}); </script>
Fade and Blind
Tooltips with interactive content
Sometimes, tooltips contain rich information such as links or forms. In these cases, the tooltip needs to remain so the user can interact with it. Setting the 'closeOnTooltipLeave' willleave the tooltip showing until the mouse leaves the tooltip element.
<script type="text/javascript"> var surveyTooltip = new Spry.Widget.Tooltip('survey', '#surveyTrigger', {hideDelay: 1500, closeOnTooltipLeave: true, offsetX: "10px", offsetY:"-10px"}); </script>
Mouse over me to complete this form
Tooltip following the cursor
Another option for the tooltip is to have it follow the cursor while the cursor is in the trigger area. Setting the followMouse option will activate this.<script type="text/javascript"> var followTrigger = new Spry.Widget.Tooltip('following', '#followMe', {followMouse: true}); </script>
The tooltip follows the mouse while the cursor is within the element, in this case noted by the border.
Copyright © 2007. Adobe Systems Incorporated. All rights reserved.
相关文章推荐
- js showModalDialog弹框用法
- 本文实例讲述了js中正则的查找match()与替换replace()的用法。
- js prototype 用法 需与 jQuery extend 方法一起看
- C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?
- js实现的定时关闭页面或定时提醒效果代码
- 最全的js正则表达式用法大全
- 加js库和css库| jQuery hover()用法 |document.onreadystatechange |get和post
- jquery.flot.js简单绘制折线图用法示例
- JS(javaScript)的with用法
- prototype.js常用函数及其用法
- js中object对象的constructor属性用法
- [cnblogs镜像]JavaScript 字符串匹配 | JS 的正则用法 | 从后边匹配
- js setTimeout opener的用法示例详解
- js中继承的几种用法总结(apply,call,prototype)
- js中typeof的用法
- js 用法
- WebView用法与JS交互
- js中innerText,innerHTML的用法
- js中的join(),reverse()与 split()函数用法解析
- 基于jQuery和flash使用js接口的网页mp3音乐播放器 -- JPlayer 用法详解