AlloyUI (AUI) is an excellent UI framework. It built on top of YUI3 library that uses Bootstrap (HTML/CSS) to provide a simple API for building high scalable applications.Liferay has integrated AUI into its framework (click here to view detail). So, good understanding and good using AUI are the necessary skills if you want to develop the application on this framework.
In this post, I will show you the most basic component of AUI. That is Node. What is a Node? How does it work? Let's discuss it.
Introduction
We can think about AUI Node by the simplest way. It is a set of operations (methods) which is assigned for a DOM (Document Object Model). We can apply the simple tasks on a DOM by the another tool, but it will easier if you use AUI Node in the complex actions as find ancestors, find siblings, change the value of an attribute, change the value of a tag,...
Implement
In this section, we will consider how to use AUI Node to effect on a tag (HTML Tag). Firstly, we will declare an object (instance) of Node.
Assume, we have a HTML tag as:
Assume, we have a HTML tag as:
<input class="sColor" id="sId" name="sName" type="text" />
The above input tag is a basic HTML tag and often using. So, how to declare an object of Node? Let's see the following snippet:
- By Id: AUI().one('#sId') or A.one('#sId').
- By style: AUI().one('.sColor') or A.one('.sColor').
- By an attribute: AUI().one('input[name="sName"]'), A.one('input[name="sName"]'), A.one('input[type="text"]').
Clearly, there are many ways to declare an AUI Node object. You should choose a suitable one for you. If there are many tags match your criteria, the highest level tag will be chosen (by DOM).
Examples
Show/Hide an object
The easiest example is changing show or hide status of an object (for examples: an image). We have two components, they are an image and a button. When you click on the button, the picture will be showed or hidden.
Let's see the following sample:
As you can see, at line 20th, I have created an object of Node which corresponding with img tag. At the next line, I called the method named toggle, it will change the status of this node (it means the status of img tag) from hiding status to showing status and vice versa.
Change the content
Value and text are two type of content. The value type appears in <input/>, <select/>,... tags. The text type appears in <span />, <label />,... tags.
We will make a sample with <input/> tag and <span /> tag. When we change the content of <input/> thì, the content <span /> will change. Let's see the following snippet:
We will make a sample with <input/> tag and <span /> tag. When we change the content of <input/> thì, the content <span /> will change. Let's see the following snippet:
In the above code, you can see, I used val() and text() to get and change the content of each node.
Change value of class attribute
Because class attribute is the frequently used. So, AlloyUI provided some methods to change the value of this attribute. The often methods are addClass, hasClass, removeClass,...
In my sample, there are four buttons (Red, Blue, Yellow, and Reset) and a <input/> tag. If you press on the first three buttons, the background color of <input/> tag will change to color as the label of these buttons. This color will be reset if you click on Reset button.
In my sample, there are four buttons (Red, Blue, Yellow, and Reset) and a <input/> tag. If you press on the first three buttons, the background color of <input/> tag will change to color as the label of these buttons. This color will be reset if you click on Reset button.
In the above snippet, I used addClass and removeClass methods to add and delete the value of class attribute.
Some methods
*class methods
- addClass(className): add className in the value of class attribute
- hasClass(className): whether the value of class attribute contains className or not.
- removeClass(className): delete className from the value of class attribute
- replaceClass(oldClassName, newClassName): replace oldClassName by newClassName.
- toggleClass(className): remove className from or add className into the value of class attribute.
show and hide methods
show and hide methods allow you to show or hide a tag. We can call these methods without parameter or with a parameter as show(fadeOut) and hide(fadeIn).
attr method
attr method allows you to get or change the value of any attributes. For examples:
<input class="sColor" id="sId" name="sName" type="text" />
If we call attr('type') (with a parameter), the returning value is text. If we call attr('type', 'password'), the value of type attribute will change from text to password.
Conclusion
This post only introduces some usual method of the most basic component of AlloyUI. There is so much utility of this library. I will introduce to you in the future posts.
You can download the source code at here.
Không có nhận xét nào:
Đăng nhận xét