return to thexeroxprojects.be - This plugin is made by Thexeroxprojects.be

fLoadingSite 0.1 Jquery Plugin - How to use

How to use

1. Include nessesary JS files

Loading jQuery from CDN (Content Delivery Network) is recommended.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fLoadingSite/jquery.fLoadingSite-0.1-pack.js"></script>

2. Call function

We'll just do an easy function call. The plugin will load the content into the class "content".

<script type="text/javascript">
$(window).bind("load", function() {
$('#content').fLoadingSite(

	{
	url_location:  'http://localhost', 
	handler: '.pageHandler'
	});

});
</script>
We added 2 options. First we need to add our url location.(url_location) (e.g. yourdomain.net).
The option "handler" contains the class which will load new content if clicked.
The homepage is standard "home.html" so we won't change it.

3. Setup Page

Now let's add te needed content to our document. We'll need a div to load content and a "a" tag to load the content. The tag has got a class named "pageHandler". This class will be used be the plugin. "name" containts the relative path to the content that will be loaded.

<div class="content"></div>
<a href="#home.html" class="pageHandler" name="home.html">Link to load homepage</a>

4. Create a dummy page

The main content is ready. Now let's create another page with some content. Name it "home.html" add some dummy text and save it.

5. Ready to go

Hooray! Your plugin should work now!
You can setup some extra options to customize.
You can added infinite of links. Just set the up as showed in step 2.
All options are listed below.

Options

Key Default value Description
url_location http://localhost The absolute path to your site
map_location null Relative path to your content map
handler .pageHandler The class who triggers to load a new page
loadingImg images/ajax-loader.gif absolute path to loading Image
home_page home.html relative link to Standard page