JavaScript resource pre-loaded components and slide screen components are recommended for use. javascript Components

JavaScript resource pre-loaded components and slide screen components are recommended for use. javascript Components

Resource preload component -- preload

• Queue, which supports queue loading and callback, or video or audio loading.
• Progress bar to dynamically obtain progress bar Information
• Supports img label pre-loading. You only need to add the pSrc attribute.
• Native ES5
• Demo

Install:

git clone https://github.com/jayZOU/preload.gitnpm installnpm run es6

Access http: // localhost: 8080/es6-demo

Examples <audio pSrc = ".. /public/audio/a.mp3 "preload =" auto "controls> </audio> <audio pSrc = ".. /public/audio/B .mp3 "preload =" auto "controls> </audio>    /*** Preload resource Preload component * @ author jayzou * @ time 2016-1-12 * @ version 1.0.6 * @ class Preload * @ param {object} sources is required to load the queue container. It supports loading the queue and passing in a callback after loading a queue * @ param {boolean} isDebug: Select whether to enable the debug option, used for mobile terminal debugging. The default value is false * @ param {object} conne: seconds * @ param {object} loadingOverTimeCB optional pre-loading timeout callback * @ param {object} wrap optional progress bar container, return the recorded progress information * @ param {object} completeLoad optional completion of all the add-on execution callback, including the same and asynchronous data acquisition */var preload = new Preload ({is Debug: true, sources: {imgs: {source :[".. /public/image/b2.jpg ",".. /public/image/b1.jpg "], callback: function () {console. log ("queue 1 completed") ;}}, audio: {source :[".. /public/audio/a.mp3 ",".. /public/audio/B .mp3 "]}, imgs2: {source :[".. /public/image/b3.jpg ",".. /public/image/b4.jpg "," http://7xl041.com1.z0.glb.clouddn.com/OrthographicCamera.png "," http://7xl041.com1.z0.glb.clouddn.com/audio.g If ",], callback: function () {console. log ("queue 3 completed") ;}}, loadingOverTime: 3, loadingOverTimeCB: function (res) {console. log ("resource loading Timeout:", res) ;}, connector: {int1: {url: 'http: // localhost/test/index. php? Callback = read & city = Shanghai', jsonp: true}, int2: {url: 'http: // localhost/test/index. php? Callback = read & city = Shenzhen city ', jsonp: false, callback: function (data) {console. log ("synchronization:", data) ;}}, progress: function (completedCount, total) {// console. log (total); console. log (Math. floor (completedCount/total) * 100);}, completeLoad: function () {console. log ("all add-ons completed") ;}}); function read () {console. log ("Asynchronous:", arguments [0])}

Notes
The queue name cannot be duplicated. Otherwise, the subsequent queue will overwrite the previous
ES6 mode writing, synchronous loading between queues, asynchronous loading of resources in the queue

Slide

• Custom Sliding Screen components, customizable Sliding Screen Animation
• Control the animation effect on each screen

Install:

git clone https://github.com/jayZOU/slide.gitnpm installgulp

Access http: // localhost: 8080/

Examples select all copy and put into notes/*** slide Slide slide screen component * @ author jayzou * @ time 2015-10-25 * @ version 0.0.1 * @ class Slide * @ param String wrap is required to input the slide container ID * @ param String currentClass: It is optional to switch the animation class when sliding, default current * @ param boolean startLocalstorage optional record current browsing page * @ param {Object} onChange optional callback after switching completion * @ param {Object} onDownChange optional callback when downgrading is complete * @ param {Object} callback when onUpChange is optional * @ param {Object} defaultClass optional sliding animation effect **/var slide = new Slide ({wrap: 'wrapp', // required. input the slide container ID currentClass: 'current', // optional. When sliding, switch the animation class startLocalstorage: false, // optional, whether to enable the localstorage record page and return to the last accessed page. The default value is false onChange: function () {// optional. The callback console is used when the switchover is complete. log ("onchange") ;}, onDownChange: function () {// optional, callback console when the decline is complete. log ("onDownChange") ;}, onUpChange: function () {// optional, callback console when the slide is complete. log ("onUpChange") ;}, defaultClass: {// optional, 'webkittransition ':'-webkit-transform 0.5 s upload ', // you need to add the prefix 'transform': 'translate (0px, 0px) '// you do not need to add the prefix},}); // slide. next (); // next page // slide. prev (); // Previous Page // slide. playTo (3); // jump directly to page n // console. log (slide. getPage (); // obtain the current page number // slide. lockPage (); // lock the screen. Do not slide. // slide. unLockPage (); // unlock the screen and allow slide // helper class // slide. toggleClass (targ, className); // replace class // slide. addClass (targ, className); // Add class // slide. removeClass (targ, className); // Delete class // slide.css (o, style); // Add a style

Notes
The slide container can only pass in the ID value, but cannot pass in the class

Articles you may be interested in:

• Three implementation methods for writing components in Node. js
• JS component series Bootstrap Icon Selection Component
• No js Code to initialize Components
• Encapsulate your own JS Components
• Competition between bootstrap multiselect and JS Components
• JS component Form verification artifact BootstrapValidator
• Learning and using JS drag-and-drop Components
• Complete JavaScript component development example
• Guide to programming using AmplifyJS components with JavaScript
• Javascript table Rendering component