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>// JSfunction 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;
　　　　　　  // ★create ComboBox by this way... this combox haven not method "value()";
$("#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();

<select name="" id="demo1"><option value="选项11">选项1</option><option value="选项22">选项2</option><option value="选项33">选项3</option><option value="选项44">选项4</option>
</select><div id="demo2"></div><div id="demo3"></div><script type="text/javascript">$("#demo1").kendoDropDownList();$("#demo2").kendoDropDownList({dataTextField: "text",dataValueField: "bishi", // #demo2.val() default return bishi(customer property);
        dataSource : [{text: "狼哥哥1", bishi: "狼哥哥1"},{text: "狼哥哥2", bishi: "狼哥哥2"},{text: "狼哥哥3", bishi: "狼哥哥3"},{text: "狼哥哥4", bishi: "狼哥哥4"}]});// following are customer drop down list;var demo2Datas =  [{text: "项目1", value: "项目11"},{text: "项目2", value: "项目22"},{text: "项目3", value: "项目33"},{text: "项目4", value: "项目44"}];$("#demo3").kendoDropDownList({dataTextField: "text",dataValueField: "value", // #demo2.val() default return value;
        dataSource : demo2Datas // remote dataArray;
    });
</script>

    // HTML<div class="editor" style="height:300px;"></div>// JS$(".editor").kendoEditor();

    // HTML<div class="grid_basic"></div>// JS$(".grid_basic").kendoGrid({dataSource: {type: "odata",transport: {// loading XML field;read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"},pageSize: 20},height: 550,groupable: true, // enable item drop to group;sortable: true,  // wtf is it?pageable: {refresh: true,  // create refresh buttonpageSizes: true,buttonCount: 5},columns: [{field: "ProductID", // XML Mark;title: "ID",width: 60  // default width is response;
            }, {field: "ProductName",title: "名字" // default title with field;
            }, {field: "UnitPrice",title: "单件价格"}, {field: "QuantityPerUnit"}]});

    // HTML<!-- ListView: binding remote data --><script src="content/shared/js/products.js"></script><div class="demo-section"><div id="listView"></div><div id="pager_listview" class="k-pager-wrap"></div></div><script type="text/x-kendo-template" id="template_listview"><div class="product_listview"><img src="content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image"/><h3>#:ProductName#</h3><p>#:kendo.toString(UnitPrice, "c")#</p></div></script>// JS$(function (){var dataSource = new kendo.data.DataSource({data: products, // receive a object arr;  --> content/shared/js/products.jspageSize: 21});$("#pager_listview").kendoPager({dataSource: dataSource});$("#listView").kendoListView({dataSource: dataSource,template: kendo.template($("#template_listview").html()) // set HTML template; --> script type="text/x-kendo-template"
            });});// CSS<style scoped>.demo-section {width: 860px;margin: 20px auto;border: 0;background: none;}#listView {padding: 10px 5px;margin-bottom: -1px;min-height: 510px;}.product_listview {float: left;position: relative;width: 111px;height: 170px;margin: 0 5px;padding: 0;}.product_listview img {width: 110px;height: 110px;}.product_listview h3 {margin: 0;padding: 3px 5px 0 0;max-width: 96px;overflow: hidden;line-height: 1.1em;font-size: .9em;font-weight: normal;text-transform: uppercase;color: #999;}.product_listview p {visibility: hidden;}.product_listview:hover p {visibility: visible;position: absolute;width: 110px;height: 110px;top: 0;margin: 0;padding: 0;line-height: 110px;vertical-align: middle;text-align: center;color: #fff;background-color: rgba(0,0,0,0.75);transition: background .2s linear, color .2s linear;-moz-transition: background .2s linear, color .2s linear;-webkit-transition: background .2s linear, color .2s linear;-o-transition: background .2s linear, color .2s linear;}.k-listview:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

