前篇 為程式碼上色的不同主題顏色，
會因為底色固定，而使得一些顏色主題不明顯，
而加上可以即時改變程式碼背景色的功能。
顏色選擇器採用 Really Simple Color Picker in jQuery 這工具，
並利用 knockout.js 可以偵測改變 css/style 屬性的功能，
改變程式碼區塊的底色。

先單獨頁面測試 knockout.js 加這顏色選擇器的功能，
把顏色選擇器畫出來，需用input元件，
其值由 knockout.js 來綁定：

<input id="picker" data-bind="value:myRGB" />

再用JS語法給做出來，

$('#picker').colorPicker();

只要一個可以被偵測myRGB的屬性，
透過選擇器改變，就同時改變指定的div的顏色屬性，
所以這個實作網頁呈現是這個樣子：

完整程式碼：

<div id="color" data-bind="style:{ backgroundColor: myRGB }">
<h1>鐵人五twtw</h1>
</div>
RGB：<span data-bind="text:myRGB" /></span><br />
<input id="picker" data-bind="value:myRGB" />

<script src="/js/knockout.js" type="text/javascript"></script>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/jquery.colorPicker.js" type="text/javascript"></script>
<script type="text/javascript">
  $('#picker').colorPicker();
  var viewModel = function() {
    var self = this;
    self.myRGB = ko.observable('#99CC00');
  };
  ko.applyBindings(new viewModel());
</script>

這實作的網址在：http://i5.tagbible.net/colorpicker

把這成功的測試改應用到為程式碼上色的網頁，
幾乎與上面要加的程式碼相同，
就不再重覆說明。
只有幾個顏色主題因有指定背景顏色，
會造成自行改選背景顏色沒作用。

系列文章列表