Kendo UI 框架 HTML5

Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。

Kendo UI包含了开发现代JavaScript,JQuery框架开发所需要的所有一切，

包括：强大的数据源，通用的拖拉（Drag-and-Drop）功能，模板，和UI控件。

Web Demos

Mobile Demos

DataViz Demos

在线演示地址：http://demos.kendoui.com/

最新Kendo UI框架下载：http://www.kendoui.com/get-kendo-ui.aspx

如何在项目中使用Kendo UI框架

1、下载Kendo UI 框架

DownLoad

2、需要引用Kendo UI CSS和JavaScript资源文件到项目中

1）Kendo UI Web

 <head>

    <!--In the header of your page, paste the following for Kendo UI Web styles-->
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<!--Then paste the following for Kendo UI Web scripts-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
</head>

2）Kendo UI DataViz

    <!--In the header of your page, paste the following for Kendo UI DataViz style sheet -->
<link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<!--Then paste the following for Kendo UI DataViz scripts-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.dataviz.min.js" type="text/javascript"></script>

3）Kendo UI Mobile

<!--In the header of your page, paste the following for Kendo UI Mobile styles-->
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<!--Then paste the following for Kendo UI Mobile scripts-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.mobile.min.js" type="text/javascript"></script>

3、配置你项目中需要使用的脚本和皮肤

系统，浏览器的支持

如：先把框架引入到项目中，再引用到<head>

请确保URL路径是正确的

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<ul class="Breadcrumb">
<li>Kendo UI框架 列表绑定</li>
</ul>
<div id="divBookingList">
</div>
<div style="display: none;" id="template">
<div class="toolbar">
<label class="Language-label" for="CsNO">
CS编号:</label>
<input type="search" id="CsNO" class="txtSearch"></input>
<label class="Language-label" for="VoyageId">
船期/航次:</label>
<input type="search" id="VoyageId" class="txtSearch"></input>
<label class="Language-label" for="SeekWayId">
揽货方式:</label>
<input type="search" id="SeekWayId" class="txtSearch"></input>
<label class="Status-label" for="SignStatusName">
签核状态:</label>
<input type="search" id="SignStatusName" style="width: 130px"></input>
<a class="k-button" href="javascript:void(0);" style="width: 80px;" οnclick="javascript:SearchComment();">
查询</a>
</div>
</div>
<script type="text/javascript">
function SearchComment() {
var _SignStatusName = $("#SignStatusName").val();
var _VoyageId = $("#VoyageId").val();
var _SeekWayId = $("#SeekWayId").val();
var CSNO = $("#CsNO").val();
jsonBookingList.query({
page:1,
pageSize:jsonBookingList.pageSize(),
skip:jsonBookingList.skip(),
take:jsonBookingList.take(),
filter:[
{ field: "VoyageId", value: _VoyageId },
{ field: "SeekWayId", value: _SeekWayId },
{ field: "SignStatusName", value: _SignStatusName },
{ field: "CsNO", value: CSNO }
]
});
}
//转换查询条件
function ConverToFilter(filters) {
var strFilters = "";
if (filters) {
for (var i = 0; i < filters.filters.length; i++) {
strFilters += "$$$" + filters.filters[i].field + "###" + filters.filters[i].value;
}
}
return strFilters;
}
function ConverToSort(sort) {
var strSort = "";
if (sort) {
strSort = sort[0].field + "  " + sort[0].dir;
}
return strSort;
}
var jsonBookingList = new kendo.data.DataSource({
pageSize: 15,
//batch: true,
//启用服务端分页功能
serverPaging: true,
//启用服务端排序功能
serverSorting: true,
//启用服务端查询功能
serverFiltering: true,
transport: {
read: {
url: "/_ws/_wsBookingCargo.asmx/GetBookingList",
contentType: 'application/json; charset=utf-8',
type: "POST",
dataType: "json"
},
parameterMap: function (options, type) {
//type:"create", "read", "update", "destroy"
if (type == "read") {
var filter = ConverToFilter(options.filter);
var sort = ConverToSort(options.sort);
var result = {
take: options.take,
pageSize: options.pageSize,
skip: options.skip,
page: options.page,
filter: filter,
orderBy: sort
};
var resultJson = JSON.stringify(result);
return resultJson;
}
}
},
change: function () {
//分页扩展
var info = $(".k-grid-pager .info");
if (!info.length) {
info = $('<div class="info" style="float:right;"/>').appendTo(".k-grid-pager");
}
info.text(kendo.format("显示 {0} - {1} ,共 {2} 条",
(this.page() - 1) * this.pageSize() + 1,
Math.min(this.page() * this.pageSize(), this.total()),
this.total()
));
},
schema: {
parse: function (data) {
//解析数据
var jsonData = eval("(" + data.d + ")");
return jsonData;
},
data: function (data) {
//显示的数据
return data.List;
},
total: function (data) {
//总记录数
return data.RecordCount;
}
}
});
function Bind_DropDownList(objId, autoBind, optionLabel, TextField, ValueField, JsonData) {
for (var ii = 0; ii < JsonData.length; ii++) {
JsonData[ii].DictionaryName = unescape(JsonData[ii].DictionaryName);
}
return $("#" + objId).kendoDropDownList({
dataTextField: TextField,
dataValueField: ValueField,
autoBind: autoBind,
optionLabel: optionLabel,
dataSource: {
data: JsonData
}
});
}
function Bind_Dictionary(objId, JsonData) {
Bind_DropDownList(objId, true, "全部", "DictionaryName", "DictionaryKey", JsonData);
}
var _VoyageList=  <%=bll_Dictionary.GetJsonData(BookingCargoEnum.ObjectType.Voyage)%>;
var _SeekWayId= <%=bll_Dictionary.GetJsonData(BookingCargoEnum.ObjectType.SeekWay)%>;
var _SignStatusName=  <%=bll_Dictionary.GetJsonData(BookingCargoEnum.ObjectType.SignStatus)%>;
$(function () {
var grid = $("#divBookingList").kendoGrid({
type: "json",
//数据源绑定
dataSource: jsonBookingList,
//header 内容模板
toolbar: kendo.template($("#template").html()),
//启用分页
pageable: true,
sortable: {
mode: "single",
allowUnsort: false
},
columns: [{
field: "CsNumber",
title: "CS编号"
}, {
field: "ConsigneeName",
title: "收货人",
template: '#= unescape(ConsigneeName) #'
}, {
field: "ShipperName",
title: "发货人",
template: '#= unescape(ShipperName) #'
}, {
field: "v_SeekWay",
title: "揽货方式",
template: '#= unescape(v_SeekWay) #'
}, {
field: "v_ShipOwner",
title: "船公司",
template: '#= unescape(v_ShipOwner) #'
}, {
title: "签核状态",
field: "v_SignStatusName",
template: '#= v_SignStatusName#'
}, {
sortable: false,
title: "操作",
width: "240px",
template: '<a class="k-button" style="width:40px;" href="Show.aspx?id=#= CsNumber#" >详细信息</a> <a class="k-button" style="width:40px;" href="Edit.aspx?id=#= CSNumber#" >修改信息</a>'
}]
});
//绑定下拉框
Bind_Dictionary("VoyageId", _VoyageList);
Bind_Dictionary("SeekWayId", _SeekWayId);
Bind_Dictionary("SignStatusName", _SignStatusId);
});
</script>
</asp:Content>

