All Components

ColorPicker / Basic usage

Select Wall Paint

Choose Custom Color

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Basic usage</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div class="demo-section hidden-on-narrow k-content wide"> 
    <div id="background"> 
     <div class="column"> 
      <h3 class="title">Select Wall Paint</h3> 
      <div id="palette"></div> 
     </div> 
     <div class="column"> 
      <h3 class="title">Choose Custom Color</h3> 
      <input id="picker"> 
     </div> 
    </div> 
   </div> 
   <div class="responsive-message"></div> 
   <script>
        function preview(e) {
            $("#background").css("background-color", e.value);
        }

        $("#palette").kendoColorPalette({
            columns: 4,
            tileSize: {
                width: 34,
                height: 19
            },
            palette: [
                "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
                "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
                "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
                "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
                "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
            ],
            change: preview
        });

        $("#picker").kendoColorPicker({
            value: "#ffffff",
            buttons: false,
            select: preview
        });
    </script> 
   <style>

        .demo-section {
            height: 600px;
            width: 600px;
        }

        #background {
            background: transparent url(../content/web/colorpicker/interior-bg.png) no-repeat;
            margin: 0 auto;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .column {
            margin-top: 384px;
            float: left;
            width: 300px;
            text-align: center;
        }

        .column .title {
            color: #a3a3a3;
            text-transform: uppercase;
            font-size: 11px;
            font-weight: normal;
            padding: 41px 0 20px;
        }

        #palette {
            vertical-align: top;
            display: inline-block;
        }

        .k-colorpicker {
            vertical-align: top;
            margin: 20px 0;
        }
    </style> 
  </div>   
 </body>
</html>