RunSPA

A simple jQuery Single Page Application Plugin

• Lanx HCM Projects

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

Carlos Júnior

Issues

Please post issues and feature request here Github issues

Copyright and License

MIT © 2018 Carlos R F Júnior

⬆ back to top