Файл: documentation/index.html
Строк: 261
<?php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MelonHTML5 - Royal Preloader</title>
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreRDark.css"/>
<link type="text/css" rel="stylesheet" href="assets/style.css"/>
<script type="text/javascript" src="assets/jquery.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript">
$(document).ready(function() {
SyntaxHighlighter.all();
});
</script>
</head>
<body>
<header></header>
<div id="wrapper">
<h1>JavaScript & CSS</h1>
<p>Include JavaScript and CSS files in <b>HEAD</b> tag.<br> <b>jQuery UI</b> is only required when multiple backgrounds are enabled in IE7,8,9.</p>
<pre class="brush: js; toolbar: false; auto-links: false;">
<head>
<link rel="stylesheet" type="text/css" href="royal_preloader.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="royal_preloader.min.js"></script>
<script type="text/javascript">
Royal_Preloader.config({
mode: 'text',
text: 'MelonHTML5 - Royal Preloader...',
background: '#000000'
});
</script>
</head>
</pre>
<div class="hr"></div>
<h1>HTML Code</h1>
<p>Add a class name "royal_preloader" to the BODY tag and a "royal_preloader" placeholder straight after the BODY tag.</p>
<pre class="brush: js; toolbar: false;">
<body class="royal_preloader">
<div id="royal_preloader"></div>
...
...
...
</body>
</pre>
<div class="hr"></div>
<h1>Configurations</h1>
<ul>
<li>
<div class="opt_name"><b>mode</b><span class="t">string</span></div>
<div class="opt_detail">Default value: <span class="c">number</span><br>Possible values: <span class="c">text</span>, <span class="c">scale_text</span>, <span class="c">number</span>, <span class="c">line</span>, <span class="c">logo</span>, <span class="c">progress</span>
<br><span class="c">number</span>: a loader image is shown, the loading progress is displayed in percentage values and loading details are also displayed on each image load.
<br><span class="c">text</span>: a pre-defined text will be displayed in the center of the screen, and fades out from left ro right.
<br><span class="c">text</span>: a pre-defined text will be displayed in the center of the screen, and zoomed in from left ro right.
<br><span class="c">logo</span>: displaying a logo in the screen center, and fades out from bottom to top.
<br><span class="c">line</span>: displaying a youtube like loading progress bar on top of the page.
<br><span class="c">progress</span>: displaying a horizontal progress bar width a progress indicator in the center of the page
</div>
<pre class="brush: js; toolbar: false; auto-links: false;">
Royal_Preloader.config({
mode: "text"
});
</pre>
</li>
<li>
<div class="opt_name"><b>images</b><span class="t">Array</span>(optional)</div>
<div class="opt_detail">Default value: <span class="c">empty</span>.<br>Define additional images to be preloaded. This option is generally used to load images that are not directly displayed as <IMG> tags. (For example: background images used in CSS, third party photo gallery plugins...etc)</div>
<pre class="brush: js; toolbar: false; auto-links: false;">
var images = [
'http://www.melonhtml5.com/images/wallpaper/1.jpg',
'http://www.melonhtml5.com/images/wallpaper/2.jpg',
'http://www.melonhtml5.com/images/wallpaper/3.jpg',
'http://www.melonhtml5.com/images/metro_gallery.png',
'http://www.melonhtml5.com/images/emu_slider.png',
'http://www.melonhtml5.com/images/cut_the_rope.png',
'http://www.melonhtml5.com/images/tab.png'
];
Royal_Preloader.config({
images: images
});
</pre>
</li>
<li>
<div class="opt_name"><b>timeout</b><span class="t">Int</span></div>
<div class="opt_detail">Default value: <span class="c">10</span> (seconds).<br>When timeout is exceeded, no matter images have been all downloaded or not, the loading screen will finish and your website will be shown.</div>
<pre class="brush: js; toolbar: false;">
Royal_Preloader.config({
timeout: 10
});
</pre>
</li>
<li>
<div class="opt_name"><b>background</b><span class="t">String</span></div>
<div class="opt_detail">Default value: <span class="c">"#000000"</span>.<br>The background colour of the loader.</div>
<pre class="brush: js; toolbar: false;">
Royal_Preloader.config({
backgorund: '#000000'
});
</pre>
</li>
<li>
<div class="opt_name"><b>text</b><span class="t">String</span></div>
<div class="opt_detail">Default value: <span class="c">loading...</span><br>Set the loading text. (this is only used in "text" and "scale_text" modes)</div>
<pre class="brush: js; toolbar: false; auto-links: false;">
Royal_Preloader.config({
text: "MelonHTML5 - Royal Preloader..."
});
</pre>
</li>
<li>
<div class="opt_name"><b>text_color</b><span class="t">String</span></div>
<div class="opt_detail">Default value: <span class="c">#FFFFFF</span><br>Set the text colour. (this is only used in "text", "scale_text", logo" and "number" mode)</div>
<pre class="brush: js; toolbar: false; auto-links: false;">
Royal_Preloader.config({
text_colour: "#FFFFFF"
});
</pre>
</li>
<li>
<div class="opt_name"><b>logo</b><span class="t">string</span></div>
<div class="opt_detail">Default value: <span class="c">empty string</span>.<br>The URL of the logo image. (this is only used in "logo" mode)</div>
<pre class="brush: js; toolbar: false; auto-links: false;">
Royal_Preloader.config({
logo: 'http://www.example.com/logo.jpg'
});
</pre>
</li>
<li>
<div class="opt_name"><b>logo_size</b><span class="t">array</span></div>
<div class="opt_detail">Default value: <span class="c">[80, 80]</span>.<br>The size of the logo. (this is only used in "logo" mode)</div>
<pre class="brush: js; toolbar: false; auto-links: false;">
Royal_Preloader.config({
logo_size: [80, 80]
});
</pre>
</li>
<li>
<div class="opt_name"><b>showProgress</b><span class="t">Boolean</span></div>
<div class="opt_detail">Default value: <span class="c">true</span>.<br>Show the loading progress. (this is only used in "number", "logo" and "progress" modes)</div>
<pre class="brush: js; toolbar: false;">
Royal_Preloader.config({
showProgress: true
});
</pre>
</li>
<li>
<div class="opt_name"><b>showPercentage</b><span class="t">Boolean</span></div>
<div class="opt_detail">Default value: <span class="c">true</span>.<br>Display a % symbol in the loading progress.</div>
<pre class="brush: js; toolbar: false;">
Royal_Preloader.config({
showPercentage: true
});
</pre>
</li>
<li>
<div class="opt_name"><b>cookie</b><span class="t">string</span></div>
<div class="opt_detail">Default value: <span class="c">false</span>.<br>When cookie is set, the Royal Preloader only shows once. To reset the cookie, you can either remove the cookie option or use a differnt key value.</div>
<pre class="brush: js; toolbar: false;">
Royal_Preloader.config({
cookie: 'put_a_unique_cookie_string_key_her'
});
</pre>
</li>
<li>
<div class="opt_name"><b>onComplete</b><span class="t">Function</span></div>
<div class="opt_detail">Default value: <span class="c">null</span>.<br>Callback function to be executed after loading is completed.</div>
<pre class="brush: js; toolbar: false;">
Royal_Preloader.config({
onComplete: function() {
alert('Woo hoo, loading images are complete');
}
});
</pre>
</li>
</ul>
</div>
<footer>
<a href="http://www.melonhtml5.com" target="_blank">@ MelonHTML5</a>
</footer>
</body>
</html>
?>