JQuery easyui (4)Tooltip (提示组件) 组件

   ps:先来一波美图

Tooltip的加载方式:

  1,class加载

1 <a href="#" title="tooltip">hello word</a>

  2,js 加载调用

$(‘#box‘).tooltip({
    content : ‘tooltip‘,
});

  Tooltip的属性列表

$(‘#box‘).tooltip({
    position : ‘top‘,    //消息框在当前元素的位置 left? right ? 默认是bootom
    content : ‘value ‘,   //    需要提示的内容 String 值
    trackMouse : true ,  //  为true时,可以跟随鼠标移动 默认false
    deltaX : 100,
    deltaY : 100,            //水平和垂直方向提示框的位置  默认是0
    showEvent : ‘click‘,    //当激活事件的时候显示提示框,默认mouseleave
    hideEvent : ‘dblclick’,  //当激活事件的时候显示提示框,默认为mouseleave
    showDelay : 500,    //延迟多少秒显示提示框 默认200
    hideDelay : 500,    //延迟多少秒隐藏提示框 默认100
});

  Tooltip的事件列表

onShow : function(e){
    //在现实提示框的时候触发
},
onHide : function(e){
    //在隐藏提示框的时候触发
}.
OnUpdate : function(content){
    //在提示框内容更新的时候触发
},
onposition : function(left,top){
    //在提示框位置改变的时候触发
},
onDestroy : function(none){
    //在提示框被销毁的时候触发
}

  Tooltip的方法列表

1 $(‘#box‘).tooltip(‘options‘);   //返回属性对象
2 $(‘#box‘).tooltip(‘show‘);    //显示提示框
3 $(‘#box‘).tooltip(‘hide‘);      //隐藏提示框
4 $(‘#box‘).tooltip(‘update‘,‘new value ‘);   //更新提示框提示的内容
5 $(‘#box‘).tooltip(‘tip‘);        //返回tip元素对象
6 $(‘#box‘).tooltip(‘destroy’);   //销毁提示框
7 $(‘#box‘).tooltip(‘reposition’);  //重置提示框位置

easyui 1.3.5 Tooltip组件完结

时间: 2024-08-09 13:00:45

JQuery easyui (4)Tooltip (提示组件) 组件的相关文章

第一百九十六节,jQuery EasyUI,Tooltip(提示框)组件

jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法,,这个组件不依赖于其 他组件. 一.加载方式 //class 加载方式 <a href="http://www.ycku.com" title="这是一个提示信息!" class="easyui-tooltip">Hover Me <

tooltip提示框组件

Tooltip 提示框组件 可独立于其他组件通过$.fn.tooltip.defaults重写默认的defaults.当用户移动鼠标指针在某个元素上时,出现提示信息窗口来显示额外信息.提示内容可以包含任何来自页面的或者通过ajax生成的html元素. 1.创建提示框 从标记创建提示框(tooltip),添加'easyui-tooltip' class到元素,不需要任何的javascript代码 <a href="#" title="This is the tooltip

第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件

jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于 DataGrid(数据表格)组件. 一.加载方式 建立一个 JSON 文件 [ { "id": 1, "name": "系统管理", "date": "2015-05-10", &quo

第二百零七节,jQuery EasyUI,MenuButton(菜单按钮)组件

jQuery EasyUI,MenuButton(菜单按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 MenuButton(菜单按钮)组件的使用方法,这个组件依赖于 Menu(菜单)组件和 LinkButton(按钮)组件. 一.加载方式 class 加载方式 <a href="javascript:void(0)" id="edit" class="easyui-menubutton"

第二百一十三节,jQuery EasyUI,NumberBox(数值输入框)组件

jQuery EasyUI,NumberBox(数值输入框)组件 功能:只能输入数值,和各种数值的计算 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 NumberBox(数值输入框)组件的使用方法,这个组件依赖 于 ValidateBox(验证框)组件. 一.加载方式 class 加载方式 <input type="text" class="easyui-numberbox" value="10

第二百二十五节,jQuery EasyUI,PropertyGird(属性表格)组件

jQuery EasyUI,PropertyGird(属性表格)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 PropertyGird(属性表格)组件的使用方法,这个组件依赖 于 DataGrid(数据表格)组件. 一.加载方式 class 加载方式 <table id="box" class="easyui-propertygrid" style="width:300px" data-opt

第一百一十节,jQuery EasyUI,SearchBox(搜索框)组件

jQuery EasyUI,SearchBox(搜索框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SearchBox(搜索框)组件的使用方法,这个组件依赖于 MenuButton(按钮)组件. 一.加载方式

第二百一十八节,jQuery EasyUI,TimeSpinner(时间微调)组件

jQuery EasyUI,TimeSpinner(时间微调)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TimeSpinner(时间微调)组件的使用方法,这个组件依赖于 Spinner(微调)组件. 一.加载方式 class 加载方式 <input id="box" class="easyui-timespinner"> timespinner()将一个输入框执行时间微调组件方法 JS 加

jQuery Easy UI Tooptip(提示框)组件

我们都知道DOM节点的title属性,Tooptip组件就是比较强大的title,它可以自由的设置自己的样式.位置以及有自己相关的触发事件. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src=&

Tooltip(提示框)组件

一.加载方式 //class加载方式 <a href="http://www.ycku.com" title="这是一个提示信息!" class="easyui-tooltip">Hover Me </a> //JS 加载调用 $('#box').tooltip({ content : '这里可以输入提示内容', }); 二.属性列表 //属性设置 $('#box').tooltip({ position : 'top',