1、概述:

  在网上kendo ui教程中示例在演示的时候引用的css样式为kendo.common.min.css与kendo.default.min.css这两个外部样式,大家有没有发现,这两个样式在选中的时候会出现一个黄色的选中条,很难看(当然排除配色需要用到的黄色的时候),多数情况下我们使用kendo ui是不会使用这个黄色的选中效果的,如何修改呢?

2、引入CSS样式:

  

<link href="css/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="css/kendo.default.min.css" rel="stylesheet" type="text/css">

以kendo ui中的panelbar为例,我们来看一下效果:

看到这个黄色的选中条了吧,是不是不太符合我们平时的审美呢?

3、如何改变选中样式:

  其实kendo ui为我们提供了多种CSS样式选择的方案,在我们下载kendo ui的压缩包时,在styles这个文件夹内我们会看到很多CSS样式,初学者可能不知道它们都是做什么的,那么我来告诉大家,我们如果要改变这个选中样式,我们只需要改变我们引入的CSS文件就可以了,在styles文件夹下,找到kendo.silver.min.css这个文件,将引入kendo.default.min.css这条语句删除就可以了:

 <link href="css/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="css/kendo.silver.min.css" rel="stylesheet" type="text/css">

还是以panelbar为例,我们来看下效果:

是不是好看很多,其实kendo ui还给我们提供了很多种选择方案,这里就不做一一介绍了,下面附上几个效果图:

  (1)、kendo.highcontrast.min.css

      

  (2)、kendo.moonlight.min.css:

      

  (3)、kendo.black.min.css:

      

4、总结:

  关于kendo ui样式得介绍就先到这里,上面又演示了几个CSS样式,kendo ui的样式有很多,大家可以去试试各种样式,挑选一个满意的。

关于kendo ui的使用改变颜色方式的更多相关文章

  1. Kendo UI Widgets 概述

    UI Widgets 概述 Kendo UI 是基于 jQuery 库开发的,Kendo UI widgets 是以 jQuery 插件形式提供的.这些插件的名称基本上都是以 kendo 作为前缀.比 ...

  2. Kendo UI Grid 使用总结

    Kendo UI Grid控件的功能强大,这里将常用的一些功能总结一下. Kendo UI Grid 固定列 在使用Gird控件显示数据时,如果数据列过多,会出现横向滚动条,很多情况下,我们希望某些列 ...

  3. iOS10 UI教程基改变视图的外观与视图的可见性

    iOS10 UI教程基改变视图的外观与视图的可见性 视图是应用程序的界面,是用户在屏幕上看到的对象.用户可以通过触摸视图上的对象与应用程序进行交互,所以视图界面的优劣会直接影响到了客户体验的好坏.和视 ...

  4. HTML5 UI框架Kendo UI Web中如何创建自定义组件(二)

    在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...

  5. JQuery Kendo UI使用技巧总结

    Kendo UI开发总结 By Gloomyfish on 2013-04-25 在Grid中支持分页刷新:            scrollable: {virtual : true }, 在Gr ...

  6. Kendo UI Grid 批量编辑使用总结

    项目中使用Kendo UI Grid控件实现批量编辑,现在将用到的功能总结一下. 批量编辑基本设置 Kendo Grid的设置方法如下: $("#grid").kendoGrid( ...

  7. 集成 Kendo UI for Angular 2 控件

    伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免费使用. 官方站点:Kendo UI for Ang ...

  8. kendo ui 富文本编辑控件 Editor 实现本地上传图片,并显示

    富文本编辑的组件有很多,大名鼎鼎的KENDO UI中自然也有,但是默认功能中,只能包含网络图片, 而如果要实现本地上传图片,KENDO UI也提供了相应的功能,但必须实现KENDO规定的多个接口, 而 ...

  9. HTML5 UI框架Kendo UI Web教程:创建自定义组件(三)

    Kendo UI Web包 含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在前面的2篇文章<HTML5 Web app开发工具Ke ...

随机推荐

  1. 洛谷 P1412 经营与开发

    /* 粘一下开始写的暴力吧 虽然没啥价值 */ #include<iostream> #include<cstdio> #include<cstring> #inc ...

  2. bootstrap初探2

    控制是否显示:visible-(lg | md | sm |sx)-(block | inline | inline-block), hidden-(lg | md | sm |sx) <!DO ...

  3. css3 3D变换和动画

    3D变换和动画 建立3D空间,transform-style: preserve-3d perspective: 100px; 景深 perspective-origin:center center ...

  4. libthrift0.9.0解析(三)之TProtocol&TTransport

       以上是transport和protocol的类图和结构图. transport封装了底层的传输通道,主要有read/write.open/close等基本的读写方法,而且都是对于二进制数据. p ...

  5. 武汉科技大学ACM:1009: 华科版C语言程序设计教程(第二版)习题5.12

    Problem Description 这天老师照例给小豪出了一道题目:老师给小豪一个字符串,让小豪将该字符串逆序输出. Input 第一行包括一个T,表示有多少组测试数据: 接下来T行,每行包括一个 ...

  6. sql查询每门课程成绩最高的学生

    给出数据库(sco)如下图: 查出每门课程成绩最高的学生 select b.id,b.kemu,b.name,b.chengji from (select kemu,max(chengji) maxc ...

  7. GitHub——如何更新已经fork的代码

    github上有个很方便的功能叫fork,将别人的工程一键复制到自己账号下.这个功能很方便,但有点不足的是,当源项目更新后,你fork的分支并不会一起更新,需要自己手动去更新.下面记录下网上找到的更新 ...

  8. linux vi 使用脑图

  9. 移动端web页面使用position:fixed问题总结

    近期完成了一个新的项目(搜狐直播),其中又涉及到了 fixed(固定位置定位)的问题,在之前的文章<移动Web产品前端开发口诀——“快”>中已经阐述过我对 iScroll 的态度,所以在这 ...

  10. 统计建模与R软件习题二答案

    # 习题2 # 2.1 x=c(1,2,3) y=c(4,5,6) e=c(rep(1,3)) z=2*x+y+e;z x%*%y # 若x,y如答案那样定义为矩阵,则不能用%*%,因为,维数不对应, ...