Nine Project Managers

    runspa

    1.1.7 • Public • Published

    RunSPA

    bower NPM version Build Status

    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

    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

    Install

    npm i runspa

    DownloadsWeekly Downloads

    5

    Version

    1.1.7

    License

    MIT

    Unpacked Size

    389 kB

    Total Files

    20

    Last publish

    Collaborators

    • carlosrfjunior