All Components

DropDownList / Basic usage

Customize your Kendo Cap

Cap Color

Cap Size

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 id="cap-view" class="demo-section k-content"> 
    <h4>Customize your Kendo Cap</h4> 
    <div id="cap" class="black-cap"></div> 
    <h4>Cap Color</h4> 
    <input id="color" value="1" style="width: 100%;"> 
    <h4 style="margin-top: 2em;">Cap Size</h4> 
    <select id="size" style="width: 100%;"> <option>S - 6 3/4"</option> <option>M - 7 1/4"</option> <option>L - 7 1/8"</option> <option>XL - 7 5/8"</option> </select> 
    <button class="k-button k-primary" id="get" style="margin-top: 2em; float: right;">Customize</button> 
   </div> 
   <style>
            #cap {
                width: 242px;
                height: 225px;
                margin: 20px auto;
                background-image: url('../content/web/dropdownlist/cap.png');
                background-repeat: no-repeat;
                background-color: transparent;
            }
            .black-cap {
                background-position: 0 0;
            }
            .grey-cap {
                background-position: 0 -225px;
            }
            .orange-cap {
                background-position: 0 -450px;
            }
        </style> 
   <script>
                $(document).ready(function() {
                    var data = [
                        { text: "Black", value: "1" },
                        { text: "Orange", value: "2" },
                        { text: "Grey", value: "3" }
                    ];

                    // create DropDownList from input HTML element
                    $("#color").kendoDropDownList({
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: data,
                        index: 0,
                        change: onChange
                    });

                    // create DropDownList from select HTML element
                    $("#size").kendoDropDownList();

                    var color = $("#color").data("kendoDropDownList");

                    color.select(0);
                    var size = $("#size").data("kendoDropDownList");

                    function onChange() {
                        var value = $("#color").val();
                        $("#cap")
                            .toggleClass("black-cap", value == 1)
                            .toggleClass("orange-cap", value == 2)
                            .toggleClass("grey-cap", value == 3);
                    };

                    $("#get").click(function() {
                        alert('Thank you! Your Choice is:\n\nColor ID: '+color.value()+' and Size: '+size.value());
                    });
                });
            </script> 
  </div>   
 </body>
</html>