Simple Tag Cloud

The tag cloud is a great way to display the topics that your blog visitors are interested in. In addition to these links to see what your site covers, but also to help readers easily find the hot topic in the site. Another big effect of the tag cloud is that they can be used to describe anything that is relevant to the frequency, and you can link to articles, blog posts, pictures, videos or other content as long as your site is rich enough.

The tag cloud isn't easy to do without jquery. Thanks to jquery for bringing us such a handy way of writing JavaScript. The following easy tutorials will use the jquery 1.4.2 version, which uses Php+mysql to get a JSON string containing tag information (signature, frequency) from the server side with Ajax.

Source code Download: Tag Cloud

Gettting started

Start by creating a simple HTML page that is simple enough to contain only an asynchronous request to get a JSON string containing the tag information from the server

The following are the referenced contents: <! DOCTYPE HTML Public "-//w3c//dtd HTML 4.01//en" "Http://www.w3.org/TR/html4/strict.dtd" > < HTML > < Head > < Link rel = "stylesheet" type = "Text/css" href = "Tagcloud.css" > < Meta http-equiv = "Content-type" content = "text/html charset=utf-8" > < title >jQuery Tag Cloud</title> </ Head > < Body > < Div ID = "Tagcloud" > < H2 > Tag Cloud</h2> </ Div > < Script type = "Text/javascript" src = "Jquery-1.4.2.min.js" ></ Script > <script type="Text/javascript"> $ (function() { Get tag Feed $.getjson ("http://localhost:9000/jquery/tagcloud.php?callback=?" ) function (data) { Process JSON Object }); }); </ Script > </ Body > </ HTML >

Getjson

The HTML page above initiates an asynchronous request and uses the callback function to process the acquired asynchronous data (of course, nothing has been done here). The following creates a PHP page that queries the database and returns a JSON string containing the label information, which is the parameter value of the $.getjson callback function ($.getjson second argument).

Create a database Tagcloud, and add a tags table, insert a few data, tags table as a data source.

The following are the referenced contents: CREATE DATABASE Tagcloud Go Use Tagcloud Go CREATE TABLE Tags ( varchar (100), Int ) into tags (tag,frequency) SELECT ' JQuery ', UNION SELECT ' JavaScript ', 190 UNION SELECT ' CSS ' UNION SELECT ' Yui ' UNION SELECT ' HTML ' UNION SELECT ' Design ' UNION SELECT ' php ' UNION SELECT ' MySQL ' UNION SELECT ' Ajax ' UNION SELECT ' JSON ' UNION SELECT ' security ' UNION SELECT ' Browsers ' UNION SELECT ' Tutorial ' UNION SELECT ' semantics ' UNION SELECT ' Widgets ' UNION SELECT ' OOP ' UNION SELECT ' WordPress ' UNION SELECT ' Debugging ' UNION SELECT ' seo ', 10