Getting started with TagSphere is pretty simple. The first thing you need to do is download the tagsphere.js and tagsphere.css files. Then you can link them in your source code:
<script src="tagsphere.js"></script>
<link rel="stylesheet" href="tagsphere.css">
Next, you need to place a holder for the tagsphere somewhere in your code. Within this holder, you can put your list.
<div id="tagsphere-holder1" class="tagsphere-holder"> <ul class="tagsphere"> <li><a href="http://google.com">Google</a></li> <li><a href="http://www.yahoo.com/">Yahoo!</a></li> <li><a href="http://www.bing.com/">Bing</a></li> <li><a href="http://www.faroo.com/">FAROO</a></li> </ul> </div>
Finally, you just need to initialize tagsphere.
<script>
$tagsphere("tagsphere-holder1", {size:60, smallestsize:22, biggestsize:16});
<script>
The syntax of creating a tagsphere object is fairly simple:
$tagsphere(id of holder[, options, callback]);
Note: Options 'size', 'smallestsize', and 'biggestsize' are recommended as minimal settings.
TagSphere can use some options to configure how the object looks and acts.
options.border - (Boolean) Determines whether there will be aborder around the objectoptions.bordercolor - (CSS color) Sets the color of the border. options.backgroundcolor - (CSS color) Sets the background color of the object.options.tag.font - (Font Name) Sets the font family of the tags. options.tag.borderstyle - (CSS Border Style) Sets the style of the border around each tag when highlighted.options.tag.backgroundcolor - (CSS Color) Sets the background color of each tag.options.tag.borderwidth - (CSS dimension) Sets the width of the border around each tag. options.biggestsize - (Integer) Sets the biggest size of font to be displayed in the TagSphere. options.smallestsize - (Integer) Sets the smallest size of font to be displayed in the TagSphere.options.size - (Integer) sets the pixel length of the width,height of the TagSphere.options.extjson - (URL) Sets the url for the JSON input and indicates it should be used.options.mousespeed - (Integer) Constant multiplier which determines the speed with which the TagSphere reacts to mouse movements.options.color - (CSS color) Sets the font color of the tags.options.refresh - (Integer) Sets the speed (in ms) of the interval between refreshing. (Default:100)TagSphere can be configured to use properly formatted JSON data from an external URL. The URL should be supplied to options.extjson, and the data should be in the format:
[
{
"type": "onclick" or "href",
"tag": "[tag text]",
"url": "[url or link action]"
},
...
]
|