MooTools - Guía rápida
MooTools es un marco de JavaScript ligero y orientado a objetos. La forma completa de MooTools es Mis herramientas orientadas a objetos. Se publica bajo la licencia MIT gratuita de código abierto. Es una de las bibliotecas de JavaScript más populares.
MooTools is a powerful, lightweight JavaScript library. It creates an easy interaction of JavaScript in web development. It can also do a lot of things as CSS extensions. MooTools has all sorts of nifty extensions, which gives you the ability to create animated effects.
Components of MooTools
MooTools includes a number of components. The following are the different component categories −
Core − A collection of utility functions that all the other components require.
More − An official collection of add-ons that extend the core and provide enhanced functionality.
Class − The base library for class object instantiation.
Natives − A collection of JavaScript native object enhancements. The natives add functionality, compatibility, and new methods that simplify coding.
Element − Contains a large number of enhancements and compatibility standardization to the HTML Element Object.
FX − An Advanced effects-API that helps to animate page elements.
Request − Includes XHR interface, Cookie JSON, and HTML retrieval-specific tools for developers to exploit.
Window − Provides a cross-browser interface to client-specific information, such as the dimensions of the window.
MooTools – Advantages
MooTools come with a number of advantages over native JavaScript. These advantages include the following −
MooTools is an extensive and modular framework that allows developers to create their own customized combination of components.
MooTools follows object-oriented paradigm and the DRY principle (Don't Repeat Yourself).
MooTools provides advanced component effects, with optimized transitions. It is mostly used for flash developers.
MooTools provides different enhancements to the DOM. This helps the developers to add, modify, select, and delete DOM elements. And, it also supports storing and retrieving element storage.
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 −
Step 1: Download MooTools Core and MooTools More library
You can download the latest version of MooTools Core and MooTools More libraries from the following link MooTools-Core and MooTools-More. When you click on the links, you will be directed to the following screens in your browser −
And,
Click on the download buttons, you will get the latest version of MooTools libraries. For this tutorial, we are using MooTools-Core-1.6.0.js and MooTools-More-1.6.0.js libraries.
Step 2: Upload the MooTools Core and More libraries into the server
You now have the MooTools libraries in your file system. We have to copy these libraries into the server (the workspace) where the application web pages are available. For this tutorial, we are using C:\MooTools\workspace\ directory location.
Therefore, copy the MooTools-Core-1.6.0.js and MooTools-More-1.6.0.js files into the given directory location.
Step 3: Link the MooTools Core and More libraries into the script tag
The JavaScript library is a .js file. If you include this library into your JavaScript code, include it with the script tag as follows. Take a look at the following code snippet.
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>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>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javaScript">
var Rectangle = new Class({
//properties
width: 0,
height: 0,
//methods
initialize: function(widthVal, heightVal) {
this.width = widthVal;
this.height = heightVal;
},
details: function() {
document.write("Welcome to MooTools demo program");
document.write("Width: "+this.width+" Height: "+this.height);
},
});
var rec = new Rectangle(5,4);
rec.details();
</script>
</head>
<body>
</body>
</html>You will receive the following output −
Output
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.
Basic Selector($)
The $ is the basic selector in MooTools. Using this, you can select DOM element by its ID. For example, suppose you have an HTML element (such as div) named body_id.
<div id = "body_id">
</div>If you want to select this div, use the following syntax −
Syntax
//selects the element with the ID 'body_id'
$('body_id');getElement( )
getElement() is a method which extends basic selector ($). It allows you to refine your selection using element ID. getElement() only selects the single element and will return the first if there are multiple options. You can also use Class name to get the first occurrence of an element. But it will not get array of elements.
Multiple Selector ($$)
The $$ is used to select multiple elements and place those multiple elements into an array. From that array we can manipulate, retrieve, and reorder the list in different ways. Take a look at the following syntax. It defines how to select all div elements from a collection of HTML elements on a webpage.
Syntax
<div>
<div>a div</div>
<span id = "id_name">a span</span>
</div>If you want to select all divs, use the following syntax −
Syntax
//all divs in the page
$$('div');If you want to select multiple divs with the same id name, use the following syntax −
Syntax
//selects the element with the id 'id_name' and all divs
$$('#id_name', 'div');getElements()
getElements() method is similar to getElement() method. This method returns all elements according to the criteria. You can use either element name (a, div, input) to select those collections or a particular element class name for selecting collection of elements of the same class.
Include and exclude results with operators
MooTools supports different operators used to refine your selections. You can use all these operators in getElements() method. Each of these operators can be used to select an input element by name.
Take a look at the following table. It defines the different operators that MooTools supports.
| Operator | Description | Example |
|---|---|---|
| = (equal to) | Select input element by its name. | $('body_wrap').getElements ('input[name = phone_number]'); |
| ^= (starts with) | Select input element by comparing its starting letters of the name. | $('body_wrap').getElements ('input[name^=phone]'); |
| $= (ends with) | Select the input element by comparing its ending letters of the name. | $('body_wrap').getElements ('input[name$ = number]'); |
| != (is not equal to) | De-select the input element by is name. | $('body_wrap').getElements ('input[name!=address]'); |
| *= (Contains) | Select the input element which contains particular letter pattern. | $('body_wrap').getElements ('input[name*=phone]'); |
Selectors based on element order
MooTools selectors follow a particular order in element selection. The selectors mainly follow two orders; one is even and the other is odd.
Note − This selector starts at 0, so the first element is even.
Even order
In this order, the selector selects the elements which are placed in an even order. Use the following syntax to select all even divs in your HTML page.
Syntax
// selects all even divs
$$('div:even');Odd order
In this order, the selector selects the element placed in an odd order. Use the following syntax to select all odd divs in your HTML page.
Syntax
// selects all odd divs
$$('div:odd');Example
The following example shows how a selector works. Suppose, there is a textbox and a list of technologies on a webpage. If you pick one technology from the list by entering that name into the textbox, then the list shows the filtered results based on your input. This is possible using the MooTools selector. Using selector, we can add an event to the textbox. The event listener will pick the data from the textbox and check it from the list. If it is there in the list, then the list shows the filtered results. Take a look at the following code.
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready',function(){
var input = $('filter');
// set the title attribute of every element
// to it's text in lowercase
$$('ul > li').each(function(item){ item.set('title', item.get('text').toLowerCase()); }); // the function we'll call when the user types var filterList = function(){ var value = input.value.toLowerCase(); $$('li').setStyle('display','none');
// check the title attribute if it contains whatever the user is typing
$$('ul > li[title*=' + value + ']').setStyle('display','');
};
// make it happen
input.addEvent('keyup', filterList);
});
</script>
</head>
<body>
<p><input id = "filter" type = "text" /></p>
<ul>
<li>C</li>
<li>Cpp</li>
<li>Java</li>
<li>JavaScript</li>
<li>Hadoop</li>
<li>Hive</li>
<li>CouchDB</li>
</ul>
</body>
</html>You will receive the following output −
Output
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.
each() method
This is the basic method to deal with arrays. It iterates all the elements through a list. You can use this method based on the requirement. For example, if you want to select all the div elements of a page, follow the script given below. Take a look at the following html page which contains multiple divs.
<div>One</div>
<div>Two</div>You can use the following script to select each individual div from a collection of divs on the page. The script will select each div and pass an alert. Take a look at the following script.
Script
$$('div').each(function() {
alert('a div');
});You can use the following syntax to handle the above given example. Take a look at the HTML page.
Script
<div id = "body_div">
<div>One</div>
<div>Two</div>
</div>Here, the two divs are enclosed with another div — body_div. While designing a script, we have to select only one external div. Later, by using getElements() method, we can select the two internal divs. Take a look at the following script.
Script
$('body_wrap').getElements('div').each(function() {
alert('a div');
});You can use a different method to write the above script as follows. Here, we are using a separate variable to select the body_div.
Script
var myArray = $('body_div').getElements('div');
myArray.each(function() {
alert('a div');
});Select Specific Elements from an Array
While manipulating an array of elements, we can select a specific element from an array of elements. The following are some important methods used to manipulate the DOM elements −
getLast()
This method returns the last element of an array. Let us set up an array to understand this method.
var myArray = $('body_div').getElements('div');We can now grab the last element within the array.
var lastElement = myArray.getLast();The variable lastElement now represents the last element within myArray.
getRandom()
getRandom() method works the similar way like the getLast() method, but will get a random element from array.
Syntax
var randomElement = myArray.getRandom();The variable randomElement now represents a randomly chosen element within myArray.
Copy of an Array
MooTools provides a way to copy an array using the $A() function. The following is the syntax for the $A() function.
Syntax
var <variable-name> = $A ( <array-variable>);Add an Element to an Array
There are two different methods for adding elements into an array. The first method lets you add elements one by one or you can merge two different arrays into one.
include()
include() method is used to add an item into an array of DOM elements. For example, consider the following HTML code which contains two div elements and one span element under a single and enclosed div — body_div.
Syntax
<div id = "body_div">
<div>one</div>
<div>two</div>
<span id = "add_to_array">add to array</span>
</div>In the above code, if we call getElements('div') method on the body_div element, we get one and two div but the span element is not included into the array. If you want to add it into the array you call include() method on the array variable. Take a look at the following script.
Script
//creating array variable by selecting div elements
var myArray = $('body_wrap').getElements('div'); //first add your element to a var var newToArray = $('add_to_array');
//then include the var in the array
myArray.include(newToArray);Now, the myArray contains both divs and span element.
combine()
This method is used to combine the elements of one array with the elements of another array. This also takes care of duplicate content. For example, consider the following HTML code which contains two div elements and two span elements under single and enclosed div — body_div.
Syntax
<div id = "body_div">
<div>one</div>
<div>two</div>
<span class = "class_name">add to array</span>
<span class = "class_name">add to array, also</span>
<span class = "class_name">add to array, too</span>
</div>In the above code, call getElements('div') method on the body_div element. You get one and two div. Call $$('.class_name') method selects the two span elements. You now have one array of div elements and another array of span elements. If you want to merge these two arrays, then you can use the combine method(). Take a look at the following script.
Script
//create your array just like we did before
var myArray= $('body_wrap').getElements('div'); //then create an array from all elements with .class_name var newArrayToArray = $$('.class_name');
//then combine newArrayToArray with myArray
myArray.combine(newArrayToArray );Now, the myArray contains all the elements of newArrayToArray variable.
Example
This will help you understand arrays in MooTools. Suppose, we apply the background color to the array of element which contains divs and span. Take a look at the following code. Here, the second array of elements does not belong to any id or class group and that is why it does not reflect any background color. Take a look at the following code.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var myArray = $('body_wrap').getElements('.class_name'); var addSpan = $('addtoarray');
var addMany = $$('.addMany');
myArray.include(addSpan);
myArray.combine(addMany);
var myArrayFunction = function(item) {
item.setStyle('background-color', '#F7DC6F');
}
myArray.each(myArrayFunction);
});
</script>
</head>
<body>
<div id = "body_wrap">
<div class = "class_name">one</div>
<div>two</div>
<div class = "class_name">three</div>
<span id = "addtoarray">add to array</span>
<br /><span class = "addMany">one of many</span>
<br /><span class = "addMany">two of many</span>
</div>
</body>
</html>You will receive the following output −
Output
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.
Take a look at the following syntax to understand how to use generalized function in MooTools.
Syntax
<script type = "text/javascript">
/*
Function definitions go here
*/
window.addEvent('domready', function() {
/* Calls to functions go here */
});
</script>Basic Structure
There are a few basic ways to define a function in MooTools. There is no difference between the function syntaxes of JavaScript and MooTools but the difference is in calling a function. Let us take a small example that defines a function named demo_function. Take a look at the following code.
Example
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
//Define simple_function as a function
var simple_function = function(){
document.write('This is a simple function');
}
window.addEvent('domready', function() {
//Call simple_function when the dom(page) is ready
simple_function();
});
</script>
</head>
<body>
</body>
</html>You will receive the following output −
Output
Single Parameter Function
You can also create a function that accepts a parameter. To use parameters with functions, you need to add a variable name in the parenthesis. Once you provide it, the variable is available inside for use. Let us take an example that defines a function that takes a single parameter and prints a message along with the parameter.
Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var single_parameter_function = function(parameter){
document.write('The parameter is : ' + parameter);
}
window.addEvent('domready', function(){
single_parameter_function('DEMO PARAMETER');
});
</script>
</head>
<body>
</body>
</html>You will receive the following output −
Output
Returning a Value
Whenever you want to use the result of one function as input for another variable, you are required to use the return value for that function. You can use the return keyword for returning a value from the function. Let us take an example that defines a function that will accept two parameter values and return the sum of those two parameters. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var two_parameter_returning_function = function(first_number, second_number){
var third_number = first_number + second_number;
return third_number;
}
window.addEvent('domready', function(){
var return_value = two_parameter_returning_function(10, 5);
document.write("Return value is : " + return_value);
});
</script>
</head>
<body>
</body>
</html>You will receive the following output −
Output
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.
Single left click
The most common event in web development is Single Left Click. For example, Hyperlink recognizes a single click event and takes you to another DOM element. The first step is to add a click event to the DOM element. Let us take an example that adds a click event to the button. When you click on that button, it will display a message.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var clickFunction = function(){
//put whatever you want to happen in here
document.write('This button element recognizes the click event');
}
window.addEvent('domready', function() {
$('id_name').addEvent('click', clickFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "click here"/>
</body>
</html>You will receive the following output −
Output
When you click on the button, you will get the following message −
This button element recognizes the click eventMouse Enter and Mouse Leave
Mouse Enter and Mouse Leave are the most common events in event handling. The action is applied based on the position of the mouse. If the position of the mouse is ENTER into the DOM element, then it will apply one action. If it leaves the DOM element area, then it will apply another action.
Let us take an example that explains how mouse Enter event works. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseEnterFunction = function(){
//put whatever you want to happen in here
$('result').set('html', "Recognizes the mouse enter event"); } window.addEvent('domready', function() { $('id_name').addEvent('mouseenter', mouseEnterFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Enter"/> <br/><br/>
<lable id = "result"></lable>
</body>
</html>You will receive the following output −
Output
If you keep your mouse pointer on the button, then you will get the following message.
Recognizes the mouse enter eventLet us take an example that explains how the Mouse Leave event works. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseLeaveFunction = function(){
//put whatever you want to happen in here
$('result').set('html', "Recognizes the mouse leave event"); } window.addEvent('domready', function() { $('id_name').addEvent('mouseleave', mouseLeaveFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Leave"/><br/>
<lable id = "result"></lable>
</body>
</html>You will receive the following output −
Output
If you keep your mouse pointer on the button, then you will get the following message.
Recognizes the mouse leave eventRemove an Event
This method is used to remove an event. Removing an event is just as easy as adding an event and it follows the same structure. Take a look at the following syntax.
Syntax
//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);Keystrokes as Input
MooTools can recognize your actions — the kind of input you have given through the DOM element. By using the keydown function, you can read each and every key from the input type DOM element.
Let us take an example wherein, there is a text area element. Let us now add a keydown event to the text area that whenever the text area recognizes any keystore, it will respond with an alert message immediately. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var keydownEventFunction = function () {
alert('This textarea can now recognize keystroke value');
};
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keydownEventFunction);
});
</script>
</head>
<body>
Write Something: <textarea id = "myTextarea"> </textarea>
</body>
</html>You will receive the following output −
Output
Try to enter something into the text area. You will find an alert box along with the following message.
This textarea can now recognize keystroke valueTry to add some text to the same example that reads the value from the textarea when you entered into it. It is possible by using event.key function with the event. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
//notice the parameter "event" within the function parenthesis
var keyStrokeEvent = function(event){
var x = event.key;
alert("The enter value is: "+x)
}
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keyStrokeEvent);
});
</script>
</head>
<body>
<lable>Write Something:</lable> <br/>
<textarea id = "myTextarea"> </textarea>
</body>
</html>You will receive the following output −
Output
Try to enter text in the text area. You will be directed to an alert box along with the value you entered into the text area.
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.
Basic methods
The following are the basic methods that capture and help to modify the properties of the DOM elements.
get()
This method is used to retrieve the element properties such as src, value, name, etc. The following statement is the syntax of the get method.
Syntax
//this will return the html tag (div, a, span...) of the element
$('id_name').get('tag');You will receive the following list of properties while retrieving the element using the get() method.
- id
- name
- value
- href
- src
- class (will return all classes if the element)
- text (the text content of an element)
set()
This method is used to set a value to a variable. This is useful when combined with events and lets you change values. The following statement is the syntax of the set method.
Syntax
//this will set the href of #id_name to "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');erase()
This method helps you erase the value of an elements property. You need to choose which property you want to erase from the element. The following statement is the syntax of the erase() method.
Syntax
//this will erase the href value of #id_name
$('id_name').erase('href');Moving Elements
Moving element means moving an existing element from one position to another position around the page. You can use the inject() method to move an element around the page. Let us take an example wherein, one HTML page contains three div elements which contains the content A, B, and C respectively in an order. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var elementA = $('elemA'); var elementB = $('elemB');
var elementC = $('elemC');
})
</script>
</head>
<body>
<div id = "body_wrap">
<div id = "elemA">A</div>
<div id = "elemB">B</div>
<div id = "elemC">C</div>
</div>
</body>
</html>You will receive the following output −
Output
Now, using the inject() method in MooTools, we can change the order from ABC to ACB. This means, we need to place elementB after elementC and place the elementC before elementB. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var elementA = $('elemA');
var elementB = $('elemB'); var elementC = $('elemC');
//translates to: inject element C before element B
elementC.inject(elementB, 'before');
//translates to: inject element B after element C
elementB.inject(elementC, 'after');
});
</script>
</head>
<body>
<div id = "body_wrap">
<div id = "elemA">A</div>
<div id = "elemB">B</div>
<div id = "elemC">C</div>
</div>
</body>
</html>You will receive the following output −
Output
Create New Element
MooTools provides an option to create any type of DOM element and insert it into the HTML page. But, we have to maintain a proper syntax for every element. Let us take an example wherein, the following code snippet is the syntax for creating an (anchor) element.
Syntax
var el = new Element('a', {
id: 'Awesome',
title: 'Really?',
text: 'I\'m awesome',
href: 'http://MooTools.net',
events: {
'click': function(e) {
e.preventDefault();
alert('Yes, really.');
}
},
styles: {
color: '#f00'
}
});Let us take an example that will create an anchor element using MooTools library. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var el = new Element('a', {
id: 'Awesome',
title: 'Really?',
text: 'I\'m awesome',
href: 'http://www.tutorialspoint.com',
events: {
'click': function(e) {
e.preventDefault();
alert('Yes, really.');
}
},
styles: {
color: '#f00'
}
});
el.inject(document.body);
});
</script>
</head>
<body>
</body>
</html>You will receive the following output −
Output
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.
Set and Get Style Properties
MooTools library contains different methods which are used to set or get the value of a particular style property or multiple style properties.
setStyle()
This method allows you to set the value for a single property of DOM element. This method will work on the selector object of a particular DOM element. Let us take an example that provides background color for div element. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
$('body_wrap').setStyle('background-color', '#6B8E23'); $$('.class_name').setStyle('background-color', '#FAEBD7');
});
</script>
</head>
<body>
<div id = "body_wrap">A</div>
<div class = "class_name">B</div>
<div class = "class_name">C</div>
<div class = "class_name">D</div>
<div class = "class_name">E</div>
</body>
</html>You will receive the following output −
Output
getStyle()
getStyle() method is to retrieve the value of a style property of an element. Let us take an example that retrieves the background-color of a div named body_wrap. Take a look at the following syntax.
Syntax
//first, set up your variable to hold the style value
var styleValue = $('body_wrap').getStyle('background-color');Multiple Style Properties
MooTools library contains different methods used to set or get the value of a particular style property or multiple style properties.
setStyle()
If you want to set multiple style properties on a single element or an array of elements then you have to use the setStyle() method. Take a look at the following syntax of the setStyle() method.
Syntax
$('<element-id>').setStyles({
//use different style properties such as width, height, background-color, etc.
});Example
<!DOCTYPE html>
<html>
<head>
<style>
#body_div {
width: 200px;
height: 200px;
background-color: #eeeeee;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var setWidth = function(){
$('body_div').setStyles({ 'width': 100 }); } var setHeight = function(){ $('body_div').setStyles({
'height': 100
});
}
var reset = function(){
$('body_div').setStyles({ 'width': 200, 'height': 200 }); } window.addEvent('domready', function() { $('set_width').addEvent('click', setWidth);
$('set_height').addEvent('click', setHeight); $('reset').addEvent('click', reset);
});
</script>
</head>
<body>
<div id = "body_div"> </div><br/>
<input type = "button" id = "set_width" value = "Set Width to 100 px"/>
<input type = "button" id = "set_height" value = "Set Height to 100 px"/>
<input type = "button" id = "reset" value = "Reset"/>
</body>
</html>You will receive the following output −
Output
Try these buttons on the web page, you can see the difference with the div size.
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.
toInt()
This method converts any input value to the integer. You can call it on a variable and it will try to give the regular integer from whatever the variable contains.
Let us take an example that design a web page that contain a textbox and a button named TO INT. The button will check and return the value that you entered into the textbox as real integer. If the value is not an integer, then it will return the NaN symbol. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var toIntDemo = function(){
var input = $('input').get('value'); var number = input.toInt(); alert ('Value is : ' + number); } window.addEvent('domready', function() { $('toint').addEvent('click', toIntDemo);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "toint" value = "TO INT"/>
</body>
</html>Recibirá el siguiente resultado:
Output
Pruebe diferentes valores y conviértalos en números enteros reales.
tipo de()
Este método examina el valor de una variable que pasa y devuelve el tipo de ese valor.
Tomemos un ejemplo en el que diseñamos una página web y verificamos si el valor de entrada es Número, Cadena o Booleano. Eche un vistazo al siguiente código.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var checkType = function(){
var input = $('input').get('value'); var int_input = input.toInt(); if(typeOf(int_input) != 'number'){ if(input == 'false' || input == 'true'){ alert("Variable type is : Boolean"+" - and value is: "+input); } else{ alert("Variable type is : "+typeof(input)+" - and value is: "+input); } } else{ alert("Variable type is : "+typeof(int_input)+" - and value is:"+int_input); } } window.addEvent('domready', function() { $('checktype').addEvent('click', checkType);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "checktype" value = "CHECK TYPE"/>
</body>
</html>Recibirá el siguiente resultado:
Output
Pruebe los diferentes valores y verifique el tipo.
límite()
El método limit () se utiliza para establecer los valores de límite inferior y superior para un número en particular. El número no debe exceder el valor límite superior. Si excede, entonces el número se cambia al valor del límite superior. Este proceso también es el mismo con el límite inferior.
Tomemos un ejemplo que proporciona un cuadro de texto para ingresar un valor, proporcione un botón para verificar el límite de ese valor. El límite predeterminado que usamos en el ejemplo es de 0 a 255. Eche un vistazo al siguiente código.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var checkLimit = function(){
var input = $('input').get('value'); var number = input.toInt(); var limited_number = number.limit(0, 255); alert("Number is : " + limited_number); } window.addEvent('domready', function() { $('check_limit').addEvent('click', checkLimit);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "check_limit" value = "Check Limit (0 to 255)"/>
</body>
</html>Recibirá el siguiente resultado:
Output
Pruebe con diferentes números para verificar el límite.
rgbToHex ()
El método rgbToHex () es convertir de los valores rojo, verde y azul al valor hexadecimal. Esta función se ocupa de los números y pertenece a la colección Array. Tomemos un ejemplo en el que diseñaremos una página web para ingresar los valores individuales de Rojo, Verde y Azul. Proporcione un botón para convertir los tres en valores hexadecimales. Eche un vistazo al siguiente código.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var rgbToHexa_Demo = function(){
var red = $('red').get('value'); var red_value = red.toInt(); var green = $('green').get('value');
var green_value = green.toInt();
var blue = $('blue').get('value'); var blue_value = blue.toInt(); var color = [red_value, green_value, blue_value].rgbToHex(); alert(" Hexa color is : " + color); } window.addEvent('domready', function() { $('rgbtohex').addEvent('click', rgbToHexa_Demo);
});
</script>
</head>
<body>
Red Value: <input type = "text" id = "red" /><br/><br/>
Green Value: <input type = "text" id = "green" /><br/><br/>
Blue Value: <input type = "text" id = "blue" /><br/><br/>
<input type = "button" id = "rgbtohex" value = "RGB To HEX"/>
</body>
</html>Recibirá el siguiente resultado:
Output
Pruebe diferentes valores de rojo, verde y azul y encuentre los valores hexadecimales.
Funciones de cadena
Analicemos algunos métodos de la clase String que pueden manipular el valor String de entrada. Antes de continuar, echemos un vistazo a la siguiente sintaxis de cómo llamar a una función de cadena.
Cuerda
var my_variable = "Heres some text";
var result_of_function = my_variable.someStringFunction();O,
var result_of_function = "Heres some text".someStringFunction();podar()
Este método se utiliza para eliminar el espacio en blanco de la posición frontal y la posición final de una cuerda determinada. No toca ningún espacio en blanco dentro de la cuerda. Eche un vistazo al siguiente código.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var input_str = " This is tutorialspoint.com ";
document.writeln("<pre>Before trim String is : |-"+input_str+"-|</pre>");
var trim_string = input_str.trim();
document.writeln("<pre>After trim String is : |-"+trim_string+"-|</pre>");
});
</script>
</head>
<body>
</body>
</html>Recibirá el siguiente resultado:
Output
En los cuadros de alerta anteriores, puede encontrar las diferencias en String antes de llamar al método trim () y después de llamar al método trim ().
limpiar()
Este método se utiliza para eliminar todos los espacios en blanco de la cadena dada y mantener un solo espacio entre las palabras. Eche un vistazo al siguiente código.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var input_str = " This is tutorialspoint.com ";
document.writeln("<pre>Before clean String is : |-"+input_str+"-|</pre>");
var trim_string = input_str.clean();
document.writeln("<pre>After clean String is : |-"+trim_string+"-|</pre>");
});
</script>
</head>
<body>
</body>
</html>Recibirá el siguiente resultado:
Output
contiene ()
Este método se utiliza para buscar una subcadena en una determinada cadena. Si la cadena dada contiene la cadena de búsqueda, devuelve verdadero; de lo contrario, devuelve falso. Eche un vistazo al siguiente código.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var containsString = function(){
var input_string = "Hai this is tutorialspoint";
var search_string = $('input').get('value'); var string_contains = input_string.contains(search_string); alert("contains : " + string_contains); } window.addEvent('domready', function() { $('contains').addEvent('click', containsString);
});
</script>
</head>
<body>
Given String : <p>Hai this is tutorialspoint</p>
Enter search string: <input type = "text" id = "input" />
<input type = "button" id = "contains" value = "Search String"/>
</body>
</html>Recibirá el siguiente resultado:
Output
sustituir()
Este método se utiliza para insertar la cadena de entrada en la cadena principal. Eche un vistazo al siguiente código.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var containsString = function(){
var input_string = "One is {one}, Two is {two}, Three is {three}";
var one_str = $('one').get('value'); var two_str = $('two').get('value');
var three_str = $('three').get('value'); var substitution_string = { one : one_str, two : two_str, three : three_str } var new_string = input_string.substitute(substitution_string); document.write("NEW STRING IS : " + new_string); } window.addEvent('domready', function() { $('contains').addEvent('click', containsString);
});
</script>
</head>
<body>
Given String : <p>One is {one}, Two {two}, Three is {three}</p>
one String : <input type = "text" id = "one" /><br/><br/>
two String : <input type = "text" id = "two" /><br/><br/>
three String : <input type = "text" id = "three" /><br/><br/>
<input type = "button" id = "contains" value = "Substitute String"/>
</body>
</html>Recibirá el siguiente resultado:
Output
Ingrese texto en los tres cuadros de texto y haga clic en el botón de cadena de sustitución, luego podrá ver la cadena de sustitución.
MooTools proporciona una característica tremenda que le ayuda a agregar funciones de arrastrar y soltar a los elementos de su página web. Podemos hacer esto creando nuestro propio nuevoDrag.Moveobjeto. Con este objeto, puede definir sus opciones y eventos. Las clases Drag and Drag.Move son de la biblioteca MooTools More.
Analicemos las opciones y eventos del objeto Drag.Move.
Arrastrar Mover
Drag.Move es un objeto que se utiliza para agregar la función de arrastrar y soltar a los elementos html. Drag.Move extiende Drag, por lo que podemos usar todas las Opciones y Eventos de la clase Drag mediante el objeto Drag.Move. Eche un vistazo a la siguiente sintaxis y comprenda cómo utilizar el objeto Drag.Move.
Sintaxis
var myDrag = new Drag.Move(dragElement, {
// Drag.Move Options
droppables: dropElement,
container: dragContainer,
// Drag Options
handle: dragHandle,
// Drag.Move Events
// the Drag.Move events pass the dragged element,
// and the dropped into droppable element
onDrop: function(el, dr) {
//will alert the id of the dropped into droppable element
alert(dr.get('id'));
},
// Drag Events
// Drag events pass the dragged element
onComplete: function(el) {
alert(el.get('id'));
}
});Opciones de Drag.Move
Drag.Move proporciona las siguientes opciones para mantener elementos html con funciones de arrastrar y soltar:
droppable - Esto le ayuda a configurar el selector de elementos soltables (los elementos que se registran en eventos relacionados con soltar).
container - Esto le ayuda a configurar el contenedor del elemento de arrastre (mantiene el elemento dentro).
snap- Esto le ayuda a establecer cuántos px debe arrastrar el cursor el usuario antes de que el elemento arrastrable comience a arrastrarse. El valor predeterminado es 6 y puede establecerlo en cualquier número de variable que represente un número.
handle- Esto le ayuda a agregar un identificador a su elemento arrastrable. El mango se convierte en el único elemento que aceptará el agarre.
Eche un vistazo a la siguiente sintaxis para saber cómo y dónde definir los elementos droppable y container, snap y handle.
Sintaxis
//here we define a single element by id
var dragElement = $('drag_element'); //here we define an array of elements by class var dropElements = $$('.drag_element');
var dragContainer = $('drag_container'); var dragHandle = $('drag_handle');
//now we set up our Drag.Move object
var myDrag = new Drag.Move(dragElement , {
// Drag.Move Options
// set up our droppables element with the droppables var we defined above
droppables: dropElements ,
// set up our container element with the container element var
container: dragContainer
// set up pixels the user must drag.
Snap: 10
// Adds a handle to your draggable element
handle: dragHandle
});Eventos Drag.Move
Los eventos Drag.Move proporcionan diferentes funciones que se pueden utilizar en diferentes niveles de la acción. Por ejemplo, cuando comienza a arrastrar o soltar un objeto, cada evento Drag.Move pasará el elemento arrastrado o el elemento soltado como parámetros.
Los siguientes son los eventos admitidos:
onStart ()
Esto genera un evento al inicio del arrastre. Si establece un chasquido largo, este evento no se generará hasta que el mouse esté a distancia. Eche un vistazo a la siguiente sintaxis.
Syntax
var myDrag = new Drag.Move(dragElement , {
// Drag options will pass the dragged element as a parameter
onStart: function(el) {
// put whatever you want to happen on start in here
}
});onDrag ()
Esto genera un evento continuamente mientras arrastra un elemento. Eche un vistazo a la siguiente sintaxis.
Syntax
var myDrag = new Drag.Move(dragElement , {
// Drag options will pass the dragged element as a parameter
onDrag: function(el) {
// put whatever you want to happen on drag in here
}
});onDrop ()
Esto genera un evento cuando sueltas el elemento que se puede arrastrar en un elemento que se puede soltar. Eche un vistazo a la siguiente sintaxis.
Syntax
var myDrag = new Drag.Move(dragElement , {
// It will pass the draggable element ('el' in this case)
// and the droppable element the draggable is interacting with ('dr' here)
onDrop: function(el, dr) {
// put whatever you want to happen on drop in here
}
});De vacaciones()
Esto genera un evento cuando un elemento que se puede arrastrar deja los límites de un elemento que se puede soltar. Eche un vistazo a la siguiente sintaxis.
Syntax
var myDrag = new Drag.Move(dragElement , {
// It will pass the draggable element ('el' in this case)
// and the droppable element the draggable is interacting with ('dr' here)
onLeave: function(el, dr) {
// put whatever you want to happen on Leave from droppable area in here
}
});onEnter ()
Esto surge cuando un elemento que se puede arrastrar entra en un área de elementos que se pueden soltar. Eche un vistazo a la siguiente sintaxis.
Syntax
var myDrag = new Drag.Move(dragElement , {
// It will pass the draggable element ('el' in this case)
// and the droppable element the draggable is interacting with ('dr' here)
onEnter: function(el, dr) {
// this will fire when a draggable enters a droppable element
}
});onComplete ()
Esto genera un evento. onComplete se refiere a cuando sueltas un droppable, y aumentará si aterrizas o no en un droppable. Eche un vistazo a la siguiente sintaxis.
Syntax
var myDrag = new Drag.Move(dragElement , {
// Drag Options
// Drag options will pass the dragged element as a parameter
onComplete: function(el) {
// put whatever you want to happen on complete
}
});Tomemos un ejemplo que explorará todas las funciones explicadas en este capítulo. Las funciones son: Arrastrar, Arrastrar, mover, onEnter, onLeave, onDrop, onStart, onDrag y onComplete. En este ejemplo, proporcionamos un HANDLE, con el que puede arrastrar el objeto que se puede arrastrar a cualquier lugar del contenedor. Para cada acción, hay una notificación en el lado izquierdo (indicado en color azul). Hay un área Droppable en el contenedor. Si el objeto Arrastrable entra en el área Droppable, entonces se activan los últimos tres indicadores. Eche un vistazo al siguiente código.
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* this is generally a good idea */
body {
margin: 0;
padding: 0;
}
/* make sure the draggable element has "position: absolute"
and then top and left are set for the start position */
#drag_me {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
top: 0;
left: 0;
}
#drop_here {
width: 80%;
height: 200px;
background-color: #eee;
margin-left: 100px;
margin-top: -200px !important;
}
/* make sure the drag container is set with position relative */
#drag_cont {
background-color: #ccc;
height: auto;
width: 500px;
position:relative;
margin-top: 20px;
margin-left: 20px;
margin-bottom: auto;
}
#drag_me_handle {
width: 100%;
height: auto;
background-color: #F5B041;
}
#drag_me_handle span {
display: block;
padding: 20px;
}
.indicator {
width: 100px;
height: auto;
background-color: #0066FF;
border-bottom: 1px solid #eee;
}
.indicator span {
padding: 10px;
display: block;
}
.draggable {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var dragElement = $('drag_me'); var dragContainer = $('drag_cont');
var dragHandle = $('drag_me_handle'); var dropElement = $$('.draggable');
var startEl = $('start'); var completeEl = $('complete');
var dragIndicatorEl = $('drag_ind'); var enterDrop = $('enter');
var leaveDrop = $('leave'); var dropDrop = $('drop_in_droppable');
var myDrag = new Drag.Move(dragElement, {
// Drag.Move options
droppables: dropElement,
container: dragContainer,
// Drag options
handle: dragHandle,
// Drag.Move Events
onDrop: function(el, dr) {
if (!dr) { }else {
dropDrop.highlight('#FB911C'); //flashes orange
el.highlight('#fff'); //flashes white
dr.highlight('#667C4A'); //flashes green
};
},
onLeave: function(el, dr) {
leaveDrop.highlight('#FB911C'); //flashes orange
},
onEnter: function(el, dr) {
enterDrop.highlight('#FB911C'); //flashes orange
},
// Drag Events
onStart: function(el) {
startEl.highlight('#FB911C'); //flashes orange
},
onDrag: function(el) {
dragIndicatorEl.highlight('#FB911C'); //flashes orange
},
onComplete: function(el) {
completeEl.highlight('#FB911C'); //flashes orange
}
});
});
</script>
</head>
<body>
<p align = "center">Drag and Drop Application</p>
<div id = "drag_cont">
<div id = "start" class = "indicator"><span>Start</span></div>
<div id = "drag_ind" class = "indicator"><span>Drag</span></div>
<div id = "complete" class = "indicator"><span>Complete</span></div>
<div id = "enter" class = "indicator"><span>Enter Droppable Element</span></div>
<div id = "leave" class = "indicator"><span>Leave Droppable Element</span></div>
<div id = "drop_in_droppable" class = "indicator">
<span>Dropped in Droppable Element</span>
</div>
<div id = "drag_me">
<div id = "drag_me_handle"><span>HANDLE</span></div>
</div>
<div id = "drop_here" class = "draggable">
<p align = "center">Droppable Area</p>
</div>
</div>
</body>
</html>Recibirá el siguiente resultado en el que debe hacer clic en Manejar y arrastrar. Ahora puede encontrar las indicaciones de notificación en el lado izquierdo.
Output
MooTools proporciona una forma de crear y utilizar expresiones regulares (regex). Este tutorial explicará los conceptos básicos y los usos extremos de las expresiones regulares.
Analicemos algunos métodos de las expresiones regulares.
prueba()
test () es un método utilizado para probar la expresión regular con la cadena de entrada. Si bien JavaScript ya proporciona el objeto RegExp junto con la función test (), MooTools agrega más funciones al objeto RegExp. Tomemos un ejemplo y entendamos cómo usar el método test (). Eche un vistazo al siguiente código.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched"); } else { $('regex_1_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "TEST"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>Recibirá el siguiente resultado:
Salida
Ignorar caso
Esta es una de las situaciones importantes en el concepto de expresiones regulares. Si no desea que una expresión regular distinga entre mayúsculas y minúsculas, llame al método de prueba con una opción 'I'. Tomemos un ejemplo que explicará el caso de ignorar en una expresión regular. Eche un vistazo al siguiente código.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value');
var regex_value = $('regex_match').get('value'); var test_result = test_string.test(regex_value, "i"); if (test_result){ $('regex_1_result').set('html', "Matched");
} else {
$('regex_1_result').set('html', "Not Match"); } } window.addEvent('domready', function() { $('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "TEST"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>Recibirá el siguiente resultado:
Salida
Regex comienza con '^'
La expresión regular '^' (cap) es un operador especial que le permite verificar la expresión regular al comienzo de una cadena determinada. Este operador se utiliza como prefijo de la expresión regular. Tomemos un ejemplo que explicará cómo utilizar este operador. Eche un vistazo al siguiente código.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched"); } else { $('regex_1_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "Match"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>Recibirá el siguiente resultado:
Salida
Regex termina con '$'
El Regex '$' (dólar) es un operador especial que le permite verificar la expresión regular al final de una cadena dada. Este operador se utiliza como sufijo de la expresión regular. Tomemos un ejemplo que explicará cómo utilizar este operador. Eche un vistazo al siguiente código.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value');
var regex_value = $('regex_match').get('value'); var test_result = test_string.test(regex_value); if (test_result){ $('regex_1_result').set('html', "Matched");
} else {
$('regex_1_result').set('html', "Not Match"); } } window.addEvent('domready', function() { $('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "Match"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>Recibirá el siguiente resultado:
Salida
Clases de personajes
Las clases de caracteres son una fase de expresiones regulares que le permiten hacer coincidir caracteres específicos (A o Z) o un rango de caracteres (A - Z). Por ejemplo, si desea probar si alguna de las palabras foo y zoo existe en una cadena, las clases le permiten hacerlo colocando los caracteres entre corchetes [] con las expresiones regulares. Eche un vistazo al siguiente código.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo_1 = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match_1').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched"); } else { $('regex_1_result').set('html', "Not Match");
}
}
var regex_demo_2 = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match_2').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_2_result').set('html', "Matched"); } else { $('regex_2_result').set('html', "Not Match");
}
}
var regex_demo_3 = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match_3').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_3_result').set('html', "Matched"); } else { $('regex_3_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex_1').addEvent('click', regex_demo_1); $('regex_2').addEvent('click', regex_demo_2);
$('regex_3').addEvent('click', regex_demo_3);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp 1: <input type = "text" id = "regex_match_1"/>
<input type = "button" id = "regex_1" value = "Match"/>
<Lable id = "regex_1_result"></Lable><br/><br/>
Reg Exp 2: <input type = "text" id = "regex_match_2"/>
<input type = "button" id = "regex_2" value = "Match"/>
<Lable id = "regex_2_result"></Lable><br/><br/>
Reg Exp 3: <input type = "text" id = "regex_match_3"/>
<input type = "button" id = "regex_3" value = "Match"/>
<Lable id = "regex_3_result"></Lable>
</body>
</html>Recibirá el siguiente resultado:
Salida
escapeRegExp ()
Este método se usa para ignorar los caracteres de escape de una cadena dada mientras se verifica con una expresión regular. Por lo general, los caracteres de escape son:
- . * + ? ^ $ { } ( ) | [ ] / \Tomemos un ejemplo en el que tenemos una cadena determinada como "[verifique esto] es $900". If you want to take this whole string you have to declare it like this — "\[check\-this\-stuff\] it is \$900 ". El sistema acepta solo este patrón. No usamos los patrones de caracteres escakpe en MooTools. Tenemos el método escapeRegExp () para ignorar los caracteres de escape. Eche un vistazo al siguiente código.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo_1 = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match_1').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched"); } else { $('regex_1_result').set('html', "Not Match");
}
}
var regex_demo_2 = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match_1').get('value');
regex_value = regex_value.escapeRegExp();
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_2_result').set('html', "Matched"); } else { $('regex_2_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex_1').addEvent('click', regex_demo_1); $('regex_2').addEvent('click', regex_demo_2);
$('regex_3').addEvent('click', regex_demo_3);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp 1: <input type = "text" id = "regex_match_1" size = "6"/><br/><br/>
<input type = "button" id = "regex_1" value = "With escapeRegExp()"/>
<Lable id = "regex_1_result"></Lable><br/><br/>
<input type = "button" id = "regex_2" value = "Without escapeRegExp()"/>
<Lable id = "regex_2_result"></Lable><br/><br/>
</body>
</html>Recibirá el siguiente resultado:
Salida
MooTools ofrece una opción que admite publicaciones periódicas. Con esto, puede llamar a una función periódicamente con el mismo nivel de frecuencia de tiempo. Analicemos los métodos y las características de las publicaciones periódicas.
periódico()
Este método se utiliza para elevar una función periódicamente con el mismo nivel de frecuencia de tiempo. Hay algunas cosas que debemos definir al principio. Una es la función que ejecuta periódicamente y la segunda es el valor numérico que indica la frecuencia con la que desea aumentar una función (valor numérico medido en milisegundos). Tomemos un ejemplo que explica cómo se ejecuta una función cada 100 milisegundos. Eche un vistazo al siguiente código.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var periodicalFunction = function(){
document. writeln("www.tutorialspoint.com");
}
window.addEvent('domready', function() {
//number at the end indicates how often to fire, measure in milliseconds
var periodicalFunctionVar = periodicalFunction.periodical(100);
});
</script>
</head>
<body>
</body>
</html>Recibirá el siguiente resultado:
Salida
Elemento como segunda variable
La función periódica también vincula una segunda variable que está fuera de la función domready (). Puede vincular el elemento como segunda variable en la función que desea generar periódicamente. Eche un vistazo a la siguiente sintaxis para comprender cómo pasar una variable.
Sintaxis
window.addEvent('domready', function() {
//pass something to a var
var passedVar = $('elementID');
//now periodicalFunction will be able to use "this" to refer to "passedVar"
var periodicalFunctionVar = periodicalFunction.periodical(100, passedVar);
});Aquí, passVar es la variable de elemento que contiene un elemento html. Y esa variable pasa a la función periódicaperiodicalFunctionVar como segunda variable.
$ Borrar ()
$ Este método se utiliza para detener la función periódica. Este método ayuda a restablecer el valor de la variable periódica. Eche un vistazo a la siguiente sintaxis para comprender cómo usar la función $ clear ().
Sintaxis
//we clear the var that we passed the function and periodical to
$clear(periodicalFunctionVar);Slider es una funcionalidad que refleja una acción mientras se desliza la perilla o cualquier botón. Puede crear su propio control deslizante mientras define elementos, el controlador, las opciones y los eventos de devolución de llamada. Discutamos más sobre el control deslizante.
Crear un nuevo control deslizante
Primero tenemos que elegir los elementos HTML adecuados para el control deslizante. Al considerar la idea básica, los elementos div son los más adecuados para los controles deslizantes porque al usar divs, podemos crear elementos secundarios. Ahora tenemos que configurar el CSS para esos divs para hacer que la estructura div sea un control deslizante perfecto. Aquí, el div padre es paraslider y el niño div es para knob.
Ahora tenemos que usar estos divs como controles deslizantes pasando los elementos al constructor Slider como sliderObjecty knobObject. Eche un vistazo a la siguiente sintaxis para definir el control deslizante.
Sintaxis
var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);También tenemos que definir las opciones del control deslizante.
Opciones de control deslizante
Analicemos algunas opciones que se utilizan para los controles deslizantes.
Chasquido
Un valor instantáneo puede ser un valor verdadero o falso. Esto determina si la perilla se ajusta a los pasos a medida que se arrastra por el control deslizante. Por defecto, es falso.
Compensar
Este es el desplazamiento relativo de la perilla desde la posición inicial. Intenta experimentar con este. Por defecto, es 0.
Range
This is a very useful option. You can set a range of numbers that the steps will break into. For example, if your range was [0, 200] and you had 10 steps, your steps would be 20 apart. The range can also include negative numbers, for example [-10, 0], which is very useful when inverting the scrolled. By default, it is false.
Wheel
Set wheel to true and the scroller will recognize the mousewheel event. When using the mousewheel, you may have to adjust the range to ensure that the mousewheel event does not appear inverted (again, more on that later).
Steps
The default of 100 steps is very useful as it’s easy to use as percentage. You can, however, set as many steps (that are usable) within reason. By default, it is 100.
Mode
Mode will define whether a slider registers itself as vertical or horizontal. However, there are a few more necessary steps to convert from horizontal and vertical. By default, it is horizontal.
Callback Events
There are three important callback events that a Slider provides.
onChange
Any change in the present step triggers the execution of the event. Check out the example given below to see when it executes.
onTick
Any change in the position of the handle triggers the execution of this event. Check out the example given below to see what this executes.
onComplete
This event executes whenever the handle is let go of. Check out the example given below to see when it executes.
Example
The following example explains the horizontal and vertical slider along with the event indicators. Take a look at the following code.
<!DOCTYPE html>
<html>
<head>
<style "text/css">
#slider {
width: 200px;
height: 20px;
background-color: #0099FF;
}
#knob {
width: 20px;
height: 20px;
background-color: #993333;
}
#sliderv {
width: 20px;
height: 200px;
background-color: #0099FF;
}
#knobv {
width: 20px;
height: 20px;
background-color: #993333;
}
#change{
background-color: burlywood;
border: 2px solid black;
width: 200px;
}
#complete{
background-color: burlywood;
border: 2px solid black;
width: 200px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var SliderObject = new Slider('slider', 'knob', {
//options
range: [0, 10],
snap: false,
steps: 10,
offset: 0,
wheel: true,
mode: 'horizontal',
//callback events
onChange: function(step){
$('change').highlight('#F3F825'); $('steps_number').set('html', step);
},
onTick: function(pos){
$('tick').highlight('#F3F825'); $('knob_pos').set('html', pos);
//this line is very necessary (left with horizontal)
this.knob.setStyle('left', pos);
},
onComplete: function(step){
$('complete').highlight('#F3F825') $('steps_complete_number').set('html', step);
this.set(step);
}
});
var SliderObjectV = new Slider('sliderv', 'knobv', {
range: [-10, 0],
snap: true,
steps: 10,
offset: 0,
wheel: true,
mode: 'vertical',
onChange: function(step){
$('stepsV_number').set('html', step*-1); } }); //sets the vertical one to start at 0 //without this it would start at the top SliderObjectV.set(0); //sets the slider to step 7 $('set_knob').addEvent('click', function(){ SliderObject.set(7)});
});
</script>
</head>
<body>
<div id = "slider">
<div id = "knob"></div>
</div><br/><br/>
<div id = "sliderv">
<div id = "knobv"></div>
</div><br/>
<span id = "stepsV_number"></span> <br/>
<div id = "change" class = "indicator">
<strong>onChange</strong><br/>
Passes the step you are on: <span id = "steps_number"></span>
</div></br/>
<div id = "complete" class = "indicator">
<strong>onComplete</strong><br />
passes the current step: <span id = "steps_complete_number"></span>
</div>
</body>
</html>Salida
Haga clic en la perilla marrón en los controles deslizantes horizontal o vertical y luego arrástrela, encontrará la posición del paso y la indicación del evento para cada acción.
Sortables es una función avanzada en el desarrollo web y realmente puede abrir las opciones con sus diseños de interfaz de usuario. También incluye una gran función llamada "serializar" que administra una lista de identificadores de elementos y es útil para scripts del lado del servidor.
Crear un nuevo objeto clasificable
Primero, enviamos la lista de elementos a una variable. Si desea una matriz de la lista de elementos, asigne toda la colección a una variable. Y, finalmente, pase esa variable a un constructor ordenable. Eche un vistazo a la siguiente sintaxis para crear un objeto ordenable.
Sintaxis
var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);El siguiente es el código HTML para la sintaxis.
Sintaxis
<ul id = "listA">
<li>Item A1</li>
<li>Item A2</li>
<li>Item A3</li>
<li>Item A4</li>
</ul>
<ul id = "listB">
<li>Item B1</li>
<li>Item B2</li
<li>Item B3</li>
<li>Item B4</li>
</ul>Opción clasificables
Sortable ofrece diferentes opciones para personalizar el objeto clasificable. Analicemos las opciones.
Constreñir
Esta opción determina si los elementos de la lista pueden saltar entre uls dentro del objeto ordenable. Por ejemplo, si tiene dos uls en el objeto ordenable, puede "constrain"los elementos de la lista a su ul principal estableciendo"constrain: true". Eche un vistazo a la siguiente sintaxis para configurar la restricción.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
constrain: true //false is default
});Clon
Esta opción le ayuda a crear un elemento de clonación debajo del cursor. Ayuda a ordenar los elementos de la lista. Eche un vistazo a la siguiente sintaxis para clonar.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
clone: true //false is default
});Encargarse de
El controlador es una opción que acepta un elemento para que actúe como controlador de arrastre. Esto es útil siempre que desee que los elementos de su lista se puedan seleccionar o desee realizar acciones en su lista. Si no proporciona ninguna variable, se considerará falsa de forma predeterminada. Eche un vistazo a la siguiente sintaxis para usar handle.
Syntax
var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
handle: handleElements //false is default
});Opacidad
Esta opción le permite ajustar el elemento de clasificación. Si usa un clon, la opacidad afecta al elemento que ordena.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
opacity: 1 //default is 1
});Revertir
Esta opción acepta "falso" o cualquier opción de Fx. Si configura la opción Fx en revertir, creará un efecto para que el elemento ordenado se asiente en su lugar. Eche un vistazo a la siguiente sintaxis para revertir.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
revert: false //this is the default
});
//you can also set Fx options
var sortableLists = new Sortables(sortableListsArray, {
revert: {
duration: 50
}
});Chasquido
Esta opción le permite ver cuántos px el usuario arrastrará el mouse antes de que el elemento comience a seguir.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
snap: 10 //user will have to drag 10 px to start the list sorting
});Eventos clasificables
Sortable proporciona los siguientes eventos que son agradables y sencillos.
onStart - se ejecuta cuando comienza el arrastre (una vez que se activa el snap)
onSort - se ejecuta cuando los artículos cambian de orden
onComplete - se ejecuta cuando sueltas un elemento en su lugar
Métodos clasificables
Los siguientes métodos clasificables son esencialmente funciones que pertenecen a clases:
despegar()
Con detach (), puede "separar" todos los identificadores actuales, haciendo que el objeto de lista completo no se pueda ordenar. Esto es útil para deshabilitar la ordenación.
adjuntar()
Este método "adjuntará" los identificadores a los elementos de clasificación, funciona para habilitar la clasificación después de separar ().
addItems ()
Esto le permite agregar nuevos elementos a su lista ordenable. Supongamos que tiene una lista ordenable en la que el usuario puede agregar un nuevo elemento, una vez que agregue ese nuevo elemento, deberá habilitar la clasificación en ese nuevo elemento.
eliminar elementos()
Este método le permite eliminar la capacidad de clasificación de un elemento dentro de una lista ordenable. Esto es útil cuando desea bloquear un elemento en particular dentro de una lista específica y no dejar que se ordene con otros.
addLists ()
En lugar de simplemente agregar un nuevo elemento a una lista existente, es posible que desee agregar una lista completamente nueva al objeto ordenable. Este método le permite agregar varias listas, lo que hace que sea realmente fácil agregar más ordenables.
removeLists ()
Eliminemos las listas del objeto ordenable. Esto es útil cuando desea bloquear una lista en particular. Puede eliminar la lista, dejando las otras listas aún en el objeto ordenable, pero bloqueando el contenido de la lista eliminada.
publicar por fascículos()
Toda esa clasificación es genial, pero ¿qué pasa si quieres hacer algo con los datos? .publicar por fascículos(); devolverá una lista de los ID de los elementos, así como su orden en la lista. Puede elegir de qué lista obtener datos dentro del objeto por número de índice.
Ejemplo
El siguiente ejemplo crea una matriz de elementos div con numeración. Luego, reorganícelos haciendo clic, arrastrando y soltando acciones usando el puntero del mouse. Eche un vistazo al siguiente código.
<!DOCTYPE html>
<html>
<head>
<style>
#test {
position: inherit;
}
ul#sortables {
width: 300px;
margin: 0;
padding: 0;
}
li.sortme {
padding: 4px 8px;
color: #fff;
cursor: pointer;
list-style: none;
width: 300px;
background-color: #222;
border: 1px solid;
}
ul#sortables li {
margin: 10px 0;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
new Sortables($('test'), { initialize: function(){ var step = 0; this.elements.each(function(element, i) { var color = [step, 82, 87].hsbToRgb(); element.setStyle('background-color', color); step = step + 35; element.setStyle('height', $random(40, 100));
});
}
});
});
</script>
</head>
<body>
<ul id = "test">
<li class = "sortme">0</li>
<li class = "sortme">1</li>
<li class = "sortme">2</li>
<li class = "sortme">3</li>
<li class = "sortme">4</li>
<li class = "sortme">5</li>
<li class = "sortme">6</li>
<li class = "sortme">7</li>
<li class = "sortme">8</li>
<li class = "sortme">9</li>
<li class = "sortme">10</li>
</ul>
</body>
</html>Recibirá el siguiente resultado:
Salida
Accordion es el complemento más popular que proporciona MooTools. Ayuda a ocultar y revelar los datos. Discutamos más al respecto.
Creando nuevo acordeón
Los elementos básicos que requiere un acordeón son pares de conmutadores y su contenido. Creemos pares de encabezados y contenidos del html.
<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>Eche un vistazo a la siguiente sintaxis para comprender cómo construir un acordeón basado en la estructura HTML anterior.
Sintaxis
var toggles = $$('.togglers'); var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);Ejemplo
Tomemos un ejemplo que define la funcionalidad básica de Accordion. Eche un vistazo al siguiente código.
<!DOCTYPE html>
<html>
<head>
<style>
.togglers {
padding: 4px 8px;
color: #fff;
cursor: pointer;
list-style: none;
width: 300px;
background-color: #222;
border: 1px solid;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var toggles = $$('.togglers'); var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);
});
</script>
</head>
<body>
<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>
<h3 class = "togglers">Toggle 3</h3>
<p class = "elements">Here is the content of toggle 3</p>
</body>
</html>Recibirá el siguiente resultado:
Salida
Opciones de acordeón
El acordeón ofrece funciones extraordinarias. Estas funciones ayudan a ajustar las opciones para ofrecer resultados personalizados.
monitor
Esta opción determina qué elemento se muestra al cargar la página. El valor predeterminado es 0, por lo que se muestra el primer elemento. Para establecer otro elemento, simplemente ingrese otro número entero que corresponda con su índice. A diferencia de "mostrar", la pantalla hará que el elemento se abra.
Syntax
var AccordionObject = new Accordion(toggles, content {
display: 0 //default is 0
});show
Al igual que "mostrar", mostrar determina qué elemento se abrirá cuando se cargue la página, pero en lugar de una transición, "mostrar" hará que el contenido se muestre al cargar sin ninguna transición.
Syntax
var AccordionObject = new Accordion(toggles, content {
show: 0 //default is 0
});altura
Cuando se establece en verdadero, se producirá un efecto de transición de altura al cambiar entre los elementos mostrados. Este es el ajuste de acordeón estándar que ve arriba.
Syntax
var AccordionObject = new Accordion(toggles, content {
height: true //default is true
});anchura
Esto funciona igual que el heightopción. Sin embargo, en lugar de cambiar la altura para mostrar el contenido, esto ayuda en la transición del ancho. Si usa "ancho" con una configuración estándar, como la que usamos anteriormente, entonces el espacio entre la alternancia del título seguirá siendo el mismo, según la altura del contenido. El div "contenido" luego pasará de izquierda a derecha para mostrarse en ese espacio.
Syntax
var AccordionObject = new Accordion(toggles, content {
width: false //default is false
});opacidad
Esta opción determina si mostrar o no un efecto de transición de opacidad cuando oculta o muestra algún contenido. Dado que usamos las opciones predeterminadas anteriores, puede ver el efecto allí.
Syntax
var AccordionObject = new Accordion(toggles, content {
opacity: true //default is true
});FixedHeight
Para establecer una altura fija, debe fijar un número entero (por ejemplo, podría poner 100 para el contenido de 100 px de alto). Esto debe usarse con algún tipo de propiedad de desbordamiento de CSS si planea tener una altura fija menor que la altura natural del contenido.
Syntax
var AccordionObject = new Accordion(toggles, content {
fixedHeight: false //default is false
});ancho fijo
Al igual que "FixedHeight" anterior, esto establecerá el ancho si le da a esta opción un número entero.
Syntax
var AccordionObject = new Accordion(toggles, content {
fixedWidth: false //default is false
});escóndete siempre
Esta opción le permite agregar un control de alternancia a los títulos. Con esto establecido en verdadero, cuando hace clic en un título de contenido abierto, el elemento de contenido se cerrará automáticamente sin abrir nada más. Puede ver la ejecución en el siguiente ejemplo.
Syntax
var AccordionObject = new Accordion(toggles, content {
alwaysHide: false //default is false
});Eventos de acordeón
Estos eventos le permiten crear su funcionalidad para cada acción de Accordion.
onActive
Esto se ejecutará cuando abra un elemento. Pasará el elemento de control de alternancia y el elemento de contenido que se está abriendo y también los parámetros.
Syntax
var AccordionObject = new Accordion(toggles, content {
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); //green
element.highlight('#76C83D');
}
});onBackground
Esto se ejecuta cuando un elemento comienza a esconderse y pasa a todos los demás elementos que se están cerrando, pero no se están abriendo.
Syntax
var AccordionObject = new Accordion(toggles, content {
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); //red
element.highlight('#DC4F4D');
}
});onComplete
Este es su evento onComplete estándar. Pasa una variable que contiene el elemento de contenido.
Syntax
var AccordionObject = new Accordion(toggles, content {
onComplete: function(one, two, three, four){
one.highlight('#5D80C8'); //blue
two.highlight('#5D80C8');
three.highlight('#5D80C8');
four.highlight('#5D80C8');
}
});Métodos de acordeón
Estos métodos le ayudan a crear y manipular secciones de acordeón.
addSection ()
Con este método, puede agregar una sección (un par de elementos de alternancia / contenido). Funciona como muchos de los otros métodos que hemos visto. Primero, consulte el objeto acordeón, use .addSection, luego puede llamar a la identificación del título, la identificación del contenido y, finalmente, indique en qué posición desea que aparezca el nuevo contenido (0 es el primer lugar).
Syntax
AccordionObject.addSection('togglersID', 'elementsID', 2);Note- Cuando agrega una sección como esta, aunque aparecerá en el lugar del índice 2, el índice real será +1 el último índice. Así que si usted tiene 5 artículos en su conjunto (0-4) y se añade un 6 º , su índice sería 5, independientemente de donde se agrega con .addSection ();
monitor()
Esto le permite abrir un elemento dado. Puede seleccionar el elemento por su índice (por lo tanto, si ha agregado un par de elementos y desea mostrarlo, aquí tendrá un índice diferente al que usaría anteriormente.
Syntax
AccordionObject.display(5); //would display the newly added elementExample
El siguiente ejemplo explica la función Accordion con algunos efectos. Eche un vistazo al siguiente código.
<!DOCTYPE html>
<html>
<head>
<style>
.togglers {
color: #222;
margin: 0;
padding: 2px 5px;
background: #EC7063;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 15px;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
}
.ind {
background: #2E86C1;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 20px;
color: aliceblue;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
width: 200px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var toggles = $$('.togglers'); var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content, {
show: 0,
height : true,
width : false,
opacity: true,
fixedHeight: false,
fixedWidth: false,
alwaysHide: true,
onActive: function(toggler, element) {
toggler.highlight('#DC7633'); //green
element.highlight('#DC7633');
$('active').highlight('#DC7633'); }, onBackground: function(toggler, element) { toggler.highlight('#AED6F1'); //red element.highlight('#AED6F1'); $('background').highlight('#F4D03F');
}
});
$('display_section').addEvent('click', function(){
AccordionObject.display(4);
});
});
</script>
</head>
<body>
<div id = "active" class = "ind">onActive</div>
<div id = "background" class = "ind">onBackground</div>
<div id = "accordion_wrap">
<p class = "togglers">Toggle 1: click here</p>
<p class = "elements">Here is the content of toggle 1 Here is the content of
toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here
is the content of toggle 1 Here is the content of toggle 1 Here is the content
of toggle 1 Here is the content of toggle 1</p>
<p class = "togglers">Toggle 2: click here</p>
<p class = "elements">Here is the content of toggle 2</p>
<p class = "togglers">Toggle 3: click here</p>
<p class = "elements">Here is the content of toggle 3</p>
<p class = "togglers">Toggle 4: click here</p>
<p class = "elements">Here is the content of toggle 4</p>
</div>
<p>
100
<button id = "display_section" class = "btn btn-primary">
display section
</button>
</p>
</body>
</html>Output
Haga clic en cada sección de Alternar, luego encontrará los datos ocultos y los indicadores de eventos para cada acción.
MooTools proporciona información sobre herramientas diferentes para diseñar estilos y efectos personalizados. En este capítulo, aprenderemos las diversas opciones y eventos de la información sobre herramientas, así como algunas herramientas que le ayudarán a agregar o eliminar información sobre herramientas de los elementos.
Creación de una nueva información sobre herramientas
Crear una información sobre herramientas es muy simple. Primero, tenemos que crear el elemento donde adjuntaremos la información sobre herramientas. Tomemos un ejemplo que crea una etiqueta de anclaje y la agrega a la clase Tips en el constructor. Eche un vistazo al siguiente código.
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>Eche un vistazo al código utilizado para crear información sobre herramientas.
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);Ejemplo
El siguiente ejemplo explica la idea básica de la información sobre herramientas. Eche un vistazo al siguiente código.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);
});
</script>
</head>
<body>
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>
</body>
</html>Recibirá el siguiente resultado:
Salida
Opciones de información sobre herramientas
Solo hay cinco opciones en Consejos y todas se explican por sí mismas.
showDelay
Un número entero medido en milisegundos, esto determinará el retraso antes de que se muestre la información sobre herramientas una vez que el usuario coloque el mouse sobre el elemento. El valor predeterminado está establecido en 100.
hideDelay
Al igual que showDelay anterior, este número entero (también medido en milisegundos) determina cuánto tiempo esperar antes de ocultar la sugerencia una vez que el usuario abandona el elemento. El valor predeterminado está establecido en 100.
nombre de la clase
Esto le permite establecer un nombre de clase para el ajuste de la información sobre herramientas. El valor predeterminado está establecido en Nulo.
Compensar
Esto determina qué tan lejos del elemento aparecerá la información sobre herramientas. 'x' se refiere al desplazamiento a la derecha, donde 'y' es el desplazamiento hacia abajo (ambos relativos al cursor SI la opción 'fija' se establece en falso, de lo contrario, el desplazamiento es relativo al elemento original). El valor predeterminado es x: 16, y: 16
Fijo
Esto establece si la información sobre herramientas seguirá o no a su mouse si se mueve alrededor del elemento. Si lo establece en verdadero, la información sobre herramientas no se moverá cuando mueva el cursor, pero permanecerá fijo en relación con el elemento original. El valor predeterminado es falso.
Eventos de información sobre herramientas
Los eventos de información sobre herramientas siguen siendo simples, como el resto de esta clase. Hay dos eventos, onShow y onHide, y funcionan como es de esperar.
en el programa()
Este evento se ejecuta cuando aparece la información sobre herramientas. Si establece un retraso, este evento no se ejecutará hasta que finalice el retraso.
onHide ()
La información sobre herramientas se oculta con la ejecución de este evento. Si hay una demora, este evento no se ejecutará hasta que finalice la demora.
Métodos de información sobre herramientas
Hay dos métodos para la información sobre herramientas: adjuntar y separar. Esto le permite apuntar a un elemento específico y agregarlo a un objeto de información sobre herramientas (y, por lo tanto, inherente a todas las configuraciones en esa instancia de clase) o separar un elemento en particular.
adjuntar()
Para adjuntar un nuevo elemento a un objeto de información sobre herramientas, simplemente indique el objeto de sugerencia, la tachuela en .attach (); y finalmente coloque el selector de elementos entre corchetes ().
Syntax
toolTips.attach('#tooltipID3');dettach ()
Este método funciona igual que el método .attach, pero el resultado es completamente opuesto. Primero, indique el objeto tip, luego agregue .dettach (), y finalmente coloque su selector de elementos dentro de ().
Syntax
toolTips.dettach('#tooltipID3');Example
Tomemos un ejemplo que explica la información sobre herramientas. Eche un vistazo al siguiente código.
<!DOCTYPE html>
<html>
<head>
<style>
.custom_tip .tip {
background-color: #333;
padding: 5px;
}
.custom_tip .tip-title {
color: #fff;
background-color: #666;
font-size: 20px;
padding: 5px;
}
.custom_tip .tip-text {
color: #fff;
padding: 5px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips, {
showDelay: 1000, //default is 100
hideDelay: 100, //default is 100
className: 'custom_tip', //default is null
offsets: {
'x': 100, //default is 16
'y': 16 //default is 16
},
fixed: false, //default is false
onShow: function(toolTipElement){
toolTipElement.fade(.8);
$('show').highlight('#FFF504'); }, onHide: function(toolTipElement){ toolTipElement.fade(0); $('hide').highlight('#FFF504');
}
});
var toolTipsTwo = new Tips('.tooltip2', {
className: 'something_else', //default is null
});
$('tooltipID1').store('tip:text', 'You can replace the href with whatever text you want.'); $('tooltipID1').store('tip:title', 'Here is a new title.');
$('tooltipID1').set('rel', 'This will not change the tooltips text'); $('tooltipID1').set('title', 'This will not change the tooltips title');
toolTips.detach('#tooltipID2');
toolTips.detach('#tooltipID4');
toolTips.attach('#tooltipID4');
});
</script>
</head>
<body>
<div id = "show" class = "ind">onShow</div>
<div id = "hide" class = "ind">onHide</div>
<p><a id = "tooltipID1" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' of 1"
href = "http://www.tutorialspoint.com">Tool tip 1</a></p>
<p><a id = "tooltipID2" class = "tooltip_demo" title = "2nd Tooltip Title"
rel = "here is the default 'text' of 2"
href = "http://www.tutorialspoint.com">Tool tip is detached</a></p>
<p><a id = "tooltipID3" class = "tooltip_demo_2" title = "3rd Tooltip Title"
rel = "here is the default 'text' of 3"
href = "http://www.tutorialspoint.com">Tool tip 3</a></p>
<p><a id = "tooltipID4" class = "tooltip_demo_2" title = "4th Tooltip Title"
rel = "here is the default 'text' of 4, i was detached then attached"
href = "http://www.tutorialspoint.com">Tool tip detached then attached
again. </a></p>
<p><a id = "tooltipID5" class = "tooltip2" title = "Other Tooltip Title"
rel = "here is the default 'text' of 'other style'"
href = "http://www.tutorialspoint.com/">A differently styled tool tip</a></p>
</body>
</html>Recibirá el siguiente resultado:
Output
Contenido con pestañas significa el contenido que está presente en el área con pestañas y ese contenido está relacionado con los elementos de la lista. Siempre que apliquemos acciones comohover o click al elemento de la lista, la reacción inmediata creará un efecto en el contenido con pestañas.
Analicemos más sobre las pestañas.
Crear pestañas simples
La creación de pestañas de menú simples le ayuda a explorar información adicional cuando se desplaza sobre un elemento de la lista. Primero, cree una lista desordenada con elementos, luego cree divs, cada uno correspondiente al elemento de la lista. Echemos un vistazo al siguiente código HTML.
Guión
<!-- here is our menu -->
<ul id = "tabs">
<li id = "one">One</li>
<li id = "two">Two</li>
<li id = "three">Three</li>
<li id = "four">Four</li>
</ul>
<!-- and here are our content divs -->
<div id = "contentone" class = "hidden">content for one</div>
<div id = "contenttwo" class = "hidden">content for two</div>
<div id = "contentthree" class = "hidden">content for three</div>
<div id = "contentfour" class = "hidden">content for four</div>Proporcionemos un soporte básico para el código HTML anterior utilizando CSS que ayuda a ocultar los datos. Eche un vistazo al siguiente código.
.hidden {
display: none;
}Vamos a escribir ahora un código de MooTools que exhiba la funcionalidad de pestaña. Eche un vistazo al siguiente código.
Fragmento de ejemplo
//here are our functions to change the styles
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}
window.addEvent('domready', function() {
//here we turn our content elements into vars
var elOne = $('contentone'); var elTwo = $('contenttwo');
var elThree = $('contentthree'); var elFour = $('contentfour');
//add the events to the tabs
$('one').addEvents({ //set up the events types //and bind the function with the variable to pass 'mouseenter': showFunction.bind(elOne), 'mouseleave': hideFunction.bind(elOne) }); $('two').addEvents({
'mouseenter': showFunction.bind(elTwo),
'mouseleave': hideFunction.bind(elTwo)
});
$('three').addEvents({ 'mouseenter': showFunction.bind(elThree), 'mouseleave': hideFunction.bind(elThree) }); $('four').addEvents({
'mouseenter': showFunction.bind(elFour),
'mouseleave': hideFunction.bind(elFour)
});
});Al combinar los códigos anteriores, obtendrá la funcionalidad adecuada.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
display: none;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript">
//here are our functions to change the styles
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}
window.addEvent('domready', function() {
//here we turn our content elements into vars
var elOne = $('contentone'); var elTwo = $('contenttwo');
var elThree = $('contentthree'); var elFour = $('contentfour');
//add the events to the tabs
$('one').addEvents({ //set up the events types //and bind the function with the variable to pass 'mouseenter': showFunction.bind(elOne), 'mouseleave': hideFunction.bind(elOne) }); $('two').addEvents({
'mouseenter': showFunction.bind(elTwo),
'mouseleave': hideFunction.bind(elTwo)
});
$('three').addEvents({ 'mouseenter': showFunction.bind(elThree), 'mouseleave': hideFunction.bind(elThree) }); $('four').addEvents({
'mouseenter': showFunction.bind(elFour),
'mouseleave': hideFunction.bind(elFour)
});
});
</script>
</head>
<body>
<!-- here is our menu -->
<ul id = "tabs">
<li id = "one">One</li>
<li id = "two">Two</li>
<li id = "three">Three</li>
<li id = "four">Four</li>
</ul>
<!-- and here are our content divs -->
<div id = "contentone" class = "hidden">content for one</div>
<div id = "contenttwo" class = "hidden">content for two</div>
<div id = "contentthree" class = "hidden">content for three</div>
<div id = "contentfour" class = "hidden">content for four</div>
</body>
</html>Salida
Coloque el puntero del mouse en el elemento de la lista, luego obtendrá información adicional del elemento respectivo.
Pestañas de contenido de Marph
Al extender el código, podemos agregar algunas funciones de transformación cuando se muestra nuestro contenido oculto. Podemos lograr esto usando el efecto Fx.Morph en lugar de diseñar.
Eche un vistazo al siguiente código.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
.hiddenM {
display: none;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript">
var showFunction = function() {
//resets all the styles before it morphs the current one
$$('.hiddenM').setStyles({ 'display': 'none', 'opacity': 0, 'background-color': '#fff', 'font-size': '16px' }); //here we start the morph and set the styles to morph to this.start({ 'display': 'block', 'opacity': 1, 'background-color': '#d3715c', 'font-size': '31px' }); } window.addEvent('domready', function() { var elOneM = $('contentoneM');
var elTwoM = $('contenttwoM'); var elThreeM = $('contentthreeM');
var elFourM = $('contentfourM'); //creat morph object elOneM = new Fx.Morph(elOneM, { link: 'cancel' }); elTwoM = new Fx.Morph(elTwoM, { link: 'cancel' }); elThreeM = new Fx.Morph(elThreeM, { link: 'cancel' }); elFourM = new Fx.Morph(elFourM, { link: 'cancel' }); $('oneM').addEvent('click', showFunction.bind(elOneM));
$('twoM').addEvent('click', showFunction.bind(elTwoM)); $('threeM').addEvent('click', showFunction.bind(elThreeM));
$('fourM').addEvent('click', showFunction.bind(elFourM));
});
</script>
</head>
<body>
<!-- here is our menu -->
<ul id = "tabs">
<li id = "oneM">One</li>
<li id = "twoM">Two</li>
<li id = "threeM">Three</li>
<li id = "fourM">Four</li>
</ul>
<!-- and here are our content divs -->
<div id = "contentoneM" class = "hiddenM">content for one</div>
<div id = "contenttwoM" class = "hiddenM">content for two</div>
<div id = "contentthreeM" class = "hiddenM">content for three</div>
<div id = "contentfourM" class = "hiddenM">content for four</div>
</body>
</html>Salida
Haga clic en cualquier elemento de la lista, luego obtendrá información adicional en las pestañas.
MooTools contiene clases de diferentes API. Mire los conceptos básicos de la creación y el uso de clases con MooTools. Una clase es un contenedor para una colección de variables y funciones que operan sobre esas variables para realizar tareas específicas.
Analicemos en detalle las variables, métodos y opciones.
Variables
Crear una variable es una tarea muy sencilla. Es como declarar pares clave / valor en hash. Del mismo modo, puede acceder a las variables de la misma manera, lo que significa <class_name.variable>. Eche un vistazo a la siguiente sintaxis para crear y acceder a variables en clases.
Sintaxis
//Create a new class named class_one
//with two internal variables
var Class_one = new Class({
variable_one : "I'm First",
variable_two : "I'm Second"
});
var run_demo_one = function(){
//instantiate a Class_one class called demo_1
var demo_1 = new Class_one();
//Display the variables inside demo_one
alert( demo_1.variable_one );
alert( demo_1.variable_two );
}Métodos
En general, un método es una función que utiliza un conjunto de instrucciones que pertenecen a una clase específica. Puede llamar a estas funciones utilizando la instancia de la clase. Una cosa más cuando quiera llamar a la variable de instancia en la función que debe usarthispalabra clave. Eche un vistazo a la siguiente sintaxis para crear y acceder a métodos.
Sintaxis
var Class_two = new Class({
variable_one : "I'm First",
variable_two : "I'm Second",
function_one : function(){
alert('First Value : ' + this.variable_one);
},
function_two : function(){
alert('Second Value : ' + this.variable_two);
}
});
var run_demo_2 = function(){
//Instantiate a version of class_two
var demo_2 = new Class_two();
//Call function_one
demo_2.function_one();
//Call function_two
demo_2.function_two();
}inicializar
initialize es una opción en el objeto de clase. Esto le ayuda a crear una configuración de clase. Esto también le ayuda a configurar las opciones y variables de configuración del usuario. Eche un vistazo a la siguiente sintaxis de la opción de inicialización.
Sintaxis
var Myclass = new Class({
//Define an initalization function with one parameter
initialize : function(user_input){
//create a value variable belonging to
//this class and assign it the value
//of the user input
this.value = user_input;
}
})Implementación de opciones
La implementación de opciones es muy útil para aceptar entradas de usuarios y crear clases. Agregar la funcionalidad de opciones a su clase es tan simple como agregar otra clave / par a las opciones de inicialización de su clase. Una vez que esta configuración esté lista, puede anular cualquiera o todas las opciones predeterminadas pasando pares clave / valor. Proporciona el método setOptions. Este método le permite configurar las opciones una vez que se ha inicializado la clase. Si desea acceder a la variable desde dentro de la clase, use la siguiente sintaxis.
Sintaxis
var Class_four = new Class({
Implements: Options,
options: {
option_one : "Default Value For First Option",
option_two : "Default Value For Second Option",
},
initialize: function(options){
this.setOptions(options);
},
show_options : function(){
alert(this.options.option_one + "\n" + this.options.option_two);
},
});
var run_demo_4 = function(){
var demo_4 = new Class_four({
option_one : "New Value"
});
demo_4.show_options();
}
var run_demo_5 = function(){
var demo_5 = new Class_four();
demo_5.show_options();
demo_5.setOptions({option_two : "New Value"});
demo_5.show_options();
}
//Create a new class_four class with
//a new option called new_variable
var run_demo_6 = function(){
var demo_6 = new Class_four({new_option : "This is a new option"});
demo_6.show_options();
}Fx.Element le permite agregar la funcionalidad Fx a múltiples elementos dom en una sola página. En realidad, Fx.Element es una extensión del complemento Fx.Morph. La única diferencia entre Fx.Element y Fx.Morph es la sintaxis. En esta sintaxis, elstart({}) El método se usa para crear un efecto y el método .set ({}) se usa para establecer algunos estilos.
Eche un vistazo a la siguiente sintaxis de Fx.Element.
Sintaxis
var fxElementsArray = $$('.myElementClass');
var fxElementsObject = new Fx.Elements(fxElementsArray, {
//Fx Options
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
//Fx Events
onStart: function(){
startInd.highlight('#C3E608');
}
});iniciar ({}) y establecer ({})
Las estructuras de palabras clave de inicio y establecimiento se utilizan para iniciar y establecer estilos. Pero en esta estructura, se refiere al elemento a través del índice: el primer elemento es 0, el segundo es 1 y así sucesivamente. Eche un vistazo a la siguiente sintaxis para las estructuras Start y Set.
Sintaxis
//you can set your styles with .set({...})
fxElementsObject .set({
'0': {
'height': 10,
'width': 10,
'background-color': '#333'
},
'1': {
'width': 10,
'border': '1px dashed #333'
}
});
//or create a transition effect with .start({...})
fxElementsObject .start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});Ejemplo
Tomemos un ejemplo que explica el elemento Fx.Element. Eche un vistazo al siguiente código.
<!DOCTYPE html>
<html>
<head>
<style>
.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.myElementClass {
height: 50px;
width: 100px;
background-color: #FFFFCC;
border: 1px solid #FFFFCC;
padding: 20px;
}
#buttons {
margin: 20px 0;
display: block;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var startFXElement = function(){
this.start({
'0': {
'height': [50, 100],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});
}
var startFXElementB = function(){
this.start({
'0': {
'width': 300,
'background-color': '#333'
},
'1': {
'width': 300,
'border': '10px solid #DC1E6D'
}
});
}
var setFXElement = function(){
this.set({
'0': {
'height': 50,
'background-color': '#FFFFCC',
'width': 100
},
'1': {
'height': 50,
'width': 100,
'border': 'none'
}
});
}
window.addEvent('domready', function() {
var fxElementsArray = $$('.myElementClass'); var startInd = $('start_ind');
var cancelInd = $('cancel_ind'); var completeInd = $('complete_ind');
var chainCompleteInd = $('chain_complete_ind'); var fxElementsObject = new Fx.Elements(fxElementsArray, { //Fx Options link: 'chain', duration: 1000, transition: 'sine:in:out', //Fx Events onStart: function(){ startInd.highlight('#C3E608'); }, onCancel: function(){ cancelInd.highlight('#C3E608'); }, onComplete: function(){ completeInd.highlight('#C3E608'); }, onChainComplete: function(){ chainCompleteInd.highlight('#C3E608'); } }); $('fxstart').addEvent('click', startFXElement.bind(fxElementsObject));
$('fxstartB').addEvent('click', startFXElementB.bind(fxElementsObject)); $('fxset').addEvent('click', setFXElement.bind(fxElementsObject));
$('fxpause').addEvent('click', function(){ fxElementsObject.pause(); }); $('fxresume').addEvent('click', function(){
fxElementsObject.resume();
});
});
</script>
</head>
<body>
<div id = "start_ind" class = "ind">onStart</div>
<div id = "cancel_ind" class = "ind">onCancel</div>
<div id = "complete_ind" class = "ind">onComplete</div>
<div id = "chain_complete_ind" class = "ind">onChainComplete</div>
<span id = 'buttons'>
<button id = "fxstart">Start A</button>
<button id = "fxstartB">Start B</button>
<button id = "fxset">Reset</button>
<button id = "fxpause">Pause</button>
<button id = "fxresume">Resume</button>
</span>
<div class = "myElementClass">Element 0</div>
<div class = "myElementClass">Element 1</div>
</body>
</html>Recibirá el siguiente resultado:
Salida
Fx.Slides es una opción que le permite mostrar el contenido deslizándose hacia la vista. Es muy simple pero mejora el aspecto de su interfaz de usuario.
Analicemos sobre la creación e inicialización de un Fx.Slide, sus opciones y métodos.
Primero, inicializaremos la clase Fx.Slide con una instancia definida por el usuario. Para eso, tenemos que crear y seleccionar un elemento HTML. Después de eso, aplicaremos CSS a estos elementos. Finalmente, iniciaremos una nueva instancia de Fx.Slide con nuestra variable de elemento.
Opciones de Fx.Slide
Solo hay dos opciones de Fx.Slide: modo y contenedor.
Modo
El modo le ofrece dos opciones, 'vertical' u 'horizontal'. Revelaciones verticales de arriba a abajo y revelaciones horizontales de izquierda a derecha. No hay opciones para ir de abajo hacia arriba o de derecha a izquierda, aunque entiendo que hackear la clase en sí para lograr esto es relativamente simple. En mi opinión, es una opción que me gustaría ver como estándar, y si alguien ha pirateado la clase para permitir estas opciones, por favor envíenos una nota.
Envoltura
De forma predeterminada, Fx.Slide arroja un contenedor alrededor de su elemento de diapositiva, dándole 'desbordamiento': 'oculto'. Wrapper le permite establecer otro elemento como envoltorio. Como dije anteriormente, no tengo claro dónde sería útil esto y estaría interesado en escuchar cualquier pensamiento (gracias a horseweapon en mooforum.net por ayudarme a aclarar esto).
Métodos Fx.Slide
Fx.Slide también presenta muchos métodos para mostrar y ocultar su elemento.
en este lado()
Como su nombre lo indica, este método activará el evento de inicio y revelará su elemento.
deslice()
Desliza tu elemento de nuevo al estado oculto.
palanca()
Esto deslizará el elemento hacia adentro o hacia afuera, dependiendo de su estado actual. Método muy útil para agregar eventos de clic.
esconder()
Esto ocultará el elemento sin un efecto de diapositiva.
show()
Esto mostrará el elemento sin un efecto de diapositiva.
Atajos de Fx.Slide
La clase Fx.Slide también proporciona algunos atajos útiles para agregar efectos a un elemento.
set ('deslizar')
En lugar de iniciar una nueva clase, puede crear una nueva instancia si 'establece' la diapositiva en un elemento.
Syntax
slideElement.set('slide');opciones de configuración
Incluso puede configurar opciones con el acceso directo:
Syntax
slideElement.set('slide', {duration: 1250});diapositiva()
Una vez que la diapositiva es .set (), puede iniciarla con el método .slide ().
Syntax
slideElement.slide('in');.slide aceptará -
- ‘in’
- ‘out’
- ‘toggle’
- ’show’
- ‘hide’
… Cada uno correspondiente a los métodos anteriores.
Example
Tomemos un ejemplo que explique sobre Fx.Slide. Eche un vistazo al siguiente código.
<!DOCTYPE html>
<html>
<head>
<style>
.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #F9E79F;
}
#slide_wrap {
padding: 30px;
background-color: #D47000;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var slideElement = $('slideA'); var slideVar = new Fx.Slide(slideElement, { //Fx.Slide Options mode: 'horizontal', //default is 'vertical' //wrapper: this.element, //default is this.element //Fx Options link: 'cancel', transition: 'elastic:out', duration: 'long', //Fx Events onStart: function(){ $('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22"); }, onComplete: function(){ $('complete').highlight("#EBCC22");
}
}).hide().show().hide(); //note, .hide and .show do not fire events
$('openA').addEvent('click', function(){ slideVar.slideIn(); }); $('closeA').addEvent('click', function(){
slideVar.slideOut();
});
//EXAMPLE B
var slideElementB = $('slideB'); var slideVarB = new Fx.Slide(slideElementB, { //Fx.Slide Options mode: 'vertical', //default is 'vertical' link: 'chain', //Fx Events onStart: function(){ $('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22"); }, onComplete: function(){ $('complete').highlight("#EBCC22");
}
});
$('openB').addEvent('click', function(){ slideVarB.slideIn(); }); $('closeB').addEvent('click', function(){
slideVarB.slideOut();
});
});
</script>
</head>
<body>
<div id = "start" class = "ind">Start</div>
<div id = "cancel" class = "ind">Cancel</div>
<div id = "complete" class = "ind">Complete</div>
<button id = "openA">open A</button>
<button id = "closeA">close A</button>
<div id = "slideA" class = "slide">Here is some content - A. Notice the delay
before onComplete fires. This is due to the transition effect, the onComplete
will not fire until the slide element stops "elasticing." Also, notice that
if you click back and forth, it will "cancel" the previous call and give the
new one priority.</div>
<button id = "openB">open B</button>
<button id = "closeB">close B</button>
<div id = "slideB" class = "slide">Here is some content - B. Notice how
if you click me multiple times quickly I "chain" the events. This slide is
set up with the option "link: 'chain'"</div>
</body>
</html>Output
Haga clic en los botones: abrirA, cerrarA, abrirB y cerrarB. Observe los cambios, el efecto y la notificación de eventos en los indicadores.
MooTools proporciona diferentes atajos FX.Tween para diferentes transiciones, como efectos llamativos que se traducen en transiciones animadas suaves. Analicemos algunos métodos de los atajos de Tween.
interpolación ()
Este método proporciona transiciones suaves entre dos valores de propiedad de estilo. Tomemos un ejemplo que usa el método de interpolación para cambiar el ancho de un div de 100px a 300px. Eche un vistazo al siguiente código.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
#body_div {
width: 100px;
height: 200px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var tweenFunction = function(){
$('body_div').tween('width','300px'); } window.addEvent('domready', function() { $('tween_button').addEvent('click', tweenFunction);
});
</script>
</head>
<body>
<div id = "body_div"> </div><br/>
<input type = "button" id = "tween_button" value = "Set Width to 300 px"/>
</body>
</html>Recibirá el siguiente resultado:
Salida
desvanecerse()
Este método ajusta la opacidad o la transparencia del elemento. Tomemos un ejemplo en el que proporcionamos un botón para ajustar la opacidad de un div usando MooTools. Eche un vistazo al siguiente código.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
#body_div {
width: 100px;
height: 200px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/JavaScript">
var fadeFunction = function(){
$('body_div').fade('.5'); } window.addEvent('domready', function() { $('fade_button').addEvent('click', fadeFunction);
});
</script>
</head>
<body>
<div id = "body_div"> </div><br/>
<input type = "button" id = "fade_button" value = "fade to 50%"/>
</body>
</html>Recibirá el siguiente resultado:
Salida
Clickea en el fade to 50% button para reducir la opacidad div al 50%.
realce()
Este método resalta un elemento con diferentes colores de fondo. Contiene dos funcionalidades principales del Tween Flash.
En la primera funcionalidad, Tween Flash se utiliza para aplicar diferentes colores de fondo a los elementos.
Una vez que Tween Flash establece un color de fondo diferente, cambia a otro color de fondo.
Este método se utiliza para resaltar un elemento después de la selección. Tomemos un ejemplo para entender este método. Eche un vistazo al siguiente código.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
#div2 {
width: 100px;
height: 100px;
background-color: #145A32;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var highlightFunction = function(){
$('div1').highlight('#eaea16'); } var highlightChangeFunction = function(){ $('div2').highlight('#eaea16', '#FBFCFC');
}
window.addEvent('domready', function() {
$('div1').addEvent('mouseover', highlightFunction); $('div2').addEvent('mouseover', highlightChangeFunction);
});
</script>
</head>
<body>
<div id = "div1"> </div><br/>
<div id = "div2"> </div>
</body>
</html>Recibirá el siguiente resultado:
Salida
Trate de mantener el puntero del mouse en los divs de colores y observe los cambios en los reflejos de flash.
Fx.Morph es una función proporcionada por MooTools. Se utiliza para crear interpolaciones nuevas para transiciones entre propiedades de estilo. Mientras cambiamos, tenemos que seleccionar el elemento con un objeto y luego podemos aplicarle diferentes funciones. También necesitamos vincular el elemento con una interpolación recién creada.
Tomemos un ejemplo que proporciona tres botones en una página web. El primero es elSETbotón que crea un elemento con propiedades de estilo como altura, ancho y color. El segundo es elMORPHbotón que cambia las propiedades de estilo de un elemento. El tercero es elRESETbotón que cambia todos los ajustes a la posición inicial. Eche un vistazo al siguiente código.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var morphSet = function(){
this.set({
'width': 100,
'height': 100,
'background-color': '#884EA0'
});
}
var morphStart = function(){
this.start({
'width': 200,
'height': 200,
'background-color': '#d3715c'
});
}
var morphReset = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
var morphElement = $('morph_element'); var morphObject = new Fx.Morph(morphElement); $('set').addEvent('click', morphSet.bind(morphObject));
$('start').addEvent('click', morphStart.bind(morphObject)); $('reset').addEvent('click', morphReset.bind(morphObject));
});
</script>
</head>
<body>
<div id = "morph_element"> </div><br/>
<input type = "button" id = "set" value = "SET"/>
<input type = "button" id = "start" value = "START"/>
<input type = "button" id = "reset" value = "RESET"/>
</body>
</html>Recibirá el siguiente resultado:
Salida
MooTools proporciona diferentes Fx.Options que ayudarán a Fx.Tween y Fx.Morph. Estas opciones le permitirán controlar los efectos.
Analicemos algunas opciones que ofrece MooTools. Antes de continuar, eche un vistazo a la siguiente sintaxis para configurar opciones.
Sintaxis
var morphObject = new Fx.Morph(morphElement, {
//first state the name of the option
//place a :
//then define your option
});fps (fotogramas por segundo)
Esta opción determina el número de fotogramas por segundo en la animación mientras se transforma. Podemos aplicar estos fps a las funcionalidades Morph o Tween. Por defecto, el valor de fps es 50. Esto significa que cualquier funcionalidad tomará 50 fotogramas por segundo mientras se transforma.
Ejemplo
Tomemos un ejemplo en el que transformaremos un elemento div usando 5 fps. Eche un vistazo al siguiente código.
<!DOCTYPE html>
<html>
<head>
<style>
#morph_element {
width: 100px;
height: 100px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var morphStart = function(){
this.start({
'width': 200,
'height': 200,
'background-color': '#d3715c'
});
}
window.addEvent('domready', function() {
var morphElement = $('morph_element'); var morphObject = new Fx.Morph(morphElement, { fps: 5 }); $('start').addEvent('click', morphStart.bind(morphObject));
});
</script>
</head>
<body>
<div id = "morph_element"> </div><br/>
<input type = "button" id = "start"value = "START"/>
</body>
</html>Recibirá el siguiente resultado:
Salida
Clickea en el STARTpara encontrar la animación morphing. Esto nos ayuda a observar el número de fotogramas utilizados para la animación. Use diferentes valores para fps para obtener la diferencia en la animación. Se recomienda utilizar un valor de fps menor que 10. Esto le ayudará a obtener la diferencia fácilmente.
unidad
Esta opción se utiliza para configurar el tipo de unidad para los números. Generalmente, tenemos tres tipos diferentes de unidades: px,% y ems. Eche un vistazo a la siguiente sintaxis.
Sintaxis
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
});La sintaxis anterior sirve para asignar porcentaje a unidades. Esto significa que todos los valores en números se tratan como porcentajes.
enlace
Esta opción proporciona una forma de administrar varias llamadas para iniciar una animación. Si aplica varias llamadas de eventos a la vez, estas llamadas se aceptarán como llamadas de enlace. Una vez que finaliza la primera llamada, la segunda se ejecuta automáticamente. Contiene las siguientes tres opciones:
ignore- Ésta es la opción predeterminada. Ignora cualquier número de llamadas hasta que completa el efecto.
cancel- Esto cancela el efecto actual, cuando se está realizando otro. Sigue la precedencia de llamadas más reciente.
Chain- Esto le permite encadenar los efectos y mantener la pila de llamadas. Ejecuta todas las llamadas hasta que pasa por todas las llamadas encadenadas en la pila.
Eche un vistazo a la siguiente sintaxis para usar la opción de enlace.
Sintaxis
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});Duración
Esta opción se utiliza para definir la duración de la animación. Por ejemplo, si desea que un objeto se mueva 100px en la duración de 1 segundo, entonces irá más lento que un objeto que se mueva 1000px en 1 segundo. Puede ingresar un número que se mide en milisegundos. O puede usar cualquiera de estas tres opciones en lugar de números.
- Corto = 250ms
- Normal = 500ms (predeterminado)
- Largo = 1000ms
Eche un vistazo a la siguiente sintaxis para usar la duración.
Sintaxis
var morphObject = new Fx.Morph(morphElement, {
duration: 'long'
});O,
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});transición
Esta opción se utiliza para determinar el tipo de transición. Por ejemplo, si debe ser una transición suave o si debe comenzar lentamente, acelere hacia el final. Eche un vistazo a la siguiente sintaxis para aplicar la transición.
Sintaxis
var tweenObject = new Fx.Tween(tweenElement, {
transition: 'quad:in'
});La siguiente tabla describe los diferentes tipos de transiciones.
| S.No. | Tipo de transición y descripción |
|---|---|
| 1 | Lineal Muestra una transición lineal con eventos de entrada, salida, entrada y salida. |
| 2 | Patio Muestra una transición cuadrática con eventos de entrada, salida, entrada y salida |
| 3 | Cúbico Muestra una transición cubicular con eventos de entrada, salida, entrada y salida. |
| 4 | Cuarto de galón Muestra una transición cuartética con eventos de entrada, salida, entrada y salida. |
| 5 | Quinta Muestra una transición quíntica con eventos de entrada, salida, entrada y salida. |
| 6 | Pow Se utiliza para generar Quad, Cubic, Quart y Quint con eventos in, out, in-out |
| 7 | Expo Muestra una transición exponencial con eventos de entrada, salida, entrada y salida |
| 8 | Circ Muestra una transición circular con eventos de entrada, salida, entrada y salida. |
| 9 | Seno Muestra una transición sinusoidal con eventos de entrada, salida, entrada y salida |
| 10 | atrás Hace que la transición sea hacia atrás y luego hacia adelante con eventos de entrada, salida y salida. |
| 11 | Rebotar Hace que la transición sea rebosante con eventos de entrada, salida, entrada y salida. |
| 12 | Elástico Transición de curva elástica con eventos de entrada, salida, entrada y salida |
Fx.Events proporciona algunas opciones para generar algunos códigos en diferentes niveles a lo largo del efecto de animación. Le proporciona el control sobre sus preadolescentes y transformaciones. La opción que ofrece Fx.Events:
onStart - Aumentará el código para ejecutar cuando se inicie Fx.
onCancel - Aumentará el código para ejecutar cuando se cancele el Fx.
onComplete - Generará el código para ejecutar cuando se complete el Fx.
onChainComplete - generará el código para ejecutar cuando se complete el Fx encadenado.
Ejemplo
Tomemos un ejemplo en el que hay divs en la página web. Procedemos aplicando métodos Event a los divs. El primer método es el método onStart () para resaltar el div cuando el puntero del mouse entra en el área div.
El segundo es el método onComplete () que resalta el div cuando el puntero del mouse sale del área div. Y cuando el puntero del mouse entra en el área div automáticamente, el tamaño div aumenta en 400px. Intentaremos ejecutar todas estas funcionalidades utilizando los métodos Fx.Events. Eche un vistazo al siguiente código.
<!DOCTYPE html>
<html>
<head>
<style>
#quadin {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
#quadout {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
#quadinout {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var enterFunction = function() {
this.start('width', '400px');
}
var leaveFunction = function() {
this.start('width', '200px');
}
window.addEvent('domready', function() {
var quadIn = $('quadin'); var quadOut = $('quadout');
var quadInOut = $('quadinout'); quadIn = new Fx.Tween(quadIn, { link: 'cancel', transition: Fx.Transitions.Quad.easeIn, onStart: function(passes_tween_element){ passes_tween_element.highlight('#C54641'); }, onComplete: function(passes_tween_element){ passes_tween_element.highlight('#E67F0E'); } }); quadOut = new Fx.Tween(quadOut, { link: 'cancel', transition: 'quad:out' }); quadInOut = new Fx.Tween(quadInOut, { link: 'cancel', transition: 'quad:in:out' }); $('quadin').addEvents({
'mouseenter': enterFunction.bind(quadIn),
'mouseleave': leaveFunction.bind(quadIn)
});
$('quadout').addEvents({ 'mouseenter': enterFunction.bind(quadOut), 'mouseleave': leaveFunction.bind(quadOut) }); $('quadinout').addEvents({
'mouseenter': enterFunction.bind(quadInOut),
'mouseleave': leaveFunction.bind(quadInOut)
});
});
</script>
</head>
<body>
<div id = "quadin"> Quad : in</div><br/>
<div id = "quadout"> Quad : out</div><br/>
<div id = "quadinout"> Quad : in-out</div><br/>
</body>
</html>Recibirá el siguiente resultado: