Version 4.3.x will be without jQuery!

[olton]

Version 4.3.x will be without jQuery! At the moment I am doing a lightweight jQuery replacement. You can get acquainted with it at https://github.com/olton/m4q

[olton]

• Repo: https://github.com/olton/Metro4-M4Q
• Ready list: https://github.com/olton/Metro4-M4Q/blob/master/READY_FOR_M4Q.md

[olton]

I was asked me if will would be possible to use jQuery with Metro4 after switching over to using M4Q abstraction. Yes of course. The abstraction layer M4Q will be encapsulated inside Metro 4 and will not occupy the global $ variable!

In your code that uses jquery to access the API of Metro 4, You will not need to change anything.!

[olton]

If you want to use jQuery to access the API in Metro 4 (4.3.x), you need to add a meta tag <meta name="metro4:jquery" content="true"> in the page header and connect jquery. After that, you can access the API components and initialize them using jQuery:

Initialising

<div id="a1" data-one-frame="true">
...
</div>

$("#a1").accordion();

API

<div data-role="accordion" id="a1" data-one-frame="true">
...
</div>

var accordion = $("#a1").data("accordion");

[olton]

Hi, my friends! I'm finished a Metro 4 without jQuery (v 4.3.0). Beta 1 now available from GitHub and Metro 4 CDN

[olton]

Currently working Repo

https://github.com/olton/Metro4-M4Q

Javascript

https://cdn.metroui.org.ua/v4.3.0/js/metro.js

CSS

https://cdn.metroui.org.ua/v4.3.0/css/metro-all.css

[shajeeck]

How to get control events working with metro ui M4Q (4.3) without jQuery? By the way i am using angular2+ with M4Q, will it make a difference?

Thanx for this awesome library!

[olton]

@shajeeck Maybe I misunderstood the question, m4q contains methods for working with events https://github.com/olton/m4q#events $( ... ).on(event_name, callback);

$("a").on("click", function(e){
     ... your code here ...
});

or $( ... ).on(event_name, delegates, callback)

// for li > a
$("li").on("click", "a", function(e){
     ... your code here ...
});

Documentation for M4Q currently in progress.

[shajeeck]

thanx for your reply!

How can i subscribe to custom events of components like onUp(list, select), onItemDeselect(option) for 'select' component using m4q?

Or run a method of select component like disable(), enabled(), toggleState() etc using m4q?

using data-on-item-deselect as attribute doesn't seem to work in angular2+

[olton]

@shajeeck You can create service function and set it a name for required attribute name. No need interact with m4q.

<select data-role="select" data-on-item-select="itemSelect">...</select>

function itemSelect(val, option, item){
    ...
}

[olton]

@shajeeck Direct subscribe to special events of components currently not present. But, maybe I'll add them soon. I think about it.

[shajeeck]

@olton I tried this <select data-role="select" data-on-item-select="itemSelect">...</select> but it doesn't work in angular2+. The function doesn't seem to run, may be because how angular2+ works.

[olton]

@shajeeck to access to component API (without jquery) you must use the same method as with a jquery ;) :

<select id="sel1" data-role="select" data-on-item-select="itemSelect">...</select>

var select = $("#sel1").data("select");
select.disable();

[shajeeck]

@olton methods does seem to work using var select = $("#sel1").data("select"); select.disable(); in angular2+. Any work around to subscribe special events ??

[olton]

@shajeeck contact to https://github.com/morrisjdev/ng-metro4 author. Maybe Morris can help you.