I am able to run the Aurelia app by following the steps provided in getting started tutorial. They have used bootstrap nav-bar in the skeleton application. Is it possible to use JQuery UI components in the Aurelia app. If yes, please explain me how to achieve this.
Thanks in advance.
UI stands for User interface, It is a set of plug-ins for jQuery that adds new functionalities to the jQuery core library. The set of plug-ins in JqueryUI includes interface interactions, effects, animations, widgets, and themes built on top of jQuery JavaScript Library.
Both jQuery and jQuery UI are free and open-source software distributed by the jQuery Foundation under the MIT License; jQuery UI was first published in September 2007.
Aurelia is a collection of Modern JavaScript modules, which when used together, function as a powerful platform for building browser, desktop and mobile applications, all open source and built on open web standards.
Yes, it's possible!
I've made a jQueryUI Tabs example for you:
tabs.html
<template>
<ul>
<li repeat.for="tab of tabs">
<a href="${'#' + $parent.id + '-' + $index}">${tab.title}</a>
</li>
</ul>
<div repeat.for="tab of tabs" id="${$parent.id + '-' + $index}">
<p>${tab.text}</p>
</div>
</template>
As you can see, I've only copied the boilerplate HTML of the jQueryUI Tabs component, and created the bindable property tabs
which is an Array of Objects like that: [{title: "", text: ""}]
.
tabs.js
import {bindable, inject} from 'aurelia-framework';
import $ from 'jquery';
import {tabs} from 'jquery-ui';
@inject(Element)
export class Tab {
@bindable tabs = null;
constructor(el) {
this.id = el.id;
}
attached() {
$(`#${this.id}`).tabs();
}
}
The code is pretty readable: I've imported jquery from my config.js file, and my jquery-ui from there too (only the component tabs, so it gets lighter). Then, I've injected the DOMElement to my class, so I could get it's id. I've created my bindable property tabs
. In my constructor, I get the DOMElement id and populates my id property. And, finally, on the attached event (when all the binds are finished), I've got the jQuery object from my id, and called the method tabs()
to turn the template into a Tabs component. Pretty simple, uh?
In my config.js file, I've added those two lines:
"jquery": "github:components/[email protected]",
"jquery-ui": "github:components/[email protected]",
And then you can use the Tabs component wherever you want, by calling it in any other HTML template of your project:
That's it!
You can see the working example here: http://plnkr.co/edit/ESxZA2jTlN7f6aiq1ixG?p=preview
PS: Thanks for that plnkr, Sylvian, I've used yours to fork mine.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With