//HTML<div class="maskedtextbox_wrap"><h1>Masked text Box</h1><h3>choose Kind of Currencies</h3><br/><p><input class="initial_price" value="9,999.66"/></p><br/><h3>input </h3><input class="maskedtextbox_choose" value="en-US"/><br/><br/><p><label for="">电话号码</label><input class="phone_number" value="+ 86 18516108504"/></p></div>// JS$(".phone_number").kendoMaskedTextBox({mask: "+ 00 18500000000"});

    //HTML<!-- Menu --><div style="height:200px;"><ul class="menu" style="width:200px;"><li>您大爷<ul style="display: none"><li>一号大爷<ul><li>大爷是基佬</li><li>大爷是人妖</li><li>大爷是人妖，所以不能叫基佬</li></ul></li><li>二号大爷</li><li>三号大爷</li></ul></li></ul></div>// JS  <script type="text/javascript">$(".menu").kendoMenu();</script>

    // HTML<!-- MultiSelect --><div class="multiSelect" style="width:400px; font-family: 'microsoft Yahei';"><h1 style="color: pink">你丫的突然打鸡血想组织一个活动，所以：</h1><h3>选择朋友</h3><input class="chooseFriend"/><h3>选择活动</h3><!-- ★ multi select must set select.property.multiple = multiple --><select class="chooseEvent" multiple="multiple"/><option>玩小鸭</option><option>玩菊花</option><option>玩泥巴</option><option>玩水</option></select></div>// JS$(".chooseFriend").kendoMultiSelect({dataTextField: "text",dataValueField: "value",dataSource: [{ text: "豆芽菜", value: "1"},{ text: "鸡鸡猫", value: "2"},{ text: "夜影", value: "3"},{ text: "凹凸曼", value: "4"}]});$(".chooseEvent").kendoMultiSelect().data("kendoMultiSelect");

     // HTML    <!-- Notification --><div class="notification_wrap"><!-- creat pupup html --><span id="popupNotification"></span><span id="staticNotification"></span><button class="static_notification k-button">static notification</button><button class="bottom_right_notification k-button">as a pupup at bottom-right</button></div>// JSvar popupNotification = $("#popupNotification").kendoNotification().data("kendoNotification");var staticNotification = $("#staticNotification").kendoNotification({appendTo: "body"  // static popup want to stay's wrap}).data("kendoNotification");$(".static_notification").click(function(){var d = new Date();popupNotification.show(kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000"), "error");});$(".bottom_right_notification").click(function(){var d = new Date();staticNotification.show(kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000"), "info");var container = $(staticNotification.options.appendTo);container.scrollTop(container[0].scrollHeight);});

    <!-- Numeric Text Box --><div class="numericTextBox"><div><input class="currency" type="number" value="30" min="0" max="100"/></div><div style="margin-top: 7px;"><input class="percentage" value="0.05"/></div><div style="margin-top: 7px;"><input class="custom" value="2.00"/></div><div style="margin-top: 7px;"><!-- 此格式等同于在接下来的JS代码中的组件调用中设置参数 --><input class="numeric" type="number" value="17" min="0" max="100" step="1"/></div></div><!-- JS --><script type="text/javascript">$(".currency").kendoNumericTextBox({format: "c",decimals: 2 //小数数位
        });$(".percentage").kendoNumericTextBox({format: "p0",min: 0,max: 0.4,step: 0.01});// custom numeric text box;
        $(".custom").kendoNumericTextBox({format: "0.00 克拉",min: 0,max: 12,step: 0.01});$(".numeric").kendoNumericTextBox();</script>

<!-- panelBar --><div class="panelBar_wrap"><ul class="panelBar"><li><h2>这是标题</h2><div><p>这全是内容</p><p>这全是内容</p><p>这全是内容</p></div></li><li><h2>这是标题</h2><div><p>这全是内容</p><p>这全是内容</p><p>这全是内容</p></div></li><li><h2>这是标题</h2><div><p>这全是内容</p><p>这全是内容</p><p>这全是内容</p></div></li></ul></div><!-- JS --><script type="text/javascript">$(".panelBar").kendoPanelBar({expandMode: "single"});</script>

    <div class="progressBarWrap"><h2>who are u favorite one</h2><ul><li><label for="">你第一喜欢的人</label><select id="prBar1" name=""><option value="dad" selected="selected">爸爸</option><option value="mom">妈妈</option><option value="hao">豪仔鸡</option></select></li></ul><ul><li><label for="">你第二喜欢的人</label><select id="prBar2" name="" ><option value="dad">爸爸</option><option value="mom" selected="selected">妈妈</option><option value="hao">豪仔鸡</option></select></li></ul><ul><li><label for="">你第三喜欢的人</label><select id="prBar3" ><option value="dad">爸爸</option><option value="mom">妈妈</option><option value="hao" selected="selected">豪仔鸡</option></select></li></ul><ul class="progressResults"><li><h4>"爸爸"</h4><div class="dad"></div></li><li><h4>"妈妈"</h4><div class="mom"></div></li><li><h4>"豪仔鸡"</h4><div class="hao"></div></li><li><h4>其他人</h4><div class="another"></div></li></ul><button class="progressBtn">vote submit</button></div>


    <!-- JS -->
