JQuery keyword description plug-in cluetip User Guide

JQuery keyword description plug-in cluetip User Guide

JQuery keyword description plug-in cluetip User Guide

We often use tip effects when doing web projects. The title of the label is displayed in html, but the effect is too simple and ugly, and it is not convenient to adjust the style. Today, I accidentally found a jQuery plug-in that can easily make beautiful prompts.

The website we develop always has a certain purpose. For example, the enterprise site is used to promote an enterprise or display products, and the technical site is used to share its own ideas and experiences. Since the website has its purpose, it has its own keywords (key words indicate the main content of the website ). For example, most of the keywords on the enterprise site are enterprise names or product names, and most of the keywords on the technical site are technical terms. Whether it's about promoting products or sharing ideas and experiences, we want to add instructions or links to certain terms (jump to the terms page). Then we can use the cluetip plug-in.

1. cluetip plug-in Function

It is mainly used to add the prompt description function for some keywords and display advertisements. The cluetip plug-in can read content from another html file,

For example

Keywords

Read the contents of the ajax3.html page.

The official address demo has instructions for use.

2. cluetip official address

Https://github.com/kswedberg/jquery-cluetip

Detailed instructions for using plug-ins are available on the official address.

The most common attributes are:

SplitTitle: '|' delimiter between the title and content

Sticky: true whether to enable force disable. true indicates enable. You must click Close to close the current prompt.

CloseText: 'image or text' closed image or text display, such

ClosePosition: 'title' the position of the close button

DropShadow: false whether to add a shadow. true indicates adding a shadow. false indicates not adding a shadow.

PositionBy: 'mouse 'indicates whether to move the form by the mouse.

Truncate: 60 truncation length, indicating that the length is too long, only take the first 60 words

3. How to Use cluetip

1. reference file

?

1 2 3

<Link rel = "stylesheet" href = "jquery.cluetip.css" type = "text/css"/> <Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"> </script> <Script src = "jquery. cluetip. js"> </script>

2. Define a style. You can use official styles or customize them. Modify the jquery.cluetip.css file. As shown in this example

?

1 2 3 4 5 6 7 8 9 10

Body { Font-size: 12px; Font-family:; } P { Width: 500px; } . Split-body { Color: blue; }

3. js code used

?

1 2 3 4 5 6 7 8 9 10 11 12 13

$ (Function (){ $ ('A. javascript '). cluetip ({splitTitle:' | ', width: '200px', showTitle: false }); Certificate ('a.html '). cluetip ({ SplitTitle: '| ', Sticky: true, CloseText: ' ', ClosePosition: 'title ', DropShadow: false, PositionBy: 'mouse' // Truncate: 60 });   });

4. html used

?

1	<A href = '# 'title =' prompt title | prompt content 'class = 'style'> keywords </a>

The above is all the content of this article. I hope you will like it.