It will try to parse a color based on the value of the input. Spectrum will use the color passed in to initialize. Here are the currently supported browers: I wanted this to work in the latest and greatest browsers, but also target backwords compatibility and mobile support. You don't need to add a single line of code. It is usually connected to a text-box so that user selection of color from the color palette can be transferred to the textbox. 50 New Resources and Tools for Developers and Designers Color Picker. jQuery Color 2.1.2 - uncompressed, minified jQuery Color SVG Color Names 2.1.2 - uncompressed, minified jQuery Color With Names (last two together) 2.1.2 -. A ColorPicker is a jQuery UI framework tool or widget which provides a color-palette dropdown box to the user to select the color for some colorful work. So that they will still be able to manually enter a color. cdnjs is a free and open-source CDN service. The field will degrade to a text input if the user does not have JavaScript enabled, Why? Because the spec says so, that's why. Unlike the other modes, your value must be a 6 character hex value starting with a '#'. Once a user's browser supports a native color control, it will opt to use their native control instead. The easiest way is to create an input with the type of color. If you just want to provide a polyfill for the native color input, You can use any element you would like to trigger the colorpicker: Click me to open a colorpicker, though it is strongly recommended to stick with tags. $("input").spectrum("option", "showInput") // false $("input").spectrum("option", "showInput", false) $("input").spectrum("option", "showInput") // trueĬalling option with an option name and an option value will set the option to the new value. Palette: ]Ĭalling option with an option name will return the current value of that option. This will also change the format that is displayed in the titles from the palette swatches. You can set the format that is displayed in the text box. You can also change the text on the Toggle Button with the options togglePaletteMoreText (default is "more") and togglePaletteLessText (default is "less"). Set it to TRUE to enable the Toggle button. The default value for togglePaletteOnly is FALSE. This way, the user can choose from a limited number of colors in the palette, but still be able to pick a color that's not in the palette. Spectrum can show a button to toggle the colorpicker next to the palette. Type: sting, // text, component, color, flat Npm npm install spectrum-colorpicker2 Download files Download Zip You must use a viewport tag in your html for content to be displayed at the correct size in a mobile browser.$('#color-picker').spectrum() Usage CDN It works like this: Notes on Mobile Support I highly recommend using the X-UA-COMPATIBLE tag in your html ` ` to ensure that Internet Explorer 8 and higher use their own "Browser Mode" instead of switching to the Browser Mode of a previous version. The only major platform I haven't been able to test yet is Android. Minor issues in these browsers are documented here. Firefox 18.0.1 - 26.0 (Mac OSX and Windows 7).107 (Mac OSX, Windows 7, Windows XP, iOS 6.0.2) I've tested Pick-a-Color in these browsers: Here's an example of how a simple HTML page using Pick-a-Color might look: Ta-da! You have a color picker! You might even have several! Sample HTML Return to Step 1 of instructions for use of the compiled CSS.Compile pick-a-color.less using your customized variables.Update the import statements in lines 7 and 8 of pick-a-color.less "PATH/TO/YOUR/mixins.less" Add src/less/pick-a-color.less to your LESS folder.Ta-da! You have a color picker! You might even have several! Source LESS for Use With Customized Bootstrap Builds To optimize IE and mobile support, I recommend adding these tags to your : Make sure the class selector matches the class of the div(s) where you want a Pick-a-Color: You can change the class of your input, but make sure to match it in your JavaScript in the next step and be aware that the class "pick-color" will be added regardless.Īdd this to your JavaScript somewhere after the DOM is ready.If you don't provide a name attribute, one will be added in the pattern "pick-a-color-INT.".For instance, yours might look like this: "border-color" or "background-color") and YOUR-DEFAULT with the default color you'd like to show in the color picker. Replace YOUR-NAME with your unique identifier for the color picker (e.g. For Bootstrap 2, use Pick-a-Color 1.1.8:Īdd this to your HTML wherever you want a Pick-A-Color: Add the CSS and JS from the latest release in /build to your CSS an JS folders and include them in your document as follows: For Bootstrap 3, use Pick-a-Color 1.2.3: How To Use Bower Installation bower install pick-a-color Compiled CSS For Use With Default Bootstrap Settings
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |