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.
Labels
.
Search Your Article
Total Pageviews
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.
MooTools - Fx.Slide
Fx.Slides is an option that lets you display the content by sliding
into view. It is very simple but enhances the look of your UI.
Let us discuss about creating and initializing an Fx.Slide, its options, and methods.
First, we will initialize the Fx.Slide class with a user-defined instance. For that, we have to create and select an HTML element. After that, we will apply CSS to these elements. Finally, we will initiate a new instance of Fx.Slide with our element variable.
Let us discuss about creating and initializing an Fx.Slide, its options, and methods.
First, we will initialize the Fx.Slide class with a user-defined instance. For that, we have to create and select an HTML element. After that, we will apply CSS to these elements. Finally, we will initiate a new instance of Fx.Slide with our element variable.
MooTools - Fx.Tween
MooTools provides different FX.Tween shortcuts for different
transitions such as flashy effects which translate to smooth animated
transitions. Let us discuss a few methods from the Tween shortcuts.
MooTools - Fx.Morph
Fx.Morph is a function provided by MooTools. It is used to create new
tween for transitions between style properties. While morphing, we have
to select the element with an object and then we can apply different
functions to it. We also need to bind the element with a newly created
tween.
MooTools - Fx.Options
MooTools provides different Fx.Options which will help to Fx.Tween
and Fx.Morph. These options will give you a control over the effects.
Let us discuss a few options that MooTools provide. Before we proceed, take a look at the following syntax for setting up options.
Let us discuss a few options that MooTools provide. Before we proceed, take a look at the following syntax for setting up options.
MooTools - Fx.Events
Fx.Events provides some options to raise some codes at different
levels throughout the animation effect. It provides you the control over
your tweens and morphs. The option that Fx.Events provides −
- onStart − It will raise the code to execute when the Fx starts.
- onCancel − It will raise the code to execute when the Fx is cancelled.
- onComplete − It will raise the code to execute when the Fx is completed.
- onChainComplete − will raise the code to execute when the chained Fx completes.
MooTools - Quick Guide
MooTools - Introduction
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.MooTools - Useful Resources
The following resources contain additional information on MooTools. Please use them to get more in-depth knowledge on this.
Useful Links on MooTools
- MooTools Official Website − Official Site for MooTools
- MooTools Wiki − Wikipedia Reference for MooTools
Discuss MooTools
The full form of MooTools is My Object-Oriented Tools. It is an
object-oriented, lightweight JavaScript framework. It is released under
the free, open-source MIT License. It is one of the most popular
JavaScript libraries. In this tutorial, we will walk through MooTools
and its features.
Materialize - Overview
What is Materialize?
Materialize is a UI component library created with CSS, JavaScript, and HTML. Materialize reusable UI components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation.Materialize - Environment Setup
How to Use Materialize?
There are two ways to use Materialize:- Local Installation - You can download the materialize.min.css and materialize.min.js files on your local machine and include it in your HTML code.
- CDN Based Version - You can include the
materialize.min.css and materialize.min.js files into your HTML code
directly from the Content Delivery Network (CDN).
Materialize - Colors
Materialize supports a rich set of color classes. These color classes
are inspired and developed considering the colors used in marketing,
road signs, and sticky notes.
- red
- pink
- purple
- deep-purple
- indigo
Materialize - Grids
Materialize provides a 12 column fluid responsive grid.
It uses the row and col style classes to define rows and columns respectively.
It uses the row and col style classes to define rows and columns respectively.
S.N. | Class Name & Description |
---|---|
1 | row Specifies a padding-less container to be used for responsive columns. This class is mandatory for responsive classes to be fully responsive. |
Materialize - Helpers
Materialize has several utility classes which are very useful for day-to-day designing needs.
- Color utility classes - Examples: .red, .green, .grey and so on
- Alignment utility classes - Examples: .valign-wrapper, .left-align, .right-align, .center-align, .left, .right
Materialize - Media
Materialize has several classes to make images and video responsive to different sizes.
- responsive-img - It makes an image to resize itself based on screen size.
- video-container - For responsive container having embedded videos
- responsive-video - To make HTML5 videos responsive.
Materialize - Shadows
Materialize has several special classes to display containers as paper-like cards with shadow.
S.N. | Class Name & Description |
---|---|
1 | z-depth-0 Remove the shadow of elements having z-depth by default. |
2 | z-depth-1 Styles a container for any HTML content with 1px bordered shadow. Adds z-depth of 1. |
Materialize - Tables
Materialize can be used to display different types of tables using various styles over table.
S.N. | Class Name & Description |
---|---|
1 | None Represents a basic table without any border. |
2 | stripped Displays a stripped table. |
3 | bordered |
Materialize - Typography
Materialize uses Roboto 2.0 as standard font. It can be overriden using following CSS style:
html { font-family: GillSans, Calibri, Trebuchet, sans-serif; }Following are the examples of headings, blockquotes and free-flow but responsive text.
Example
materialize_typography.htm<!DOCTYPE html> <html> <head> <title>The Materialize Typography Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> </head> <body class="container"> <h2>Typography Demo</h2> <hr/> <h3>Headings</h3> <div class="card-panel"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </div> <h3>Block Quotes</h3> <div class="card-panel"> <blockquote> The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. </blockquote> </div> <h3>Responsive free-flow text</h3> <div class="card-panel"> <p class="flow-text"> The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. </p> </div> </body> </html>
Result
Verify the result.Typography Demo
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Block Quotes
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
Responsive free-flow text
The latest versions of Apple Safari, Google Chrome, Mozilla
Firefox, and Opera all support many HTML5 features and Internet Explorer
9.0 will also have support for some HTML5 functionality.
Materialize - Badges
An Materialize badge component is a onscreen notification which can
be a number or icon. It is generally used to emphasize the number of
items.
Following are the examples of using badges in different ways.
S.N. | Class Name & Description |
---|---|
1 | badge Identifies element as an MDL badge component. Required for span element. |
2 | new Adding a "new" class to a badge component gives it a background. |
Materialize - Buttons
The Materialize provides various CSS classes to apply various
predefined visual and behavioral enhancements to the buttons. The below
table mentions the available classes and their effects.
Materialize - BreadCrumb
The Materialize provides various CSS classes to create a nice
breadcrumb in easy way. The below table mentions the available classes
and their effects.
S.N. | Class Name & Description |
---|---|
1 | nav-wrapper Set the nav component as breadcrumb/nav bar wrapper. |
Materialize - Cards
The Materialize provides various CSS classes to apply various
predefined visual and behavioral enhancements to the display various
types of cards. The below table mentions the available classes and their
effects.
Materialize - Chips
The Materialize provides a special component called Chip which can be
used to represent small set of information for example, a contact, tags
etc.
S.N. | Class Name & Description |
---|---|
1 | chip Set the div container as chip. |
Materialize - Collections
The Materialize provides a special classes to represent various types
of collections where a collection represents group of related
information items.
S.N. | Class Name & Description |
---|---|
1 | collection Set the div or ul container as collection. |
2 | collection-item |
Materialize - Footer
The Materialize provides a special classes to represent various types
of collections where a collection represents group of related
information items.
S.N. | Class Name & Description |
---|---|
1 | page-footer Set the div container as footer. |
2 | footer-copyright Set the div container as footer-copyright container. |
Materialize - Form
Materialize has a very beautiful and responsive CSS for form designing. The following CSS are used:
S.N. | Class Name & Description |
---|---|
1 | input-field Set the div container as input field container. Required. |
2 | validate Adds validation styles to an input field. |
Materialize - Icons
Materialize supports the following popular icon libraries:
- Font Awesome Icons
- Google Material Icons
- Bootstrap Icons
Materialize - Navbar
The Materialize provides various CSS classes to create a nice
navigation bar in easy way. The below table mentions the available
classes and their effects.
Materialize - Pagination
The Materialize provides various CSS classes to create a nice
pagination bar in easy way. The below table mentions the available
classes and their effects.
S.N. | Class Name & Description |
---|---|
1 | pagination Set the ul element as pagination component. |
Materialize - Preloader
The Materialize provides various CSS classes to apply various
predefined visual and behavioral enhancements to the display various
types of preloaders or progress bars. The below table mentions the
available classes and their effects.
Materialize - Collapsible
The Materialize provides various CSS classes to apply various
predefined visual and behavioral enhancements to the display various
types of accordions. The below table mentions the available classes and
their effects.
Following are the examples of using accordions in different ways.
S.N. | Class Name & Description |
---|---|
1 | collapsible Identifies element as an materialize collapsible component. Required for ul element. |
2 | collapsible-header Sets div as section header. |
3 | collapsible-body Sets div as section content container. |
4 | popout Creates a popout collapsible. |
5 | active Opens a section. |
6 | expandable Marks a collapsible component as expandable. |
7 | accordion Marks a collapsible component as accordion. |
Example
materialize_collapsible.htm<html> <head> <title>The Materialize Collapsible Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> </head> <body class="container"> <h4>Simple Accordion</h4> <ul class="collapsible" data-collapsible="accordion"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div> <div class="collapsible-body"><p>This is first section.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div> <div class="collapsible-body"><p>This is second section.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div> <div class="collapsible-body"><p>This is third section.</p></div> </li> </ul> <h4>Popout Accordion</h4> <ul class="collapsible popout" data-collapsible="accordion"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div> <div class="collapsible-body"><p>This is first section.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div> <div class="collapsible-body"><p>This is second section.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div> <div class="collapsible-body"><p>This is third section.</p></div> </li> </ul> <h4>Accordion with Preselected Section</h4> <ul class="collapsible" data-collapsible="accordion"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div> <div class="collapsible-body"><p>This is first section.</p></div> </li> <li> <div class="collapsible-header active"><i class="material-icons">place</i>Second Section</div> <div class="collapsible-body"><p>This is second section.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div> <div class="collapsible-body"><p>This is third section.</p></div> </li> </ul> <h4>Expandables</h4> <ul class="collapsible" data-collapsible="expandable"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div> <div class="collapsible-body"><p>This is first section.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div> <div class="collapsible-body"><p>This is second section.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div> <div class="collapsible-body"><p>This is third section.</p></div> </li> </ul> </body> </html>
Result
Verify the result.Materialize - Dialogs
The Materialize provides various special methods to show unobtrusive
alerts to the users. Materialize provides a term toast for them.
Following is the syntax to show a dialog as toast.
Materialize.toast(message, displayLength, className, completeCallback);Where
Materialize - Dropdowns
The Materialize provides dropdown CSS class to make a ul element as a dropdown and add the id of the ul element to the data-activates attribute of the button or anchor element.The below table mentions the available classes and their effects.
Materialize - Tabs
The Materialize provides tabs CSS class to make a ul element as a
tabs. The below table mentions the available classes and their effects.
Following are the examples of using a tab.
S.N. | Class Name & Description |
---|---|
1 | tabs Identifies ul as an materialize tab component. Required for ul element. |
2 | active Make a tab active. |
Materialize - Waves
The Materialize uses Waves, an external library to create ink effect outlined in Material Design. The below table mentions the available classes and their effects.
Following are the examples of using a wave effects on buttons.
S.N. | Class Name & Description |
---|---|
1 | waves-effect Put the wave effect on the control. |
2 | waves-light Put the wave effect as white colored. |
3 | waves-red Put the wave effect as red colored. |
4 | waves-green Put the wave effect as green colored. |
5 | waves-yellow Put the wave effect as yellow colored. |
6 | waves-orange Put the wave effect as orange colored. |
7 | waves-purple Put the wave effect as purple colored. |
8 | waves-teal Put the wave effect as teal colored. |
Example
materialize_waves.htm<!DOCTYPE html> <html> <head> <title>The Materialize Waves Effects Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> </head> <body class="container"> <h3>Waves Effects Demo</h3> <div class="collection waves-color-demo"> <div class="collection-item"> <code class=" language-markup">Default</code> <a href="#!" class="waves-effect btn secondary-content">Click Me!</a> </div> <div class="collection-item"> <code class=" language-markup">waves-light</code> <a href="#!" class="waves-effect waves-light btn secondary-content">Click Me!</a> </div> <div class="collection-item"> <code class=" language-markup">waves-red</code> <a href="#!" class="waves-effect waves-red btn secondary-content">Click Me!</a> </div> <div class="collection-item"> <code class=" language-markup">waves-yellow</code> <a href="#!" class="waves-effect waves-yellow btn secondary-content">Click Me!</a> </div> <div class="collection-item"> <code class=" language-markup">waves-orange</code> <a href="#!" class="waves-effect waves-orange btn secondary-content">Click Me!</a> </div> <div class="collection-item"> <code class=" language-markup">waves-purple</code> <a href="#!" class="waves-effect waves-purple btn secondary-content">Click Me!</a> </div> <div class="collection-item"> <code class=" language-markup">waves-green</code> <a href="#!" class="waves-effect waves-green btn secondary-content">Click Me!</a> </div> <div class="collection-item"> <code class=" language-markup">waves-teal</code> <a href="#!" class="waves-effect waves-teal btn secondary-content">Click Me!</a> </div> </div> </body> </html>
Result
Verify the result.Waves Effects Demo
Default
waves-light
waves-red
waves-yellow
waves-orange
waves-purple
waves-green
waves-teal
Materialize - Quick Guide
Materialize - Overview
What is Materialize?
Materialize is a UI component library created with CSS, JavaScript, and HTML. Materialize reusable UI components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation.Materialize - Useful Resources
If you want to list down your website, book or any other resource on
this page then please contact at webmaster@tutorialspoint.com
Websites on Materialize
- Materialize - Materialize Official home page
Materialize - Discussion
Materialize is a UI component library created with CSS, JavaScript,
and HTML. Materialize UI components helps in constructing attractive,
consistent, and functional web pages and web apps while adhering to
modern web design principles like browser portability, device
independence, and graceful degradation. It helps in creating faster,
beautiful, and responsive websites. It is inspired from Google Material
Design.
Subscribe to:
Posts (Atom)