RunSPA
A simple jQuery Single Page Application Plugin
Getting started
Quick start
Three quick start options are available:
- Download the latest release.
- Clone the repository:
git clone https://github.com/carlosrfjunior/runspa.git. - Install with NPM:
npm install runspa. - Install with Bower:
bower install runspa. - Install with Yarn:
yarn add runspa.
Installation
Include files:
dist/
├── runspa.js (80 KB)
└── runspa.min.js (68 KB)
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/dist/runspa.min.js"></script>Basic Use
- HTML definitions
<a href="#my/list" data-spa="my/list"></a> <!-- Definition menu or Button [Route Hash] -->
<div id="[ID Main Container]"></div> <!-- Definition Main Container, all content html will been load here -->- General Definitions
$.runspa({
id: '[ID Main Container]',
defaultPage: 'Route Default',
title: 'Title Default'
});- Routes Definitions
$.runspa.route('[Route Hash]', {
title: 'Title Page',
path: 'client', /* Optional */
autoCreateRoute: true, /* Optional */
metaTag: { /* All Meta Tags HTML*/
'keywords': '...',
'description': '...'
},
css: [
{url: 'path/style1.css'},
{url: 'path/style2.css'},
],
scripts: [
{url: 'path/scripts1.js' /* async optional */},
{url: 'path/scripts2.js' /* async optional */}
],
beforeSend: function () {
/* Code */
},
success: function (e) {
/* Code */
},
error: function (e) {
/* Code */
}
}, function (page) {
/* Code */
});- All available default settings
$.runspa({
id: undefined,
language: 'en',
defaultPage: undefined,
pageError: undefined,
autoCreateRoute: false,
method: 'GET',
cache: false,
data: undefined,
dataType: 'html',
extension: undefined,
prefix: undefined,
classActive: 'active',
success: undefined,
beforeSend: undefined,
error: undefined,
loading: true,
loadingClass: undefined,
loadingLabel: 'Loading...',
loadingImage: '[Data Image Base64]'
});Events
- Load the page required
$.runspa.get(name, [options, function]);Example:
$.runspa.get('Route Hash', {
title: 'Description Page',
path: 'client', /* Optional */
autoCreateRoute: true, /* Optional */
metaTag: { /* All Meta Tags HTML*/
'keywords': '...',
'description': '...'
},
css: [
{url: 'path/style1.css'},
{url: 'path/style2.css'},
],
scripts: [
{url: 'path/scripts1.js' /* [async:true, defer:true] optional */},
{url: 'path/scripts2.js' /* [async:true, defer:true] optional */}
],
beforeSend: function () {
/* Code */
},
success: function (e) {
/* Code */
},
error: function (e) {
/* Code */
}
}, function (page) {
/* Code */
});- Function load files script manual
$.runspa.inject(options, [function]);Examples:
- Load files javascript or CSS
$.runspa.inject({
css: [
{url: 'path/style1.css'},
{url: 'path/style2.css'},
],
scripts: [
{url: 'path/scripts1.js' /* [async:true, defer:true] optional */},
{url: 'path/scripts2.js' /* [async:true, defer:true] optional */}
]
});- Load Files CSS
$.runspa.inject({
css: [
{url: 'path/style1.css'},
{url: 'path/style2.css'},
]
});- Load Files JavaScript
$.runspa.inject({
scripts: [
{url: 'path/scripts1.js' /* [async:true, defer:true] optional */},
{url: 'path/scripts2.js' /* [async:true, defer:true] optional */}
]
});$.runspa.inject({
css: [
{url: 'path/style1.css'},
{url: 'path/style2.css'},
],
scripts: [
{url: 'path/scripts1.js' /* [async:true, defer:true] optional */},
{url: 'path/scripts2.js' /* [async:true, defer:true] optional */}
]
}, function(){
// Your Code
});Author
Issues
Please post issues and feature request here Github issues
Copyright and License
MIT © 2018 Carlos R F Júnior
