Example jQuery
Check the code folder for more comments.
This is a jQuery example, the example are taken from the hompage of http://jquery.com/.
Quick reminder:
Haxe does not allow using
$
as a class name or a function name, but$
is just a short-hand to jQuery. However, Haxe requires all class names start with capital letter, so it is JQuery not jQuery.
So in short: you replace $(...)
with new JQuery(...)
and it will work.
Read more about this here
The code used in this example can be found here.
How to start
Create a folder named foobar (please use a better name; any name will do) and create folders bin and src. See example below:
+ foobar
+ bin
+ src
- Main.hx
- build.hxml
The Main.hx
Open your favorite editor, copy/paste the code and save it in the src
folder.
DOM Traversal and Manipulation
Get the <button>
element with the class 'continue' and change it's HTML to 'Next Step...'
new JQuery( "button.continue" ).html( "Next Step..." );
Event Handling
Show the #banner-message
element that is hidden with display:none
in it's CSS when any button in #button-container
is clicked.
var hiddenBox = new JQuery( "#banner-message" );
new JQuery( "#button-container button" ).on( "click", function( event ) {
hiddenBox.show();
});
Ajax
Thanks for NASA for suppling this awesome (no api-key needed) API.
Call a local script on the server https://api.nasa.gov/planetary/earth/imagery
with the query parameter lon, lat, date, cloud_score, api_key
and replace the element #nasa-container
's html with the returned text.
// Ajax
JQuery.ajax({
url: "https://api.nasa.gov/planetary/earth/imagery",
data: {
lon : 100.75,
lat : 1.5,
date : "2014-02-01",
cloud_score: "True",
api_key : "DEMO_KEY"
},
success: function( data ) {
new JQuery( "#nasa-container" ).html( "<img src='" + data.url + "' alt='test' >" );
}
});
Below you can see and try the same example code at try.haxe.org without installing Haxe.
So, when you code in JS like:
$("#myMightyDiv").hide();
now you do the same in Haxe:
new JQuery("#myMightyDiv").hide();
Simple.
It is same as how you use jQuery in JS. But instead of $
, you refer jQuery as JQuery
.
eg. Hiding all li object:
new JQuery("li").hide(); //same as $("li").hide() in JS
The Haxe build file, build.hxml
There are a lot of different arguments that you are able to pass to the Haxe compiler. These arguments can also be placed into a text file of one per line with the extension hxml. This file can then be passed directly to the Haxe compiler as a build script.
# // build.hxml
// -lib jQueryExtern
-cp src
-main Main
-js bin/example.js
-dce full
Build js with Haxe
To finish and see what we have, build the file and see the result
- Open your terminal
cd
to the correct folder where you have saved thebuild.hxml
- type
haxe build.hxml
- press enter
You could build everything directly in the terminal.
haxe -cp src -main Main -js bin/example.js -dce full
It will have the same result
CDN
Just remember the jQuery-Extern is simply an extern, you have to link jQuery in your html file.
You can download the javascript file from http://jquery.com/ or use CDN. For this example we will use that.
Copy this in the <head>
or at the bottom of your <body>
:
<!-- from jQuery's CDN (http://jquery.com/download/#using-jquery-with-a-cdn) -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Your Haxe compiled script -->
<script type="text/javascript" src="example.js"></script>