LoremIpsum-Beispiel¶

<!DOCTYPE html>
<html>
    <head>
        <title>LoremIpsum.html</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
        <script src="https://cdn.alvine.io/libs/alvine/framework/alvine.framework-1.0.1.min.js"></script>
    </head>
    <body>
        <div id="container" data-loremipsum-length="15"></div>

        <script>

            var TEXT = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.';

            /**
             * Plugin
             * 
             * @returns {InternalPlugin}
             */
            function InternalPlugin() {
            }

            InternalPlugin.prototype = new Alvine.jQuery.Plugin();
            InternalPlugin.prototype.constructor = InternalPlugin;

            InternalPlugin.prototype.insertText = function() {
                this.reference.jqElements.html(TEXT.substring(0, this.component.element.Alvine.LoremIpsum.getSetting('length')));
            };

            /**
             * Defaults 
             * 
             * @param {type} options
             * 
             * @returns {InternalPlugin}
             */
            InternalPlugin.prototype.getDefaults = function() {
                return {
                    length: 20
                };
            };

            /**
             * Factory-Funktion
             * 
             * @param {type} options
             * @returns {InternalPlugin}
             */
            function LoremIpsum(options) {
                return new InternalPlugin(options);
            }

            // Plugin an das DOM binden
            jQuery('#container').asignAlvineComponent(LoremIpsum, {length: 25});
            jQuery('#container').get(0).Alvine.LoremIpsum.plugin.insertText();
        </script>


    </body>
</html>