js 顏色選擇插件

来源:http://www.cnblogs.com/liujiaxian/archive/2017/01/21/6336811.html
-Advertisement-
Play Games

COLPICK是一款非常的輕小,無需圖片就可以實現顏色選擇器的jquery插件,只用 JS 和 CSS 就實現了全部功能,而且非常直觀,類似Photoshop的界面,使用方便。顏色的明暗很容易自定義,整個整個都是用html5+ CSS3實現外觀而,插件只有28 KB,瀏覽器載入速度可以說是非常快的, ...


COLPICK是一款非常的輕小,無需圖片就可以實現顏色選擇器的jquery插件,只用 JS 和 CSS 就實現了全部功能,而且非常直觀,類似Photoshop的界面,使用方便。顏色的明暗很容易自定義,整個整個都是用html5+ CSS3實現外觀而,插件只有28 KB,瀏覽器載入速度可以說是非常快的,而在低於IE9的版本也可以使用,只需載入了支持html5的html5shiv.js.

下載該插件和 colpick.js 和 colpick.css 添加到您的文檔的頭:

<script src="js/colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/colpick.css" type="text/css"/>

html

<button id="picker">Show Color Picker</button>

js

 $('#colorSelector').colpick({
        flat: true,
        layout: 'full',
        submit: true,
        width: 500,
        colorScheme: 'dark',
        color: "#bbbbbb",
        onChange: function (hsb, hex, rgb, el, bySetColor) {

        }, onSubmit: function (hsb, hex, rgb, el) {
            //處理你的業務需求
        }

    }).keyup(function () {
        $(this).colpickSetColor(this.value);
    }).colpickSetColor("傳入一個預設的顏色");




您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 基本操作 安裝與配置 init add與commit git add 快照的內容寫入緩存區 git commit 將緩存區內容添加到倉庫中。 clone vim 狀態的意思是,這個文件在我們將它添加到緩存之後又有改動 status diff 尚未緩存的改動:git diff 查看已緩存的改動: gi ...
  • ▓▓▓▓▓▓ 大致介紹 這次是一個簡單的效果,就是思路的問題 效果: ▓▓▓▓▓▓ 思路 旋轉的效果就是根據滑鼠的的移動距離來顯示不同的圖片,形成視覺差,仿佛就是在正真的旋轉 由於效果是根據滑鼠的移動距離來操作的,即移動的像素值。如果按照預設的情況,移動滑鼠的時候圖片就旋轉的太快了,所以我們要給滑鼠 ...
  • 項目中有個需求,下拉框既可以下拉選擇,也可以手動填寫 html代碼 js代碼 獲取值 用了這個插件以後,這塊是一個input,type="text" 參數 filter 選擇option以後,是否過濾 預設 true effects 點擊的時候,下拉框的過渡效果 有default,slide,fad ...
  • CSS常用屬性 ☛關於CSS屬性個人建議查看手冊更加詳細方便,我這裡就幾種常用屬性進行分類並簡單取幾個常用屬性值,僅供跟我一樣剛學習前端的人作為入門而用。 1.字體樣式 字體的縮寫,寫法是font:font-style|| font-variant ||font-weight||font-size| ...
  • CSS的優先順序和繼承問題 ★CSS的衝突,即優先順序 CSS本身的設置可以同時應用多個樣式在同一個元素,此時樣式之間可能出現衝突而達不到用戶所想要的效果。 ★解決CSS衝突的優先順序規則: ● CSS層疊樣式表引入方法的優先順序:內聯式>內嵌式>鏈接式>導入式 ● 在多個外部樣式中,後出現的樣式的優先順序高 ...
  • CSS選擇符 【通配選擇符】 *星號選擇器將匹配頁面里的每一個元素,但我建議你永遠不要再生產代碼中使用它。它給瀏覽器帶來大量不必要的負擔。 *{ margin:0; padding:0; } 【標簽選擇符】(也叫類型選擇符):也就是把html標簽名作為選擇符 demo: ul {} 【id選擇符】: ...
  • HTML5(WEB前端),在2012年及以前,一直處於一種萌芽期的狀態當中,直至2013年才進入行業的成長期。HTML5(WEB前端)在2013和2014年,隨著行業的推動慢慢的增長,直至2015年迎來了行業的大爆發,HTML5迅速被推上舞臺,這個詞語也成了不少人閑談中的常見辭彙。 2016年,泡... ...
  • 1.html 2.css 3.js ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...