【一、專案背景】

現實生活中，我們經常會遇到配色的問題，這個時候去百度一下RGB表。而RGB表只提供相對於的顏色的RGB值而沒有可以驗證的模組。

我們可以透過 jquery mobile去設計顏色的拾取器，得到我們想要的顏色值。同時可以驗證RGB表的顏色值。

【二、專案準備】

框架：jquery mobile

軟體：Dreamweaver

1、去官網 jQuerymobile.com 下載jquery mobile。

2、在你的網頁中新增 jQuery Mobile

你可以透過以下幾種方式將jQuery Mobile新增到你的網頁中：

從 CDN 中載入 jQuery Mobile (推薦)。
從jQuerymobile.com 下載 jQuery Mobile庫。

3、匯入jQuery Mobile


<link href="jquery.mobile/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css">

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.mobile/jquery-1.12.2.min.js"></script>

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.mobile/jquery.mobile-1.4.5.js"></script>

【三、專案目標】

1、滑動滑塊將對應的顏色顯示在頁面。

2、實現輸入框，輸入對應的RBG值，將結果顯示在頁面上。

【四、專案實現】

1、建立三層div塊。（頭部，中部，尾部）。


<body>

<div data-role="page" ">

<div data-role="header">

<h1>拾色器</h1>

</div>

<div data-role="content" class="color"> </div>

<div data-role="footer" data-position="fixed">

</div>

</div>

</body>

頭部顯示文字，中部顏色顯示區域，尾部顯示滑動條。

2、建立一個表單（用三個input來分別存放RGB這三種顏色）。


<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、新增CSS樣式


<style type="text/css">

.color {

height: 100%;

min-height: 400px;

}

</style>

4、新增 JS

1）定義(set_color()方法)獲取相對於顏色的id屬性。


<script>

function set_color(){

var red = $("#red").val(); //獲取紅色數值

var green = $("#green").val(); //獲取綠色數值

var blue =$("#blue").val(); //獲取藍色數值

}

</script>

2）生成rgb表示的顏色字串。


var color = "RGB("+red+","+green+","+blue+")"; //生成rgb表示的顏色字串

3）設計內容框背景色。


$(".color").css("background-color",color); //設計內容框背景色

5、呼叫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();" />

【五、效果展示】

1、點選執行。

2、點選f12進入開發者模式，點選藍色框框切換手機模式執行。

3、滑動任意一條滑動條。得到想要的顏色。

4、手動輸入RGB（0-255）值，得到相對應的顏色，如下圖所示。

【六、總結】

1、使更多的人去了解jQuery Mobile， jQuery可以快速找到文件中的html元素，並對其進行操作，如隱藏、顯示、改變樣式…”。

2、本專案主要學習了input標籤（型別：滑動條）如何與js繫結，獲取事件響應。

3、顏色拾取器專案中，隨機產生顏色這個難點進行了有效的分析，並提供解決方案。

4、按照操作步驟，自己嘗試去做。自己實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

一篇文章帶你用jquery mobile設計顏色拾取器

相關文章