XY-field 1.0.1
XY-Field Widget is a MooTools class that allows you to create a "field"-wdiget. This field can be seen as a two-dimensional slider. It allows users to work with data in a more compact and intuitive way.
Details
- Author
- Henrik Hansen
- Current version
- 1.0.1
- GitHub
- henrikh/XY-field
- Downloads
- 8437
- Category
- Widgets
- Tags
- Report
- GitHub Issues
Releases
Dependencies
-
more/1.2.4.2:
- Drag.Move
- Class.Occlude
- Class.Binds
How to use
First, make sure you have the code on your server. Then add it to the page:
<script src="[Path to source files]/Field.js" type="text/javascript"></script>
To make an XY-field, you'll need two elements, a container and a handle (knob):
<div id="container">
<div id="knob"></div>
</div>
It's is not necessary to put the knob inside the container, but it's a good practice to keep things in order.
Now you need to initialize the class. This is done like this:
container = $('container');
knob = $('knob');
new Field(container, knob);
Additionally you would also need some CSS to make the field and knob have a width and height and some Javascript to handle the events. Examples of this can be seen in the demos.
Discuss
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus