Shulou(Shulou.com)06/02 Report--

This article shows you how to apply clueTip in the jquery message prompt box, which is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

ClueTip is a very good, jQuery-based information prompt plug-in. When you mouse over a link or an element on the page, a beautiful prompt box appears. The content in the prompt box can be on this page or loaded through ajax. ClueTip also provides many configurable parameters, and users can customize different effects and styles according to the actual situation.

ClueTip has the following features:

It is very easy to use

Customizable, providing a large number of configurable parameters

The prompt window can automatically adjust the position according to the page size.

Page content can be loaded on ajax

Cross-browser compatibility, compatibility with mainstream browsers such as IE6+,Firefox,Safria,Opera.

XHTML

ClueTip has two ways to display the prompt window: loading remote page content through the "rel" property ajax and loading page content through the "title" property (the default setting).

1. Load the content through the title attribute

Slide the mouse over to see the effect.

2. Load remote page content through the rel attribute

Ajax loads PHP pages

Javascript and style

Add jquery and clueTip plug-ins and style clueTip.css between them.

$(function () {$('a.title') .cluetip ({splitTitle:' |'}); $('a.basic') .cluetip ();})

List of common parameters of clueTip plug-in

Parameter description default width prompt window width 275 height prompt window height 'auto' positionBy set prompt window location:' auto', 'mouse','bottomTop',' fixed' 'auto' topOffset window relative (top) displacement 15 leftOffset window relative (left) displacement 15 local whether to use the content of the same page, it can be a DIV in the page At this time, you should set the properties used by the rel= "# ID" false attribute to receive the window content, the rel titleAttribute window title property title splitTitle, set the content separator''showTitle to display the style of the title true cluetipClass window, and the name format of the style is. Cluetip-cluetipClass default waitImage whether to display the waiting loading picture before the content is loaded. Whether true sticky closes the window when it is manually clicked close false closePosition sets the position of the close button: 'top' or' bottom' or 'title'' top closeText closes the content displayed by the button, which can be text or html picture 'Close'

For more parameter settings, please visit the official website: http://plugins.learningjquery.com/cluetip/

Cluptip in the user clicked on the link, the page will not turn to the href address, but there is no response, that how to solve the link directly to the link after the page? The solution is to bind the click event of the a tag as follows:

$('a.basic) .bind (' click',function () {_ window.location.href=$ (this) .attr ('href');})

The above content is how to apply clueTip in the jquery message prompt box. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.