![]() From expert use to simple color picking), its 4 different UI sizes (advanced, smaller, simple and tiny.See also a simple jQuery implementation preview here Short descriptionĬolorPicker is very convenient and intuitive to use due to This demo uses jsColor.js (3.8KB), a javaScript only implementation of colors.js and colorPicker.jsĬalling the colorPicker on all inputs with the className 'color': jsColorPicker('lor') (Better description will follow.)Ĭhange drop down to connect test patches to Colors instance or to ColorPicker: Some hints: resize colorPicker to see 4 different possible sizes use keybord, arrow/page keys our mouse in input fields to manipulate values try all buttons on right side of colorPicker to explore functionalities. Use the drop down menu to connect the patches with its own Colors instance or to sync with the instance of ColorPicker. The initial setup: ColorPicker UI (user interface) to the left as a standalone instance and test patches to the right (also interactive) connected to a separate instance of Colors. This demo section shows how ColorPicker's and Colors' APIs work and how they communicate to the outer world. The colorPicker object is passed to this event's callback function.ColorPicker v1.0 is a small (45.4KB, 19.5KB gZip) but very advanced framework independent javaScript color picker and color conversion / calculation tool that supports the following color spaces: rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab but also alpha, WCAG 2.0 readability standards (based on opacity levels of all layers), contrast, color similarity, grayscale, 2-layer or 3-layer overlap mix, etc. # mountįired when the colorPicker's UI has been mounted to the DOM and is ready for user interaction. This event's callbacks will receive the active color object. This event's callbacks will receive the removed color object # color:setActiveįired whenever the 'active' color is switched. # color:removeįired when a color is removed from the color picker. This event's callbacks will receive the new creat color object. # color:initįired whenever a new color is created. This event's callbacks will receive the current color object. # input:endįired whenever the user stops interacting with the color picker controls. # input:moveįired when the user moves their pointer/mouse after beginning interaction. # input:startįired whenever the users starts interacting with the color picker controls. It is also safe to modify the color object within callbacks for this event. ![]() Callbacks for this event recieve exactly the same parameters as color:change. Similar to color:change, except this is only fired whenever the color is changed with direct user input. It is safe to modify the color object within callbacks for this event. This event's callbacks will receive the color object that changed, as well as an object which reflects which h,s,v channels changed. # color:changeįired whenever the color changes - either when the user interacts with the controls, or when it is set via code. These callbacks can also be removed with the off method. The color picker's on method can be used to register callbacks for color picker events, such as when the selected color changes or when the user begins interacting with the picker. Deferred events are stored until an event listener for them is added with on. Used internally to dispatch an deferred event. All function arguments after the event type will be passed to the event callback. # forceUpdateįorce the color picker to rerender. Reset the color picker back to the original color value passed to the color picker config. ![]() Replaces all the colors currently on the color picker with a new set of colors. Set the currently 'active' color (the color that is selected and highlighted). color index (optional) - Defaults to the end of the color array.The color picker API is the main feature of iro.js, and is accessible on iro.ColorPicker.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |