jquery tools之tooltip_jquery
May 16, 2016 pm 06:49 PM如tabs的學(xué)習,首先給出操作的html目標代碼:
該功能是通過jqueryObject.tooltip()方法來實現(xiàn)的,其中tabs方法提供以下兩種方式:
1. $("#myform :input").tooltip()//該方法能采用默認方法顯示提示信息欄
2. $("#myform :input").tooltip({config object}) //該方法通過配置對象將來靈活組織提示信息欄的顯示。
以下代碼為第二種方式的配置參數(shù)實現(xiàn)(只需將該實現(xiàn)放于jquery的ready方法中即可):
$("#myform :input").tooltip({
position:['center','right'],
offset:[-2,10],
effect:'fade',
fadeInSpeed:300//此屬性只有在effect為fade時有效
delay:0,
opacity:1,
tip:"",
api:false,
onBeforeShow:function(){
//alert(this.getTip().html());//this在該回調(diào)函數(shù)代表即將顯示的tooltip對象
//,關(guān)于該api對象的操作參見獲取tolltip對象的方法
},
onShow:function(){
//alert(this.getTip().html());
},
onBeforeHide:function(){
//alert(this.getTip().html());
},
onHide:function(){
//alert(this.getTip().html());
}
});
下面就以上配置參數(shù)說明描述如下:
?
屬性 | 默認值 | 描述 |
effect | slideup' |
設(shè)置提示框出項和隱藏方式,系統(tǒng)提供提供三種effect:toggle,fade,slideup,當然用戶也可以定制所需的effect。對于系統(tǒng)提供的三種effect,系統(tǒng)也提供了與其對應(yīng)的配置參數(shù),這里會在下面單獨仔細描述。 |
delay | 30 | 設(shè)置鼠標離開觸發(fā)提示框的觸發(fā)器后提示框顯示時間 |
offset | [0, 0] | 精確的調(diào)整提示框的位置,該屬性具體使用將在下面提示框位置說明中詳細描述。 |
opacity | 1 | 設(shè)置提示框的透明度,取值為0-1,值越大表示提示框透明度越低,0為完全透明,此時提示框如同不顯示,為1則提示框完全不透明如果背景圖片設(shè)置為PNG24圖形格式,則可以設(shè)置背景圖片的透明度 |
position | ['top', 'center'] | 初略的設(shè)置提示框位置,如需精確控制提示框位置,需配合offset使用,該屬性具體使用將在下面提示框位置說明中詳細描述。 |
tip | 設(shè)置存儲提示框信息的頁面元素,tip值格式為jquery選擇器格式.默認情況下,提示框信息存放于觸犯器元素的下一個緊鄰的兄弟節(jié)點處,如果該處選擇器選擇的是頁面元素id的話,那么該頁面元素將成為所有觸發(fā)器的提示信息;否則,如果選擇器選擇出多個結(jié)果,那么,每個觸發(fā)器都會找到其后第一個符合的頁面元素作為提示信息.如果沒有的話,就從觸發(fā)器父親節(jié)點重新檢索。 | |
api | FALSE | 設(shè)置當前tooltip所在容器的返回類型類型。如果為false(默認值),以jquery對象返回;否則,以js對象返回。如果存在多個值,返回最后一個值。 |
on |
提示信息出現(xiàn)之前調(diào)用該屬性觸發(fā)的函數(shù),如果該回調(diào)函數(shù)返回false,那么就會阻止提示信息顯示。 | |
on |
提示信息顯示后調(diào)用該屬性觸發(fā)的函數(shù) | |
on |
提示信息顯示后調(diào)用該屬性該屬性觸發(fā)的函數(shù),如果該回調(diào)函數(shù)返回false,那么就會阻止提示信息隱藏 | |
on |
提示信息隱藏后調(diào)用該屬性該屬性觸發(fā)的函數(shù) |
提示框位置說明
?????? 提示框位置通過config配置對象的position和offset屬性來設(shè)置實現(xiàn)。這兩個屬性都是用js數(shù)組進行值存放的。
?????? Position屬性用來設(shè)置提示信息相對于它的觸發(fā)元素位置。比如說,如果該屬性值為[‘bottom','center'],那么提示信息將會出現(xiàn)在其觸發(fā)元素的正下方(垂直位置為下方,水平位置為中間)。下圖能很好的描述觸發(fā)元素與提示信息的位置關(guān)系:
?
offset屬性用來進一步精確的調(diào)整提示框的位置。比如:[10,-20]表示提示信息向下10px并向左偏移20px。數(shù)組的前一個值用于描述提示框距其上邊框向下偏移的值;數(shù)組的后一個值 用于描述提示框距其左邊框向右偏移的值。
系統(tǒng)內(nèi)置effect描述
系統(tǒng)內(nèi)置的三種effect及其參數(shù)設(shè)置說明:
?toggle:一種簡單的顯示/隱藏效果,這里tooltip沒有提供與之對應(yīng)的配置參數(shù)
fade:一種逐漸顯示/逐漸隱藏的效果,這里tooltip提供了兩個與其對應(yīng)的配置參數(shù):
fadeInSpeed——默認值為200ms,用于設(shè)置提示信息逐漸顯示的速度。
fadeUotSpeed——默認值為200ms,用于設(shè)置提示信息逐漸隱藏的速度。
?slideup:一種逐漸向上/下滑動的效果,這里tooltip提供了三個與其對應(yīng)的配置參數(shù):
slideOffset——默認值為10,用于描述提示信息在垂直方向上滑動到距觸發(fā)元素的距離,如果為正值,那么就是向上滑動,否則為向下滑動。
slideInSpeed——默認值為200ms。用于設(shè)置提示信息滑動顯示的速度(時間)
slideOutSpeed——默認值為200ms。用于設(shè)置提示信息滑動消失的速度(時間)
此外,tooltip還提供了一系列獲取tooltip對象的方法,具體實現(xiàn)描述如下:
var tooltip=$("#myform input").tooltip(2);//取第3個tooltip對象
tooltip.show();
tooltip.hide();
//alert(tooltip.isShown());
//alert(tooltip.getTip().html());
//alert(tooltip.getTrigger().next().html());
//alert(tooltip.getConf().effect);
tooltip.onBeforeShow=function()
//alert(this.getTip().html());
}
tooltip.onShow=function(){
alert(this.getTip().html());
}
tooltip.onBeforeHide=function(){
alert(this.getTip().html());
}
tooltip.onHide=function(){
alert(this.getTip().html());
}
下面就以上獲取tooltip對象的方法說明描述如下:
方法名 | 返回值 | 描述 |
show() | API | 顯示提示信息,如果取到多個tooltip對象,默認顯示第一個tooltip對象提示信息 |
hide() | API | 隱藏提示信息 |
isShown() | boolean | 該tooltip對象的提示信息是否處于顯示狀態(tài) |
getTip() | jQuery | 將當前tooltip對象轉(zhuǎn)換為jquery對象 |
getTrigger() | jQuery | 將當前tooltip的觸發(fā)器對象轉(zhuǎn)換為jquery對象 |
getConf() | Object | getConf()獲取當前觸發(fā)器器配置對象,對于對象內(nèi)的每個屬性調(diào)用只需直接取屬性名即可 |
on |
API | 同Config參數(shù)配置對象中的on |
on |
API | 同Config參數(shù)配置對象中的on |
on |
API | 同Config參數(shù)配置對象中的on |
on |
API | 同Config參數(shù)配置對象中的on |
?最后,以jquery tools上幾個demo的截圖為結(jié)尾:
?
?

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Detailed explanation of jQuery reference method: Quick start guide jQuery is a popular JavaScript library that is widely used in website development. It simplifies JavaScript programming and provides developers with rich functions and features. This article will introduce jQuery's reference method in detail and provide specific code examples to help readers get started quickly. Introducing jQuery First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or downloaded

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

jQuery is a fast, small, feature-rich JavaScript library widely used in front-end development. Since its release in 2006, jQuery has become one of the tools of choice for many developers, but in practical applications, it also has some advantages and disadvantages. This article will deeply analyze the advantages and disadvantages of jQuery and illustrate it with specific code examples. Advantages: 1. Concise syntax jQuery's syntax design is concise and clear, which can greatly improve the readability and writing efficiency of the code. for example,

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on ??the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element

jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s

jQuery is a popular JavaScript library widely used in web development. During web development, it is often necessary to dynamically add new rows to tables through JavaScript. This article will introduce how to use jQuery to add new rows to a table, and provide specific code examples. First, we need to introduce the jQuery library into the HTML page. The jQuery library can be introduced in the tag through the following code:
