+++ title = "Custom Plugins" description = "Flexible and extensible way to add custom features" weight = 20 draft = false toc = true bref = "Kube has a lot to offer in terms of extensibility and flexibility, and plugins are the way of doing incredible things without bloating the core. With plugins, you can extend existing features, make them more interactive, or you can crate completely new functionality." +++
{{< rawhtml >}}
<span class="hljs-comment">// default settings</span>
<span class="hljs-keyword">this</span>.defaults = {
mysetting: <span class="hljs-literal">true</span>
};
<span class="hljs-comment">// Parent Constructor</span>
Kube.apply(<span class="hljs-keyword">this</span>, <span class="hljs-built_in">arguments</span>);
<span class="hljs-comment">// Initialization</span>
<span class="hljs-keyword">this</span>.start();
};
<span class="hljs-comment">// Functionality</span>
Kube.Myplugin.prototype = {
start: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)
</span>{
<span class="hljs-comment">// plugin element</span>
<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$element);
<span class="hljs-comment">// call options</span>
<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.opts.mysetting);
<span class="hljs-comment">// call methods</span>
<span class="hljs-keyword">this</span>.method();
},
method: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)
</span>{
<span class="hljs-comment">// do something...</span>
<span class="hljs-comment">// callback</span>
<span class="hljs-keyword">this</span>.callback(<span class="hljs-string">'show'</span>);
<span class="hljs-comment">// callback with arguments</span>
<span class="hljs-keyword">this</span>.callback(<span class="hljs-string">'show'</span>, value1, value2);
}
};
<span class="hljs-comment">// Inheritance</span>
Kube.Myplugin.inherits(Kube);
<span class="hljs-comment">// Plugin</span>
Kube.Plugin.create(<span class="hljs-string">'Myplugin'</span>);
Kube.Plugin.autoload(<span class="hljs-string">'Myplugin'</span>);
}(Kube));
<script> $('#my-element').myplugin(); </script>
<script> $('#myplugin').on('show.myplugin', function() { // do something... }); </script>
<span class="hljs-comment">// call plugin method</span>
<span class="hljs-keyword">this</span>.method();
}); </script>
How can I help you explore Laravel packages today?