IT教程 | 加入收藏 | 简体 | 繁体
Tangram教程:JavaScript...JQuery教程ExtJS教程Tangram教程Ajax教程
当前位置: 首页 > Js+Ajax > Tangram教程

baidu.ui.Tooltip 弹出tip层

2012-07-29来源:[www.121ask.com]热度:0℃ 【字体:

baidu.ui.Tooltip

弹出tip层,类似鼠标划过含title属性元素的效果

  语法: new baidu.ui.Tooltip(options)  

返回值:<baidu.ui.Tooltip> Tooltip实例

   扩展插件(增加对象参数和实例方法)

$click 支持单击隐藏显示 查看+
$close 支持关闭按钮 查看+
$fx 动画效果 查看+
$hover 支持鼠标滑过隐藏显示 查看+

参数

<Object> * options 选项.
<String|Array> * options.target 目标元素或元素id。可直接设置多个目标元素
<String>    options.type (可选)触发展开的类型,可以为:hover和click。默认为click
<Element>    options.contentElement (可选)Tooltip元素的内部HTMLElement。
<String>    options.content (可选)Tooltip元素的内部HTML String。若target存在title,则以title为准
<String>    options.width (可选)宽度
<String>    options.height (可选)高度
<Array|Object>    options.offset (可选)偏移量。若为数组,索引0为x方向,索引1为y方向;若为Object,键x为x方向,键y为y方向。单位:px,默认值:[0,0]。
<boolean>    options.single (可选)是否全局单例。若该值为true,则全局共用唯一的浮起tooltip元素,默认为true。
<Number>    options.zIndex (可选)浮起tooltip层的z-index值,默认为3000。
<String>    options.positionBy (可选)浮起tooltip层的位置参考,取值['mouse','element'],分别对应针对鼠标位置或者element元素计算偏移,默认mouse
<Element>    options.positionElement (可选)定位元素,设置此元素且positionBy为element时,根据改元素计算位置
<Boolean> * options.autoRender 是否自动渲染。
<Function>    options.onopen (可选)打开tooltip时触发。
<Function>    options.onclose (可选)关闭tooltip时触发。
<Function>    options.onbeforeopen (可选)打开tooltip前触发。
<Function>    options.onbeforeclose (可选)关闭tooltip前触发。

实例方法

<void> render() 渲染Tooltip到HTML
<void> open(...) 打开tooltip
<void> update(...) 更新options
<void> close() 关闭tooltip
<void> dispose() 销毁控件

 [NextPage]

实例:

<script type="text/javascript">

 

var instance = new baidu.ui.Tooltip({type: "click",target:"toolTip",autoRender:true,content: "<div style='width:200px;height:100px'>显示的信息,信息内容可以自己设定,可以是文字也可以是html代码。</div>" });

 

/*

 

(function(){

 

  instance.open( baidu.dom.g('toolTip') );

 

})();

 

*/

 

/*

 

(function(){

 

  instance.open( baidu.dom.g('toolTip2') );

 

})();

 

*/

 

/*

 

instance.close();

 

*/

 

//提示:您可以使用注释中的代码进行演示

 

</script>

以上IT文章《baidu.ui.Tooltip 弹出tip层》由名客技术网[www.121ask.com]提供阅读!
名客技术网是一个免费为广大IT技术人员提供IT教程,绿色软件,asp/php/jsp/java/net等实例视频教程,CMS教程,破解软件下载以及学习相关源码、知识的IT网站。
名客技术网如果无意之中侵犯了您的版权,请来电告知,本站将在3个工作日内删除 QQ:175352796
Copyright 2011-2017 Powered by 121ASK.COM, All Rights Reserved.
备案号:鄂ICP备11013833号-3