MooTools is an object-oriented, lightweight JavaScript framework. The
full form of MooTools is My Object-Oriented Tools. It is released under
the free, open-source MIT License. It is one of most popular JavaScript
libraries.
Showing posts with label MooTools Tutorial. Show all posts
Showing posts with label MooTools Tutorial. Show all posts
Tuesday, March 7, 2017
MooTools - Installation
MooTools is a powerful, JavaScript library to design DOM objects
using object-oriented paradigm. This chapter explains how to install and
use MooTools library along with JavaScript.
To install MooTools library, follow the steps given below −
To install MooTools library, follow the steps given below −
MooTools - Program Structure
MooTools is a tool which can be used to design object-oriented
models. Let us discuss in this chapter a simple example of MooTools
library.
Take a look at the following code, and save it into sample.html.
Example
Here we will design a model named Rectangle using Class. For this, we need to declare the properties — Width and Height.Take a look at the following code, and save it into sample.html.
<html>MooTools - Selectors
Selectors are used to select HTML elements. Whenever you want to make
interactive web pages, you need to select some data or an action from
that web page. Selectors help us receive data through HTML request from
elements.
MooTools - Using Arrays
MooTools is a lightweight JavaScript library which helps to create
dynamic web pages. While managing DOM element, we need to select all DOM
elements of a web page. This collection can be handled using arrays.
This chapter explains about how to use arrays to manage DOM elements.
This chapter explains about how to use arrays to manage DOM elements.
MooTools - Functions
Functions in MooTools is a concept from JavaScript. We already know
how to use functions in JavaScript. Generally, it is better to keep the
function outside the page body in the script tag. In MooTools, we follow
the same pattern. Here, you can design your own function according to
the requirement. We now have to call all the user-defined functions in
the domready function.
MooTools - Event Handling
Like Selectors, Event Handling is also an essential concept of
MooTools. This concept is used to create events and actions for events.
We also need to have a grasp of the actions and their effects. Let us
try a few events in this chapter.
MooTools - DOM Manipulations
We already know that every HTML page is designed using DOM elements.
Using MooTools you can manipulate DOM elements which means you can
create, remove and change the style of DOM elements.
MooTools - Style Properties
MooTools provides some Special methods to set and get style property
values for DOM elements. We use different style properties such as
width, height, background color, font weight, font color, border, etc.
By setting and getting different values to these style properties, we
can present HTML elements in different styles.
MooTools - Input Filtering
MooTools can filter the user input and it can easily recognize the type of input. The basic input types are Number and String.
Number Functions
Let us discuss a few methods that will check if an input value is a number or not. These methods will also help you manipulate the number input.MooTools - Drag and Drop
MooTools provides a tremendous feature that helps you add drag and
drop drag functionalities to your web page elements. We can do this by
creating our own new Drag.Move object. Using this object, you can
define your options and events. Drag and Drag.Move classes are from the
MooTools More library.
Let us discuss the options and events of Drag.Move object.
Let us discuss the options and events of Drag.Move object.
MooTools - Regular Expression
MooTools provides a way to create and use Regular Expression (regex).
This tutorial will explain the basics and extreme uses of regexes.
Let us discuss a few methods of the regular expressions.
Let us discuss a few methods of the regular expressions.
MooTools - Periodicals
MooTools provides an option that supports periodicals. With this, it
can call a function periodically with same level time frequency. Let us
discuss the methods and features of periodicals.
MooTools - Sliders
Slider is a functionality that reflects an action while sliding the
knob or any button. You can create your own slider while defining
elements, the handler, options, and call back events. Let us discuss
more about slider.
MooTools - Sortables
Sortables is an advanced feature in web development and can really
open up the options with your user interface designs. It also includes a
great function called "serialize" that manages a list of element ids
and is useful for server side scripting.
MooTools - Accordion
Accordion is the most popular plugin that MooTools provides. It helps
in hiding and revealing the data. Let us discuss more about it.
Creating new accordion
The basic elements that an accordion requires are pairs of toggles and their contents. Let us create pairs of headings and contents of the html.<h3 class = "togglers">Toggle 1</h3>
MooTools - Tooltips
MooTools provides different tooltips to design custom styles and
effects. In this chapter, we will learn the various options and events
of tooltips, as well as a few tools that will help you add or remove
tooltips from elements.
MooTools - Tabbed Content
Tabbed content means the content that is present in the tabbed area
and that content is related to the list items. Whenever we apply any
actions like hover or click to the list item, the immediate reaction will create an effect on the tabbed content.
Let us discuss more about tabs.
Let us discuss more about tabs.
MooTools - Classes
MooTools contains classes of different APIs. Look at the basics of
creating and using classes with MooTools. A class is a container for a
collection of variables and functions which operate on those variables
to perform specific tasks.
Let us discuss the variables, methods, and options in detail.
Let us discuss the variables, methods, and options in detail.
MooTools - Fx.Element
Fx.Element allows you to add the Fx functionality to multiple dom
elements on a single page. Actually Fx.Element is an extension of the
Fx.Morph plugin. The only difference between Fx.Element and Fx.Morph is
the syntax. In this syntax, the start({}) method is used to create an effect and the .set({}) method is used to set some styles.
Take a look at the following syntax for Fx.Element.
Take a look at the following syntax for Fx.Element.
Subscribe to:
Posts (Atom)