MooTools contains classes of different APIs. Look at the basics of
creating and using classes with MooTools. A class is a container for a
collection of variables and functions which operate on those variables
to perform specific tasks.
Let us discuss the variables, methods, and options in detail.
Let us discuss the variables, methods, and options in detail.
Variables
Creating a variable is a very simple task. It is like declaring a key/value pairs in hashes. Similarly, you can access the variables in the same manner which means <class_name.variable>. Take a look at the following syntax for creating and accessing variables in classes.Syntax
//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 ); }
Methods
In general, a Method is a function that uses a set of instructions which belongs to a specific class. You can call these functions by using the instance of the class. One more thing whenever you want to call the instance variable into the function you must use this keyword. Take a look at the following syntax for creating and accessing methods.Syntax
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(); }
initialize
initialize is an option in the class object. This helps you create a class setup This also helps you set up user-configuration options and variables. Take a look at the following syntax of initialize option.Syntax
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; } })
Implementing Options
Implementing options are very helpful for accepting user inputs and building classes. Adding the options functionality to your class is as simple as adding another key/pair to the initialization options for your class. Once this setup is ready, you can override any or all of the default options by passing key/value pairs. It provides the setOptions method. This method allows you to set the options once the class has been initialized. If you want to access the variable from inside the class, use the following syntax.Syntax
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(); }
No comments:
Post a Comment