An article takes you to design a color picker using jquery mobile

[1. Project Background]

In real life, we often encounter color matching problems, at this time go to Baidu RGB table. The RGB table, on the other hand, only provides RGB values relative to the color, and no modules can be validated.

We can use jquery mobile to design the color picker and get the color values we want. You can also validate the color values of RGB tables.

[2. Project preparation]

Framework: jquery mobile

Software: Dreamweaver

1. Go to the official website jQuerymobile.com Download jquery mobile.

2. Add jQuery Mobile to your web page

There are several ways you can add jQuery Mobile to your web page:

  • Load jQuery Mobile from CDN (recommended).

  • From jQuerymobile.com Download the jQuery Mobile library.

3. Import jQuery Mobile

<link href="jquery.mobile/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.mobile/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.4.5.js"></script>

[3. Project objectives]

1. The slider will display the corresponding color on the page.

2. Implement the input box, enter the corresponding RBG value, and display the results on the page.

[4. Project Realization]

1. Create three div blocks. (Head, middle, tail).

<body>
<div data-role="page" ">
    <div data-role="header">
        <h1>color picker</h1>
    </div>
    <div data-role="content" class="color"> </div>
    <div data-role="footer" data-position="fixed">
       
    </div>
</div>
</body>

Header shows text, middle color shows area, tail shows slider bar.

2. Create a form (using three input s to store RGB colors separately).

<form>
     <input name="red" id="red" min="0" max="255" value="0" type="range" " />
     <input name="green" id="green" min="0" max="255" value="0" type="range"" />
     <input name="blue" id="blue" min="0" max="255" value="0" type="range"  />
</form>

3. Add CSS Styles

<style type="text/css">
.color {
    height: 100%;
    min-height: 400px;
}
</style>

4. Add JS

1) Define the (set_color() method) to get the id attribute relative to the color.

<script>
function set_color(){
    var red = $("#Red').val(); //Get the red value
    var green = $("#Green'). val (); //Get the green value
    var blue =$("#Blue'). val (); //Get the blue value
}
</script>

2) Generate the color string represented by rgb.

var color = "RGB("+red+","+green+","+blue+")";  //Generate color string represented by rgb

3) Design the background color of the content box.

$(".color").css("background-color",color);       //Design Content Box Background Color

5. Call set_color().

<input name="red" id="red" min="0" max="255" value="0" type="range" onchange="set_color();" />
<input name="green" id="green" min="0" max="255" value="0" type="range" onchange="set_color();" />
<input name="blue" id="blue" min="0" max="255" value="0" type="range" onchange="set_color();" />

[5. Effect display]

1. Click to run.

2. Click f12 to enter developer mode, click the blue box to switch the mobile mode.

3. Slide any slider bar. Get the color you want.

4. Manually enter the RGB (0-255) value to get the corresponding color, as shown in the following figure.

[6. Summary]

1. To make jQuery Mobile known to more people, jQuery can quickly find and manipulate html elements in documents, such as hiding, displaying, changing styles, etc.

2. This project mainly learns how the input tag (type: slider bar) binds to js to get event response.

3. In the color picker project, the difficulty of random color generation is analyzed effectively and solutions are provided.

4. Follow the steps and try to do it yourself. When you achieve it yourself, there will always be a variety of problems. Don't look high and work hard to understand them more deeply.

5. Small partners who need the source code of this text can get it by replying to the four words "color pickup" in the background.

What do you gain from reading this article? Forward to more people

IT Shared Home

Please reply in the background of WeChat to join the group

To learn more about Python web crawlers and data mining, visit a professional website: http://pdcfighting.com/

Tags: Front-end Web Development html css

Posted by LiLaaron on Sun, 22 May 2022 23:06:18 +0300