fLoadingSite 0.4 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>
// Important !! new in version 0.4
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="/fLoadingSite/jquery.fLoadingSite-0.3-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
handler	.pageHandler	The class who triggers to load a new page
loadingImg	images/ajax-loader.gif	absolute path to loading Image
loadingText	false	Text you want to show will loading content
loaderContainer	this	Gives the possibilty to load the loader in a different container as content container
home_page	home.html	relative link to Standard page
autoLoad	true	load hompage on start or not
mainTitle	null	Changes/adds a title to the Document titel
extraTitle	null	Changes/adds a extra title to the Document titel
effect	slider	Changes the effect. Available effects: Click for list
pfnMessage	404 Page not found	Message (in html) to be showed when page does not excist

Effects

Name	Description
simple
fancyPush
fade
slider
puff
bounce
clip
explode