Windows Store App Winjs 有颜色选择器控件吗？答案

【问题标题】：Does Windows Store App Winjs have color picker control?Windows Store App Winjs 有颜色选择器控件吗？
【发布时间】：2013-12-30 21:29:27
【问题描述】：

我需要使用 html 和 javascript 将颜色选择器添加到我的 windows 8 商店应用程序中，你知道怎么做吗？谢谢

【问题讨论】：

标签： html windows-store-apps winjs

【解决方案1】：

不，标准颜色选择器不可用，您可以在此处看到：

http://msdn.microsoft.com/en-us/library/windows/apps/hh465453.aspx

您可以在应用程序中包含购买的或开源的选项。最大的问题是组件可能没有您需要在应用程序中匹配的正确外观。

【讨论】：

我要补充一点，您将在网络上找到大约 9,843,570,982,345 个 JavaScript 颜色选择器控件，因此我建议您这样做。

【解决方案2】：

我个人发现网络上大多数 JS 颜色选择器的风格与我的 windows 8 应用程序设计并不完全吻合。我创建了一个适合我需要的功能，也许它也会对您有所帮助： http://jsfiddle.net/6GHzP/3/ （该示例仅适用于 IE10+，因为在 css 中使用了 -ms-grid 属性，Windows 8 应用程序也支持这些属性）按以下方式使用函数：

HTML：

<div id="the_color_picker"></div>

JS：

var colorPicker1 = document.getElementById("the_color_picker");
createColorPicker(colorPicker1, 10, 20);

//colorPicker1 is the element in the DOM which will be used to insert the
//colorpicker
//10 is the number of main colors which will result in 10 main colors which
//each will have 10x10 sub colors.
//20 is the size in pixels of every color

请记住，此功能不适合作为非常详细的颜色选择器，因为为每种颜色创建的 div。比如createColorPicker(colorPicker1, 255, 1)，就会出现严重的卡顿。

【讨论】：

【解决方案3】：

您可以使用简单的颜色选择器 https://github.com/DavidDurman/FlexiColorPicker

它简单轻便。在 Windows 商店应用中运行良好。

<html>
              <head>
                <script type="text/javascript" 
                        src="colorpicker.js"></script>
                <style type="text/css">
                  #picker { width: 200px; height: 200px }
                  #slide { width: 30px; height: 200px }
                </style>
              </head>
              <body>
                <div id="picker"></div>
                <div id="slide"></div>
                <script type="text/javascript">
                  ColorPicker(
                    document.getElementById('slide'),
                    document.getElementById('picker'),
                    function(hex, hsv, rgb) {
                      document.body.style.backgroundColor = hex;
                    });
                </script>
              </body>
            </html>

【讨论】：