Jquery李炎恢——41工具提示UI【7】

学习要点：

1.调用tooltip()方法

2.修改tooltip()样式

3.tooltip()方法的属性

4.tooltip()方法的事件

5.tooltip()中使用on()

工具提示，是一个非常实用的ui.它彻底扩展了HTML中的title属性，让提示更加丰富，更加可控制，全面提升了用户体验

一、调用tooltip()方法

在调用tooltp()方法之前，首先需要针对元素设置相应title属性

<input type="text" name="user" class="text" title="请输入账号，不小于2位！" />

$("#user").tooltip();

二、修改tooltip()样式

在弹出的tooltip提示框后，在火狐浏览器中打开Firebug或者右击查看元素，这样，我们可以看看tooltip的样式，根据样式进行修改。

//无须修改ui里的css，直接用style.css替代掉

ui.tooltip{

   color:red;

}

注意：其他修改方案类似

三、tooltip()方法的属性

对话框方法有两种形式：1.tooltip(options),options是以对象键值对的形式传参，每个键值对表示一个选项，2.tooltip（"action",param）,action是操作对话框方法的字符串，param则是options的某个选项

tooltip外观选项

属性：disabled，默认值/类型：false/布尔值，说明：设置为true，将禁止显示工具提示。

属性：content，默认值/类型：无/字符串，说明：设置title的内容

属性：items，默认值/类型：无/字符串，说明：设置选择器以限定范围

属性：tooltipClass，默认值/类型：无/字符串，说明：引入class形式的css样式。

$("[title]").tooltip({

  disabled:false,

  content:"改变文字"，

  items:"input",

  tooltipClass:"reg_tooltip"

});

tooltip页面位置选项

属性：position，默认值/类型：无/对象，说明：使用对象的键值对的值，有两个属性：my和at表示坐标，my是以目标点左下角为基准，at以my为基准

$("#user").tooltip({

   position:{

     my:"left center",

     at:"right+5 center"

   }

})

tooltip视觉选项

属性：show，默认值/类型：false/布尔值，说明：显示对话框时，默认采用淡入效果

属性：hide，默认值/类型：false/布尔值，说明：关闭对话框时，默认采用淡出效果

$("#user").tooltip({

   show:false,

   hide:false

});

注意：设置true后，默认为淡入淡出，如果想使用别的特效，可以使用以下参数
特效名称：bind,说明：工具提示从顶部显示或消失
特效名称：bounce,说明：工具提示断断续续地显示或消失、垂直运动
特效名称：clip,说明：工具提示从中心垂直显示或消失
特效名称：slide,说明：工具提示从左边显示或消失
特效名称：drop,说明：工具提示从左边显示或消失，有透明度变化
特效名称：fold,说明：工具提示从左上角显示或消失
特效名称：highlight,说明：工具提示显示或消失,伴随着透明度和背景色的变化
特效名称：puff,说明：工具提示从中心开始缩放。显示时“收缩”，消失时“生长”
特效名称：scale,说明：工具提示从中心开始缩放.显示时“生长”，消失时“收缩”
特效名称：pulsate,说明：工具提示以闪烁形式显示或消失

$("#user").tooltip({

   show:"bind",

   hide:"bind"

})

tooltip行为选项

属性：track，默认值/类型：false/布尔值，说明：设置为true，能跟随鼠标移动

$("#user").tooltip({

   track:true,

)

四、tooltip()方法的事件

除了属性设置外，tooltip()方法提供了大量的事件。这些事件可以给各种不同状态时提供回调函数，这些回调函数中的this值等于对话框内容的div对象，不是整个对话框的div

tooltip事件选项

事件名：create,说明：当工具提示被创建时会调用create方法，该方法有两个参数（event，ui），此事件中的ui参数为空。
事件名：open,说明：当工具提示被显示时会调用open方法。该方法有两个参数（event,ui）,此事件中的ui有一个参数tooltip,返回是工具提示的jquery对象
事件名：close,说明：当工具提示将要关闭时,会调用close方法，关闭的工具提示可以用tooltip（"open"）重新打开，该方法有两个参数（event,ui),此事件中的ui有一个参数tooltip,返回是工具提示的jquery对象。
//当创建工具提示时

$("#user").tooltip({

  create:function(){

     alert("创建触发！")

  }

})

//当工具提示关闭时

$("#user").tooltip({

  close:function(){

     alert("关闭触发！")

  }

})

//当工具提示打开时

$("#user").tooltip({

  open:function(){

     alert("打开触发！")

  }

})

tooltip("action" param)方法

方法：tooltip（"open"）,返回值：jquery对象，说明：打开工具提示
方法：tooltip（"close"）,返回值：jquery对象，说明：关闭工具提示
方法：tooltip（"disable"）,返回值：jquery对象，说明：禁用工具提示
方法：tooltip（"enable"）,返回值：jquery对象，说明：启用工具提示

方法：tooltip（"destroy"）,返回值：jquery对象，说明：删除工具提示，直接阻断了tooltip
方法：tooltip（"widget"）,返回值：jquery对象，说明：获取工具提示的jquery对象
方法：tooltip（"option",param）,返回值：一般值，说明：获取options属性的值
方法：tooltip（"option",param，value）,jquery对象：jquery对象，说明：设置options属性的值

//打开工具提示
$("#user").tooltip("open")

//关闭工具提示
$("#user").tooltip("close")

//禁用工具提示
$("#user").tooltip("disable")

//启用工具提示
$("#user").tooltip("enable")

//禁用工具提示
$("#user").tooltip("disable")

//获取工具提示的jquery对象

$("#user").tooltip("widget")

//获取options属性的值
alert($("#user").tooltip("option",content))

//设置options属性的值

($("#user").tooltip("option",content，"提示内容"))

五、tooltip()中使用on()

在tooltip的事件中，提供了使用on()方法处理的事件方法

on()方法触发的对话框事件

特效名称：tooltipopen,说明：显示时触发

特效名称：tooltipclose,说明：每一次移动时触发

$("#reg").on("tooltipopen",function(){

   alert("打开时触发！")

})