jquery keyword Description plugin cluetip usage Guide

Source: Internet
Author: User

jquery keyword Description plugin cluetip usage Guide

When we do a Web project, we often use the hint effect. HTML's own hint effect is the label label title, but the effect is too simple and ugly, and not easy to adjust the style. Today, I stumbled upon a jquery plugin that made it easy to make beautiful hints.

We develop the website, always has its certain use. If the enterprise station used to promote the enterprise or display products, technology stations to share their ideas and experience. Since the site has its use, then it has its own keywords (keyword description of the main content of the site). For example, the key words of Enterprise Station are enterprise name or product name, most of the key words of technical station are technical terms. Whether it's a corporate promotional product or shared thinking experience, we all want to add a description or link to some terms (jump to the term page), where we can use the Cluetip plugin.

1. Cluetip Plug-in function

It is mainly used to add hints for certain keywords, or to display ads. The Cluetip plug-in can read the contents of another HTML file.

Such as

Keywords

Will 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 on the use of Plug-ins on the official address

The most commonly used properties are:

Splittitle: ' | ' The separator of title and content

Sticky:true whether to turn on forced shutdown true to open. You must click Close to close the current prompt

Closetext: ' Picture or text ' close to a picture or text display, as

Closeposition: ' title ' The position of the close button

Dropshadow:false Whether add shadow True to add, false to do not add

Positionby: ' Mouse ' prompts the form to move by mouse position.

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

3.cluetip Use method

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 style. You can use the official style, or you can customize it. You need to modify the Jquery.cluetip.css file when customizing. As shown in this example

?

1 2 3 4 5 6 7 8 9 10 body{font-size:12px font-family: Microsoft James Black; p{width:500px; split-body a{;}

3. Use of JS code

?

1 2 3 4 5 6 7 8 9 10 11 12-13 $ (function () {$ (' a.javascript '). Cluetip ({splittitle: ' | ', Width: ' 200px ', Showtitle:false}); $ (' a.html '). Cluetip ({ Splittitle: ' | ', Sticky:true, Closetext: ' ', closeposition: ' title ', Dropshadow:fals   E, Positionby: ' Mouse '//truncate:60}); });

4. HTML to use

?

1 <a href= ' # ' title= ' tip title | hint content ' class= ' style ' > keyword </a>

The above mentioned is the entire content of this article, I hope you can enjoy.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.