日韩精品一区二区三区四区,日韩高清亚洲精品va,91大神精品网站在线观看

HTML5 Web app開(kāi)發(fā)工具Kendo UI Web教程：顏色拾取器的使用

原創(chuàng)|行業(yè)資訊|編輯：郝浩|2013-10-21 13:36:58.000|閱讀 1474 次

概述：顏色拾取器ColorPicker是Kendo UI Web中的用于顏色選擇的下拉組件，這個(gè)設(shè)計(jì)采用了一個(gè)友好的操作界面來(lái)替換一個(gè)HTML5 <input type="color">域，這個(gè)域在對(duì)于大多數(shù)的瀏覽器并不是都支持。如何用這個(gè)顏色拾取器呢，在下面的文章中將會(huì)具體的用示例進(jìn)行說(shuō)明。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關(guān)鏈接：

顏色拾取器ColorPicker是Kendo UI Web中的用于顏色選擇的下拉組件，這個(gè)設(shè)計(jì)采用了一個(gè)友好的操作界面來(lái)替換一個(gè)HTML5 <input type="color">域，這個(gè)域在對(duì)于大多數(shù)的瀏覽器并不是都支持。如何用這個(gè)顏色拾取器呢，在下面的文章中將會(huì)具體的用示例進(jìn)行說(shuō)明：

啟用顏色拾取器

<input type="color" id="myColorField" />
可以調(diào)用kendoColorPicker來(lái)對(duì)它進(jìn)行初始化：
$(document).ready(function(){
    $("#myColorField").kendoColorPicker();
});

原來(lái)的<input>元素將會(huì)被保存在DOM中，它的值也將會(huì)根據(jù)用戶選擇的顏色進(jìn)行更新，因此定期的<form>-s會(huì)工作。

配置顏色拾取器

當(dāng)你調(diào)用了kendoColorPicker時(shí)，你可以用配置選項(xiàng)傳遞一個(gè)參數(shù)。默認(rèn)的下拉是一個(gè)HSV顏色選擇器，界面效果如下：

HTML5 Web app開(kāi)發(fā)工具Kendo UI Web教程：顏色拾取器的使用（圖1）

獲得一個(gè)簡(jiǎn)單的顏色拾取器

$(document).ready(function(){
    $("#myColorField").kendoColorPicker({ palette: "basic" });
});

通過(guò)上面的代碼，將會(huì)得到如下圖的一個(gè)包含20中個(gè)顏色的拾取器：

HTML5 Web app開(kāi)發(fā)工具Kendo UI Web教程：顏色拾取器的使用（圖2）

獲得“web-safe”顏色板

$(document).ready(function(){
    $("#myColorField").kendoColorPicker({ palette: "websafe" });
});

通過(guò)上面的代碼將會(huì)得到如下圖所示的一個(gè)有著216中顏色的“web-safe”面板。
HTML5 Web app開(kāi)發(fā)工具Kendo UI Web教程：顏色拾取器的使用（圖3）

對(duì)簡(jiǎn)單的拾取器自定義顏色

你也可以讓這個(gè)簡(jiǎn)單的拾取器來(lái)顯示一個(gè)自定義多顏色的列表，只是需要將它們放入palette參數(shù)中就可以了，如下：

$(document).ready(function(){
    $("#myColorField").kendoColorPicker({
        palette: "#fff,#000,#f00"
    });
});

  通過(guò)上面的代碼，將只是會(huì)顯示白色、黑色、紅色。要加入其它的顏色，可以用短整型（3位數(shù)）或是長(zhǎng)整形（6位數(shù)）表示法輸入你想要加入的顏色，并用逗號(hào)隔開(kāi)就可以了，不過(guò)這個(gè)＃符號(hào)可能會(huì)缺失。

>>>Kendo UI Web下載

標(biāo)簽：KendoUI

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：慧都控件網(wǎng)

上一篇：慧都學(xué)院培訓(xùn)新模式：綜合定制培訓(xùn) 下一篇：Python開(kāi)發(fā)環(huán)境Wing IDE使用教程：命令行調(diào)試

相關(guān)產(chǎn)品

控件

產(chǎn)品功能：UI界面

源碼：開(kāi)源

產(chǎn)品編號(hào)：13225

當(dāng)前版本：R2 2017 [銷售以商家最新版為準(zhǔn)，如需其他版本，請(qǐng)來(lái)電咨詢]

開(kāi) 發(fā) 商： telerik

正式授權(quán)

">Kendo UI Web

運(yùn)用JavaScript和HTML5就能快速創(chuàng)建性能最優(yōu)的Web應(yīng)用程序

最新文章 MORE

金喜正規(guī)買球相關(guān)的文章 MORE

国产凹凸在线-国产拗女一区二区三区-国产白白视-国产白领-国产白拍-国产白丝jk被疯狂输-国产白丝喷-国产白丝在线

金喜正规买球

在線采購(gòu)

中文文檔庫(kù)

試用/Demo下載

開(kāi)發(fā)社群

HTML5 Web app開(kāi)發(fā)工具Kendo UI Web教程：顏色拾取器的使用

用科技創(chuàng)就卓越

Create excellence with technology

国产凹凸在线-国产拗女一区二区三区-国产白白视-国产白领-国产白拍-国产白丝jk被疯狂输-国产白丝喷-国产白丝在线

金喜正规买球

在線采購(gòu)

中文文檔庫(kù)

試用/Demo下載

開(kāi)發(fā)社群

HTML5 Web app開(kāi)發(fā)工具Kendo UI Web教程：顏色拾取器的使用

為你推薦

用科技創(chuàng)就卓越

Create excellence with technology