Kendo UI 使用札记

    // html
    <input class="chooseCountry" type="text"/>
   
    // js 
    $(document).ready(function () {
           var data = [
               "中国",
               "中国台湾",
               "中国断臂山",
               "日本",
               "台湾"
           ];

           //create AutoComplete UI component
           $(".chooseCountry").kendoAutoComplete({
               dataSource: data,
               filter: "startswith",
               placeholder: "选择你的国家，蠢货！",
               separator: ", "
           });
       });

    // html  
    <p class="button-primary">primary Button</p>
    <p class="button-passed">disabled Button</p>  

    // js
    $(".button-primary").kendoButton({
            enable : true,
            icon : "wolf" // create span inner obj, and span.class = kin-icon, k-i-"this.value";
        });
        $(".button-passed").kendoButton({
            enable : false,
            spriteCssClass : "k-icon k-i-refresh" // create span inner obj, and span.class = this.value;
        });

// html
<div class="calendar">
    <!-- kendo will create calendar elements here -->
</div>

// js
$(".calendar").kendoCalendar();

    // HTML
    <!-- color picker -->
    <div class="color_picker_wrap" style="width:400px;">
        <div class="color_view" style="height:60px; padding: 10px; background: #000">
            <h3 style="color: #fff;">COLOR VIEW</h3>
        </div>
        <div class="color_choose"></div>
        <br/>
        <input class="color_customer_choose"/>
    </div>

    　　// JS
　　　　function preview(e) {
　　　　　　$(".color_view").css("background-color", e.value);
　　　　}

        $(".color_choose").kendoColorPalette({
            columns: 4,
            tileSize: {
                width: 35,
                height: 19
            },
            palette: [
                "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
                "#c6d9f0", "#8db3e2", "#548dd4", "#17365d",
                "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
                "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
            ],
            change: preview
        });

        $(".color_customer_choose").kendoColorPicker({
            value: "#fff",
            buttons: false,
            select: preview
　　　　 });

     // html
    <!-- combobox -->
    <div class="combobox-wrap" style="background:#ddd; padding: 10px;">
        <h3>choose drink</h3>
        <input id="choose_drink" type="text" placeholder="Select drink..."/>

        <h3>size</h3>
        <!-- kendo will create elements replace select, select will hide -->
        <select id="size" name="" placeholder="Select size...">
            <option value="">迷你杯</option>
            <option value="">小杯</option>
            <option value="">中杯</option>
            <option value="">大杯</option>
            <option value="">特大杯</option>
        </select>
        <button id="order-submit">submit order</button>
    </div>

   
            // JS
            // create ComboBox from input HTML element;
            $("#choose_drink").kendoComboBox({
                dataTextField : "text",
                dataValueField : "value",
                dataSource : [
                    { text: "coffee", value : "1"},
                    { text: "banana juice", value : "2"},
                    { text: "apple juice", value : "3"},
                    { text: "ice juice", value : "4"}
                ],
                filter : "contains",
                suggest : true,
                index : 3
            });

            // create ComboBox from select HTML element
            $("#size").kendoComboBox();

            var fabric = $("#choose_drink").data("kendoComboBox");
            var select = $("#size").data("kendoComboBox");

            $("#order-submit").click(function() {
                alert(‘Thank you! Your Choice is:\n\nDrink ID: ‘ + fabric.value() + ‘ and Size: ‘ + select.value());
            });

<div class="date_picker_wrap">
　　<input id="datePicker" type="text"/>
</div>

// JS
// create DateTimePicker from input HTML element
$("#dateTimePicker").kendoDatePicker();

<div class="date_time_picker_wrap">
　　<input id="dateTimePicker" type="text"/>
</div>

// JS
// create DateTimePicker from input HTML element
$("#dateTimePicker").kendoDateTimePicker();

// HTML
<!-- drop down list -->
    <div class="drop_down_list_wrap">
        <h3>cap Color</h3>
        <input id="capColor"/>
        <h3>cap Size</h3>
        <select id="capSize">
            <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="capOrder_submit">submit order</button>
    </div>

　　　　// JS
　　　　function dropDownList (){
            var capColorData = [
                { text: "Black", value: "1"},
                { text: "Orange", value: "2"},
                { text: "Blue", value: "3"}
            ];

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

            // create DropDownList frome select HTML element;
            $("#capSize").kendoDropDownList();

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

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

            // it‘s a function when <select></select> on change;
            function onChange(){
                var value = $("#capColor").val();  // get current select.selected.value;  value ==  1 || 2 || 3

                // three toggleClass default is not execute, when <select/> onchange,get that value then into this.toggleClass execute boolean operation;
                $("#cap").toggleClass("black-cap", value == 1)
                        .toggleClass("orange-cap", value == 2)
                        .toggleClass("blue-cap", value == 3);
　　　　
            }

            $(".capOrder_submit").click(function (){
                alert("Thank you! Your choice is:\n\nColor ID: " + color.value() + " and Size: " + size.value());
            });

        }
        dropDownList();