mQuery - keeping things simple
Posted: 27 Sep 2013, 18:27
Hey everyone,
I want to share my latest project regarding Manialink development, I already introduced in the german mania-community blog.
While I originally didn't had the intention to create something like it is now, mQuery became a framework primarily handling ManiaScript on your Manialinks.
mQuery now is a framework to help you with the little things. Since the most Manialinks don't use excessive amounts of ManiaScript for humble purposes, I wanted to make (my) process of Manialink creating a bit more easy with that.
Since I already wrote quite a lot about the usage and functions on GitHub, I recommend having a look at the Wiki there. To make it interesting for you though, I'll give you a few examples here:
This very basic example looks for a mouseclick on an element with ControlId "myElement" or on every occurence of an element with the class "theseElements" from the 3rd occurence on. Then it will log it's id. For example when there are similar things to do for each matched element with some minor differences, it can be switch-cased in there.
Let's say, you have multiple icons represting a horizontal navigation. Each element has "naviIcon" as class. The mQuery code above will now create mouseover und mouseout events to make an icon bigger and shift it up when you move your mouse over it and will reset on leaving the element.
On the project's manialink (which is completely organized with mQuery of course) I have linked some demos where you can also have a look on the code.
[maniaplanet]mQuery?demo=mqUiElements[/maniaplanet] shows something, I like mQuery very much for:
And this is just one example about how you basic usage of ManiaScript is made incredibly simple!
At last a minor interesting thing: Since you can't directly style the checkbox looks (to stick to that example) since they are generated automatically, css-like code can be used to style elements of your Manialink. For example the whole project's Manialink uses things like
In the end, all labels have textcolor="333" (if there are no different rules somewhere else) and the labels with class "naviLink" also have the textprefix="$i$o" and the defined scale. With that I can avoid spaming these attributes in every label and my code stays relatively clean.
Since everything is auto-generated it might be quite a mess in some places, but I haven't stoped my work on this project. Because of that there are some bugs remaining and I won't guarantee that everything should work.
Anyway I would be interested in some opinions and maybe some testing experiences.
I want to share my latest project regarding Manialink development, I already introduced in the german mania-community blog.
While I originally didn't had the intention to create something like it is now, mQuery became a framework primarily handling ManiaScript on your Manialinks.
mQuery now is a framework to help you with the little things. Since the most Manialinks don't use excessive amounts of ManiaScript for humble purposes, I wanted to make (my) process of Manialink creating a bit more easy with that.
Since I already wrote quite a lot about the usage and functions on GitHub, I recommend having a look at the Wiki there. To make it interesting for you though, I'll give you a few examples here:
Code: Select all
$("#myElement, .theseElements:gt(2)").click(function(){
log($this.ControlId);
});
Code: Select all
$(".naviIcon").hover(function(){
$this.Scale = 1.2;
$this.PosnY += 2;
}, function(){
$this.Scale = 1.0;
$this.PosnY -= 2;
});
On the project's manialink (which is completely organized with mQuery of course) I have linked some demos where you can also have a look on the code.
[maniaplanet]mQuery?demo=mqUiElements[/maniaplanet] shows something, I like mQuery very much for:
Code: Select all
$("#myEntry").ui_checkbox();
// This creates a checkbox with different looks for each state, you can use it in a form or get the value with ManiaScriptAt last a minor interesting thing: Since you can't directly style the checkbox looks (to stick to that example) since they are generated automatically, css-like code can be used to style elements of your Manialink. For example the whole project's Manialink uses things like
Code: Select all
label {
textcolor: 333;
}
.naviLink {
textprefix: $i$o;
scale: 1.2;
}
Since everything is auto-generated it might be quite a mess in some places, but I haven't stoped my work on this project. Because of that there are some bugs remaining and I won't guarantee that everything should work.
Anyway I would be interested in some opinions and maybe some testing experiences.
) and might be kind of a mess to convert back to pure ManiaScript if you decide to do so.
Actually you would never need to call a mQuery function on a frame, your part with the variable assignment works as it is 
