Shulou(Shulou.com)06/02 Report--

This article shows you what the jQuery color picker is like, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Color picker (also known as swatch) is to facilitate users to intuitively choose the desired color in some WEB applications that need to use colors, such as the editor used in forum posts. The editor will introduce a very easy to use jQuery-based color picker, which can be easily applied to your project.

The name of this color picker is bigcolorpicker. Using this color picker, you can get the color value directly by clicking on the target element on the page, which is convenient and fast.

HTML

The first step on the page is to introduce the jquery library and bigcolorpicker plug-in into the head, as well as the required style jquery.bigcolorpicker.css.

Next, we place an input input box directly in the body that triggers the reception of color values.

Or you can place a html element or button directly.

We can also get multiple colors and customize the number of small color grids. Please refer to demo for details.

JQuery

Calling the bigcolorpicker plug-in is very simple, using $(element) .bigColorpicker (callback,engine,sideLength) directly; where callback is a callback function, it can set the selected color to the element that binds the bigColorpicker, or you can customize the function. Engine can be empty, P, L, using the default P P means that the background of the picker is a picture, while L represents that the small cell of the picker is made up of li. The sideLength parameter refers to the number of small cells, which takes effect only when engine is L. The range is 2-10. The default is 6.

(function () {/ / Click the input box to select the color $("# C1"). BigColorpicker ("C1"); / / Click the color button to select the color $("# btn"). BigColorpicker ("c2"); / / Click the box to select the color $("# img") .bigColorpicker (function (el,color) {$(el) .css ("background-color", color);}) / / Select multiple colors $(".ku") .bigColorpicker (function (el,color) {$(el) .css ("background-color", color);}); / / number of custom color blocks $("# c5"). BigColorpicker ("c5", "L", 3);})

When you want to operate a color picker on a pop-up layer that can be moved, you can do this in the following ways.

1. Automatically hide the swatch at the beginning of dragging (the following code needs to be written at the beginning of dragging)

(element) .bigColorpickerHide ()

2. When dragging, the position of the swatch moves with the floating layer (the following code needs to be written during dragging)

(element) .bigColorpickerMove ()

For more information about the bigcolorpicker color picker, you can also refer to the bigcolorpicker project address: http://code.google.com/p/jquery-bigui/wiki/bigcolorpicker

The above is what jQuery's color picker looks like. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.