JavaScript 中的有限状态机，第 3 部分: 测试小部件
2010-09-14 13:20:44 来源：WEB开发网createFadingTooltip 函数的自变量是一个 HTML 元素标识符、工具提示的内容和一组可选的参数。这个函数简单地将元素标识符转换为一个指针，然后调用构造函数，将其他参数不加修改地传递给构造函数。构造函数返回的对象的指针被丢弃，因为构造函数用它定义的事件函数封装了对象指针，细节参见 第 2 部分 中的 连接鼠标事件 一节。
接下来，需要在 Web 页面的 HTML body 元素中定义一些具有 id 属性的 HTML 元素，如清单 2 所示。
清单 2. 一些 HTML 元素示例的 HTML 代码
<body>
...
<p>These elements have tooltips defined with the FadingTooltip widget:
<div id='tests' class='TestStyle'>
Here are some <span id='TestLabel'>more elaborate tooltips</span>:
<input type='text' id='TestInput' size=25>
<input type='button' id='TestButton' value='Press this button'>
</div>
...
最后，需要一些用适合每个 HTML 元素的自变量调用 createFadingTooltip 函数的代码，如清单 3 所示。
清单 3. 将 FadingTooltip 部件绑定到 HTML 元素的 JavaScript 代码
<body>
...
<script content='text/javascript'>
createFadingTooltip('TestLabel',
'Move your cursor a bit to the right, please ...');
createFadingTooltip('TestInput',
'Type the following, <i>please</i>:' +
'<ul compact style='margin-top: 0; margin-bottom: 0'>' +
'<li>your bank account number' +
'<li>your PIN number' +
'</ul>' +
'<i>Thank you</i> in advance.',
{ fadeinTime: 3,
fadeoutTime: 3 } );
createFadingTooltip('TestButton',
'<img src=http://tech.ddvip.com/2008-10/'smiley.gif' align='absmiddle'>' +
'<big>Go ahead.</big> ' +
'Press it. ' +
'<small>What's the harm? <small>Trust me.</small></small>',
{ tooltipOpacity: 1,
tooltipClass: 'AnotherTestStyle',
pauseTime: 2,
fadeinTime: 0.5,
displayTime: 0,
fadeoutTime: 10,
trace: true } );
/script>
...
Tags：JavaScript 有限 状态
编辑录入：爽爽 [复制链接] [打 印]
中查找“JavaScript 中的有限状态机，第 3 部分: 测试小部件”更多相关内容
中查找“JavaScript 中的有限状态机，第 3 部分: 测试小部件”更多相关内容更多精彩
赞助商链接
