Provides various official and user-released code examples. For code reference, you are welcome to exchange and learn. easy. js is a simple and easy-to-use JavaScript library, including the core library and Component Library. The core library includes the W3C-compliant CSS3 selector, common DOM operation methods, enhanced animation modules, ajax modules in promise mode, and elegant and convenient event processing modules. Easy. js also integrates a module loader that complies with AMD's modular specifications. The component library is developed based on the core library. So far, there are some of the most common components such as Drag (Dialog box), Switchable (carousel), Lazyload (delayed loading), and Dialog (Dialog box, more common components will be developed in the future.
A complete set of UI libraries will be released in the future to facilitate rapid development with program development without a line of CSS code!
Simplicity
The components of easy. js are as simple as possible on the UI (Interface) layer. developers can easily customize their desired styles by modifying CSS styles.
Using a component usually requires only a few lines of JS Code.
Consistency
The components should be as consistent as possible in interface design and naming rules. Generally, if you have used any component, other components are easy to use.
Modular
Each component is an independent AMD-compliant module that relies on the easy. js core library and can be loaded through E. use.
Namespace
The namespace of all components is E. ui. After the components are loaded, they can be accessed through E. ui. xxxx.
Instantiation
When using components, you must use the new keyword to instantiate them. The first letter of the component class is uppercase.
During instantiation, the first parameter is required. This parameter is usually set to instantiate a/Group of DOM elements. This parameter can be a selector string, DOM element, and easyJS Object.
During instantiation, the second parameter is optional. this parameter is a multi-choice configurable Object.
Event Processing
After the component is instantiated, The on method can be used to bind events to the component. Likewise, the un method can be used to uninstall events. The event types supported by each component can be seen in detailed instructions. Among the multiple-choice configuration parameters, there may be no callback except the init callback function.
Destroy An Instance
Component instances can be destroyed using the destroy method.
How to use:
Define a module and save the following code as a hello. js file:
Define (function (){
// This module returns a p element encapsulated by easyJS.
Return E ('
Hello easy. js!
');
});Use this module:
Var btn = E ('# demoHelloBtn ');
// Bind a one-time event to the button
Btn. one ('click', function (e ){
// Load the hello Module
E. use ('hello', function (helloDiv ){
Var win = E (window );
// Insert p in the module into the body
E ('body'). append (helloDiv );
// Set p to appear in the lower left corner of the page
HelloDiv.css ('top', win. scrollTop () + win. height ()-150 + 'px ')
// Displays the animation effect.
. Anim ({
To: {left: '0px '},
Easing: 'doublesqrt'
});
});
E. preventDefault ();
});Run
Open Source
Easy. js follows the MIT protocol, which is free for individuals and enterprises. easy. js on github.
Easyjs.components.zip (1.73 MB download: 115 times)
AD: truly free, domain name + VM + enterprise mailbox = 0 RMB
