輕鬆使用jQuery UI打造檢色器

顏怡宏 Bob Yen

  • 精誠資訊/恆逸教育訓練中心-資深講師
  • 技術分類：多媒體

 

 

相信很多寫程式的朋友，當使用輕量級的文字編輯器編寫程式時，會有需要選取出顏色的需求，但是工具中並沒有提供可以挑選顏色的檢色器功能，此時就能夠使用這個小程式來自行製造檢色器。

我們可以藉由jQuery UI的滑棒元件，以短短幾行程式，依照下面的步驟，就能夠輕易做出檢色器。

  1. 首先只要在<body>區塊中，首先建立五個元件，第一個h1物件能夠讓數值以文字的方式輸出。然後放置三個jQuery UI的滑棒，分別代表紅Red、綠Green、藍Blue三個顏色，最後再放一個Div成為顏色視覺呈現的區域。設定如下：
    2.         <body>
            <h1>Slider Swatch</h1>
            <div id="red"></div>
            <div id="green"></div>
            <div id="blue"></div>
            <div id="swatch"></div>
        </body>
  2. 接著在<style>區塊中設定這些元件的CSS外觀屬性
    3. 	<style>
            /*設置三個滑棒的外觀屬性*/
            #red, #green, #blue {
                float: left;
                clear: left;
                width: 300px;
                margin: 15px;
            }
    
    
            /*設置顏色呈現區塊的外觀屬性*/
            #swatch {
                width: 120px;
                height: 100px;
                margin-top: 18px;
                margin-left: 350px;
                background: black;
            }
            /*分別設定三個滑棒的jQueryUI外觀屬性*/
            #red.ui-slider { background: red; }
            #red .ui-slider-handle { border-color: red; }
            #green.ui-slider { background: green; }
            #green .ui-slider-handle { border-color: green; }
            #blue.ui-slider { background: blue; }
            #blue .ui-slider-handle { border-color: blue; }
        </style>

  3. 然後先引入jQuery.js這個javascript檔案來使用，可以由jQuery官方網站下載。
    4.         <script type="text/javascript" src="jquery.js"></script>

  4. 接著於下方引入jQueryUI.js與jQueryUI.css這兩個檔案來使用，可以由jQueryUI官方網站下載。
    5.         <script type="text/javascript" src="jquery-ui.js"></script>
        <link href="jquery-ui.css" rel="stylesheet" type="text/css"/>

  5. 最後於<script>標籤中再加入以下javascript程式碼就可以完成了。
    6.  
        <script type="text/javascript">
            $(document).ready(init);//於檔案讀取完畢之後開始執行
            function init() {
                $("#red, #green, #blue").slider({ //分別套用jQueryUI的滑棒元件
                    min: 0, //設定滑棒最小數值
                    max: 255, //設定滑棒最大數值
                    value: 0, //設定滑棒初始數值
                    slide: slideHandler, //設定滑棒滑動時的事件
                    change: slideHandler //設定滑棒停止滑動時的事件
                });
            }
            function slideHandler(event, ui) {
                var red = $("#red").slider("value");//讀取並儲存紅色數值
                var green = $("#green").slider("value"); //讀取並儲存綠色數值
                var blue = $("#blue").slider("value"); //讀取並儲存藍色數值
                $("h1").text("rgb(" + red + "," + green + "," + blue + ")");//將數值寫入畫面中
                $("#swatch").css({ backgroundColor: "rgb(" + red + "," + green + "," + blue + ")" });
                //將色彩數值寫入畫面顯示
            }
        </script>

  6. 如此就能夠成功做出檢色器，並且能夠拷貝上方數值，在程式中使用。

相關學習資源