Kendo UI 使用札记

AutoComplete

    // html

    <input class="chooseCountry" type="text"/>

// js

    $(document).ready(function () {

           var data = [

               "中国",

               "中国台湾",

               "中国断臂山",

               "日本",

               "台湾"

           ];
//create AutoComplete UI component

           $(".chooseCountry").kendoAutoComplete({

               dataSource: data,

               filter: "startswith",

               placeholder: "选择你的国家，蠢货！",

               separator: ", "

           });

       });

Button

    // 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;

        });

Calendar

// html

<div class="calendar">

    <!-- kendo will create calendar elements here -->

</div>

// js

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

ColorPicker

    // 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
　　　　 });

ComboBox

     // 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());

            });

DatePicker

<div class="date_picker_wrap">

　　<input id="datePicker" type="text"/>

</div>

// JS

// create DateTimePicker from input HTML element

$("#dateTimePicker").kendoDatePicker();

DateTimePicker

<div class="date_time_picker_wrap">

　　<input id="dateTimePicker" type="text"/>

</div>

// JS

// create DateTimePicker from input HTML element

$("#dateTimePicker").kendoDateTimePicker();

DropDownList

// 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();

Kendo UI 使用札记,布布扣,bubuko.com