|
【一,、項目背景】 現(xiàn)實生活中，我們經(jīng)常會遇到配色的問題,，這個時候去百度一下RGB表,。而RGB表只提供相對于的顏色的RGB值而沒有可以驗證的模塊。 我們可以通過 jquery mobile去設計顏色的拾取器,，得到我們想要的顏色值,。同時可以驗證RGB表的顏色值。 
【二,、項目準備】 框架：jquery mobile 軟件：Dreamweaver 1,、去官網(wǎng) jQuerymobile.com 下載jquery mobile。 
2,、在你的網(wǎng)頁中添加 jQuery Mobile 你可以通過以下幾種方式將jQuery Mobile添加到你的網(wǎng)頁中： 3. 導入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>
【三,、項目目標】 1、滑動滑塊將對應的顏色顯示在頁面,。 2,、實現(xiàn)輸入框，輸入對應的RBG值,，將結果顯示在頁面上,。 【四、項目實現(xiàn)】 1,、創(chuàng)建三層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>
頭部顯示文字，中部顏色顯示區(qū)域,，尾部顯示滑動條,。2、創(chuàng)建一個表單（用三個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>
? | 名稱 | 描述 | | min="0" | 最小值為0 | | max="255" | 最大值為255 | | value="0" | 默認值為0 | | type="range" | 類型：滑動條類型 |
3,、添加CSS樣式 <style type="text/css">.color { height: 100%; min-height: 400px;}</style>
4,、添加 JS1） 定義(set_color()方法)獲取相對于顏色的id屬性。 <script>function set_color(){ var red = $("#red").val(); //獲取紅色數(shù)值 var green = $("#green").val(); //獲取綠色數(shù)值 var blue =$("#blue").val(); //獲取藍色數(shù)值}</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進入開發(fā)者模式，點擊藍色框框切換手機模式運行,。 
3,、滑動任意一條滑動條。得到想要的顏色,。 
4,、手動輸入RGB（0-255）值，得到相對應的顏色,，如下圖所示,。
【六、總結】
1,、使更多的人去了解jQuery Mobile,， jQuery可以快速找到文檔中的html元素，并對其進行操作,，如隱藏,、顯示、改變樣式...”,。 2,、本項目主要學習了input標簽（類型：滑動條）如何與js綁定，獲取事件響應,。 3、顏色拾取器項目中,，隨機產生顏色這個難點進行了有效的分析,，并提供解決方案。 4,、按照操作步驟,，自己嘗試去做。自己實現(xiàn)的時候，總會有各種各樣的問題,，切勿眼高手低,，勤動手，才可以理解的更加深刻,。
|