运行结果如下：

后台WebService中

 [WebMethod]
public string GetBookingList(int take, int skip, int page, int pageSize, string filter, string orderBy)
{
return "JSON格式数据";//
}

<body>
<div style="margin-top: -6px; margin-left: 180px">
<input id="datepicker" value="7/6/2012" style="width:150px;" />
</div>
<div style="margin-top: 59px; margin-left: 180px">
<input id="monthpicker" value="November 2011" style="width:150px" />
</div>
<script>
$(document).ready(function() {
//创建DatePicker 格式为默认
$("#datepicker").kendoDatePicker();
//自定显示义格式
$("#monthpicker").kendoDatePicker({
// 定义日历初始化日期试图
start: "year",
// 定义日历应该返回日期
depth: "year",
// 年份和月份
format: "MMMM yyyy"
});
});
</script>
</body>

试图：

Kendo UI 框架 HTML5相关推荐

Kendo UI Web教程分享
2019独角兽企业重金招聘Python工程师标准>>> Kendo UI Web是著名软件开发商Telerik的产品,包含数百个创建HTML5 web app的必备元素,包括UI组件 ...
Kendo UI Web教程系列
Kendo UI Web是著名软件开发商Telerik的产品,包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等. 下面盘点了Kendo U ...
Kendo UI常用示例汇总（九）
2019独角兽企业重金招聘Python工程师标准>>> Kendo UI Professional 提供开源和商业两个版本.开源版 Kendo UI Core,有40+个框架和组件: ...
Kendo UI开发教程：Kendo UI模板概述
2019独角兽企业重金招聘Python工程师标准>>> Kendo UI框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaS ...
几款流行的HTML5 UI 框架比较
手机HTML5开发,大部分都使用现有的框架,这里简单比较几个流行的UI 框架.作者(启明星工作室 http://www.dotnetcms.org) 比较一下几款流行的HTML5框架,个人意见,仅供参 ...
移动应用程序框架Kendo UI Mobile发布R2 2016 SP2
2019独角兽企业重金招聘Python工程师标准>>> 对于WinPhone8,iOS,Android和黑莓等终端用户,Kendo UI Mobile 创建的应用程序感觉就像原生应用 ...
html5游戏视频UI框架,推荐几个精致的web UI框架
Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. 2.Amazeui Ama ...
html5 pc ui,几款流行的HTML5 UI 框架比较
手机HTML5开发,大部分都使用现有的框架,这里简单比较几个流行的UI 框架.比较一下几款流行的HTML5框架,个人意见,仅供参考. (1)MUI 网址: http://dev.dcloud.net. ...
HTML5 Web app开发工具Kendo UI Web中图像浏览器的使用
2019独角兽企业重金招聘Python工程师标准>>> Kendo UI Web中的图像浏览器在默认的情况下会打开一个简单的对话框,如下图所示,方便用户键入或者是粘贴图片的URL以及 ...

Kendo UI 框架 HTML5

Web Demos

Mobile Demos

DataViz Demos

Kendo UI 框架 HTML5相关推荐

最新文章

热门文章