<script type="text/javascript">function progressDemo(){var progressbars = [];$(".progressResults div").each(function () {var pb = $(this).kendoProgressBar({min: 0,max: 100,type: "percent",animation: {duration: 600}}).data("kendoProgressBar");progressbars.push(pb);});$(".progressBarWrap select").kendoDropDownList();$(".progressBtn").click(function () {var first = $("#prBar1").val();var second = $("#prBar2").val();var third = $("#prBar3").val();$.each(progressbars, function (i, pb) {pb.value(0);  // setting progress bar default progressing;
                });if (first !== "" && first !== second && second !== "" &&second !== third && first !== third) {$("." + first).data("kendoProgressBar").value(100);$("." + second).data("kendoProgressBar").value(70);$("." + third).data("kendoProgressBar").value(40);$.each(progressbars, function (i, pb) {// setting not be voting's progressbar's progressing;if (pb.value() == 0){pb.value(5);}});} else {alert("please select different people to vote it");}});}progressDemo();</script>

　　<!-- slider --><div class="sliderWrap"><input class="sliderVertical" value="500"/><div style="height: 40px;"></div><input class="sliderHorizontal"/></div>

<script type="text/javascript">$(".sliderVertical").kendoSlider({min: 0,max: 1000,smallStep: 100, // 每次点击按钮的 step
            largeStep: 200 // 刻度
        }).data("kendoSlider");$(".sliderHorizontal").kendoSlider({orientation: "vertical",min: -20,max: 20,value: 10,  // default point, u can also setting input.value;
            smallStep: 1,largeStep: 10,showButtons: false});</script>

    <!-- sortable --><div class="sortableWrap" style="margin-left: 400px;"><ul class="sortable-basic"><li class="sortable">狼哥哥<span>handsome</span></li><li class="sortable">豆芽菜<span>dude</span></li><li class="sortable">鸡鸡猫<span>dude</span></li><li class="sortable">凹凸曼<span>idiot</span></li><li class="sortable disabled">船长<span>disabled item</span></li><li class="sortable disabled">船长老婆大人<span>disabled item</span></li><li class="not-sortable">猪头<span>not sortable item</span></li></ul></div><style type="text/css">.sortable-basic li{ height:40px; line-height: 40px; background: lightcyan; margin-bottom: 5px;}.sortable-basic .disabled{ background: pink;}.sortable-basic .not-sortable{ background: grey;}li.hint{display: block; width: 200px;}li.hint {position: relative;display: block;width: 200px;height:40px;background-color: #52aef7;color: #fff;}li.hint:after {content: "";display: block;width: 0;height: 0;border-top: 6px solid transparent;border-bottom: 6px solid transparent;border-left: 6px solid #52aef7;position: absolute;right: -6px;top: 8px;}li.hint:last-child {border-radius: 4px;}li.hint span {color: #fff;}</style><script type="text/javascript">$(".sortable-basic").kendoSortable({hint:function(element) {return element.clone().addClass("hint");    // when draging, auto create draging element: "<li></li>"  and this statement is setting the mark's CSS;
            },placeholder:function(element) {return element.clone().addClass("placeholder").text("drop here");   // when draging, auto create placeHolder element: "<li></li>"  and this statement is setting the mark's CSS && text;
            },filter: ".sortable", // only abled filter's selector to sortable;
            disabled: ".disabled", // cant drop self;cursor: "url('content/web/sortable/grabbing.cur'), default",// coursor image;
            cursorOffset: { // basic from cursor;
                top: -10,left: -230}});</script>

    <!-- time Picker --><input id="timePicker" type=""/><script type="text/javascript">$("#timePicker").kendoTimePicker();</script>

<!-- time Picker --><input id="timePicker_start" type="" value="8:00 AM"/><input id="timePicker_end" type="" value="8:30 AM"/><script type="text/javascript">function timePickerDemo(){
　　　　　　　/** 这段 start.onchange时执行的函数，狼哥哥还看不懂- - */function startChange() {var startTime = start.value();if (startTime) {startTime = new Date(startTime);end.max(startTime);startTime.setMinutes(startTime.getMinutes() + this.options.interval);end.min(startTime);end.value(startTime);}}// init star timepicker;var start = $("#timePicker_start").kendoTimePicker({change: startChange}).data("kendoTimePicker");// init end timepickervar end = $("#timePicker_end").kendoTimePicker().data("kendoTimePicker");// define min/max range;
            start.min("8:00 AM");start.max("10:00 PM");// define min/max range;
            end.min("8:00 AM");end.max("11:30 PM");}timePickerDemo();</script>

    <div class="tooltipWrap"><h2>ToolTip</h2><ul id="tooltip"><li title="当然是剁椒鱼头啦！">湖南的美食 - 鼠标移上来</li><li title="回锅肉！必须是它！">四川的美食 - 鼠标移上来</li><li title="上海菜很难吃！甜甜的..">上海的美食 - 鼠标移上来</li></ul></div><style type="text/css">.tooltipWrap{position: relative; width:500px;}.tooltipWrap li{position: relative; line-height: 40px; margin-bottom: 5px; background: pink;}.tooltipWrap .k-animation-container{left: 0;}</style><script type="text/javascript">$(document).ready(function() {var tooltip = $("#tooltip").kendoTooltip({filter: "li",width: 120,position: "bottom" // value: top right bottom left;
　　　　　　　　　// content: this.title;   default using thisElement's property( title );

            }).data("kendoTooltip");$("#tooltip").find("li").click(false);});</script>

    <!-- tree view --><div class="treeViewWrap"><div><ul id="treeview"><li data-expanded="true"><span class="k-sprite folder"></span>images<ul><li><span class="k-sprite image"></span>狼哥哥.png</li><li><span class="k-sprite image"></span>豪仔鸡.jpg</li></ul></li><li data-expanded="true"><span class="k-sprite folder"></span>resource<ul><li><span class="k-sprite folder"></span>html<ul><li><span class="k-sprite image"></span>index.html</li><li><span class="k-sprite image"></span>category.html</li></ul></li><li><span class="k-sprite folder"></span>PDF<ul><li><span class="k-sprite pdf"></span>Javascript高级程序设计.pdf</li><li><span class="k-sprite pdf"></span>前端精粹.pdf</li></ul></li></ul></li></ul></div></div><style scoped>.treeViewWrap {width: 400px;}.k-sprite {margin-right: 5px;/* icon sprite */background-image: url("content/web/treeview/coloricons-sprite.png");}.rootfolder { background-position: 0 0; }.folder { background-position: 0 -16px; }.pdf { background-position: 0 -32px; }.html { background-position: 0 -48px; }.image { background-position: 0 -64px; }</style><script type="text/javascript">// ID must setting on "UL" element;
        $("#treeview").kendoTreeView();</script>

    <!-- window --><div class="windowWrap"><div id="window">这是个窗口</div></div><script type="text/javascript">function windowDemo(){var onClose = function () {alert("我要关闭了");}$(".windowWrap").kendoWindow({width: "600px",title: "狼哥哥的故事",actions: ["Pin","Minimize","maximize","Close"],close: onClose})}windowDemo();</script>

    <!--  data source --><div class="dataSource"><table class="peoples"><thead><tr><th>Rank</th><th>Name</th><th>Age</th></tr></thead><tbody><tr><td colspan="4"></td></tr></tbody></table></div>

　　<!-- data create template --><script id="templateDataSource" type="text/x-kendo-template"><tr><td>#= rank #</td><td>#= name #</td><td>#= age #</td></tr></script>

<script type="text/javascript">function dataSourceDemo() {var template = kendo.template($("#templateDataSource").html());var peoples = [{ "rank": 1, "name": "狼哥哥", age: "18"},{ "rank": 2, "name": "豆芽菜", age: "21"},{ "rank": 3, "name": "王晓花", age: "23"},{ "rank": 4, "name": "夜影", age: "25"},{ "rank": 5, "name": "鸡鸡猫", age: "19"}];var dataSource = new kendo.data.DataSource({data: peoples,change: function () { // subscribe to the CHANGE event of the data source;
                    $(".peoples tbody").html(kendo.render(template, this.view())); // populate the table;
                    console.log(this.view());}});// read data from "peoples" array
            dataSource.read();}dataSourceDemo();</script>

<!-- template --><div class="templateWrap" style="height: 300px;"><input id="product_dropDown" type=""/><div id="product-preview"></div></div><script id="product_templateDemo" type="text/x-kendo-template"><h4>ProductName: #: ProductName #</h4><img src="content/web/foods/#= ProductID #.jpg" alt=""/></script><script>function templateDemo() {var template = kendo.template($("#product_templateDemo").html());function preview() {var dropdown = $("#product_dropDown").data("kendoDropDownList");var product = dropdown.dataSource.get(dropdown.value()); // get current dropDown's Element.dataSource [return Object]// dropdown.value() == current dropDown Element's ID;  -->  dataValueField: "ProductID";var productPreviewHtml = template(product);$("#product-preview").html(productPreviewHtml);  // populate the view box;
            }$("#product_dropDown").kendoDropDownList({dataTextField: "ProductName",dataValueField: "ProductID",dataSource: {transport: {read: {url: "http://demos.telerik.com/kendo-ui/service/products",dataType: "jsonp"}},schema: {model: {id: "ProductID"}}},dataBound: preview,change: preview});}templateDemo();</script>