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. 图片跟着鼠标动js

    <!DOCTYPE html><html><head> <title>duisgf</title> <meta charset=&qu ...

  2. hdu 2189

    //hdu2189   题意大概就是给n个人,分成多组,要求每组人数都是素数,求有多少种... 解法就是先把150以内的素数全部存入一个数组,然后利用a[j+b[i]]+=a[j];这道题一开始没理解 ...

  3. Ecstore内置表单验证?

       

  4. memcache锁,解决查询过多email查询为空的问题

    /* 设置memcache锁,解决查询过多email查询为空的问题 Begin */ $mmc = new Memcache; $mmc->connect('127.0.0.1', 11211) ...

  5. centos安装vim以及设置

    原文链接:http://www.xiaohuai.com/2884 Centos里的VI只默认安装了vim-minimal-7.x.所以无论是输入vi或者 vim查看文件,syntax功能都无法正常启 ...

  6. 系统管理中 bash shell 脚本常用方法总结

    在日常系统管理工作中,需要编写脚本来完成特定的功能,编写shell脚本是一个基本功了!在编写的过程中,掌握一些常用的技巧和语法就可以完成大部分功能了,也就是2/8原则 1. 单引号和双引号的区别 单引 ...

  7. Swift - 34 - 闭包的基础语法

    //: Playground - noun: a place where people can play import UIKit // 初始化一个整数数组 var arr = [1, 3, 5, 7 ...

  8. 《Linux内核分析》 week6作业-Linux内核fork()系统调用的创建过程

    一.进程控制块PCB-stack_struct 进程在操作系统中都有一个结构,用于表示这个进程.这就是进程控制块(PCB),在Linux中具体实现是task_struct数据结构,它主要记录了以下信息 ...

  9. 在Activity之间如何传递数据,请尽可能说出你所知道的传递数据的方法,并详细描述其实现过程。

    在Activity之间如何传递数据,请尽可能说出你所知道的传递数据的方法,并详细描述其实现过程. 答案:可以通过Intent对象.静态变量.剪切板和全局对象进行数据传递,具体的数据传递方法如下. 1. ...

  10. 安装SQL Server 那些事儿

    SQL版本: Microsoft SQL Server2008 R2 RTM - Express with Advanced Services 错误描述: System.Configuration.C ...