Tuesday, March 7, 2017

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 - 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 −

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.
S.N.Class Name & Description
1row
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
1z-depth-0
Remove the shadow of elements having z-depth by default.
2z-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
1None
Represents a basic table without any border.
2stripped
Displays a stripped table.
3bordered

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.
S.N.Class Name & Description
1badge
Identifies element as an MDL badge component. Required for span element.
2new
Adding a "new" class to a badge component gives it a background.
Following are the examples of using badges in different ways.

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
1nav-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
1chip
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
1collection
Set the div or ul container as collection.
2collection-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
1page-footer
Set the div container as footer.
2footer-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
1input-field
Set the div container as input field container. Required.
2validate
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
1pagination
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.
S.N.Class Name & Description
1collapsible
Identifies element as an materialize collapsible component. Required for ul element.
2collapsible-header
Sets div as section header.
3collapsible-body
Sets div as section content container.
4popout
Creates a popout collapsible.
5active
Opens a section.
6expandable
Marks a collapsible component as expandable.
7accordion
Marks a collapsible component as accordion.
Following are the examples of using accordions in different ways.

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.
S.N.Class Name & Description
1tabs
Identifies ul as an materialize tab component. Required for ul element.
2active
Make a tab active.
Following are the examples of using a tab.

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.
S.N.Class Name & Description
1waves-effect
Put the wave effect on the control.
2waves-light
Put the wave effect as white colored.
3waves-red
Put the wave effect as red colored.
4waves-green
Put the wave effect as green colored.
5waves-yellow
Put the wave effect as yellow colored.
6waves-orange
Put the wave effect as orange colored.
7waves-purple
Put the wave effect as purple colored.
8waves-teal
Put the wave effect as teal colored.
Following are the examples of using a wave effects on buttons.

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 - 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.