dwz中jqGrid的主题变更

前言：本篇来介绍如何对dwz框架中的jqGrid组件变更主题。

第一步：从jquery ui官网下载主题，我挑选了三种比较常用的主题，然后放在如下目录中

第二步：在index.jsp文件表头中增加如下代码，作用是加入jqGrid的CSS布局

<!-- jqueryui -->
<link href="${ctx}/common/jqueryui/default/jquery-ui.css" rel="stylesheet" type="text/css" />

第三步：在dwz.theme.js文件中增加对应内容，作用是当点击主题色调变化时进行对应css样式的变更，这样就会对jqGrid的主题风格进行变化了

var _jqueryuiHref = op.jqueryuiBase + "/#theme#/jquery-ui.css";return this.each(function(){var jThemeLi = $(this).find(">li[theme]");var setTheme = function(themeName){// 设置dwz颜色$("head").find("link[href$='style.css']").attr("href", _themeHref.replace("#theme#", themeName));// 设置jqueryui颜色// 获取head表头jquery对象，从其中获取属性值以jquery-ui.css结束的link标记，替换href属性中的变量theme为对应的主题风格$("head").find("link[href$='jquery-ui.css']").attr("href", _jqueryuiHref.replace("#theme#", themeName));

实现效果：当在主页中切换主题时，jqgrid的颜色方案也进行了变更，见如下效果

dwz中jqGrid的主题变更相关推荐

dwz嵌入jqGrid
前言:本篇主要介绍如何在dwz框架中嵌入jqGrid组件,因为dwz自带的表格组件功能不够全面,而jqGrid使用起来的确非常的不错,于是我们来看看两者结合起来有什么不一样吧. 第一步:准备jqgri ...
项目管理中的客户需求变更时需求分析和解决方法
一.令人烦恼的需求变更作为一个软件项目经理,在项目开发进行中,你是否遇到过这样的问题:客户的一个电话,就推翻了之前你与客户.与你自己的开发团队,经过再三讨论而确认定下来的需求.之后你就重新开始了和客 ...
ubuntu19.10的xfce4中的Default-xhdpi主题失去了光滑效果
ubuntu18.10中的Default-xhdpi主题是有光滑效果的. 如下: 但是Ubuntu18.10中这个效果不见了. 这是因为主题里面的文件被修改了. 所以只要替换/usr/share/th ...
如何在Angular Material中制作自定义主题
by Charlee Li 通过李李如何在Angular Material中制作自定义主题 (How to make a custom theme in Angular Material) Angu ...
全方位地介绍JavaScript开发中的各个主题《JavaScript编程全解》(好书分享更新中)
JavaScript编程全解作者: ［日］井上诚一郎 / ［日］土江拓郎 / ［日］滨边将太出版社: 人民邮电出版社译者: 陈筱烟内容简介 · · · · · · 本书全方位地介绍了Java ...
车联网 TSP 平台场景中的 MQTT 主题设计
本文作者:田桢,前上汽大众平台架构师,现为中科创达汽车云技术负责人前言在车联网生态中,TSP(Telematics Service Provider)平台在产业链中居于核心地位,上接汽车.车载设备 ...
android设置主题的方法,Android_修改Android App样式风格的方法，android中可以自定义主题和风格 - phpStudy...
修改Android App样式风格的方法 android中可以自定义主题和风格.风格,也就是style,我们可以将一些统一的属性拿出来,比方说,长,宽,字体大小,字体颜色等等.可以在res/value ...
手把手教你实现在Monaco Editor中使用VSCode主题
背景笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持 ...
DWZ中navTab使用解析
这几天老师让我看一下DWZ,看了一下给的文档,发现是一头雾水,只讲了怎么用,但是却不知道它是怎么个流程来实现的,于是便自己对着demo看了一下具体的实现过程,下面给大家分析一下. 先贴一下我仿照dem ...

dwz中jqGrid的主题变更

第一步：从jquery ui官网下载主题，我挑选了三种比较常用的主题，然后放在如下目录中

第二步：在index.jsp文件表头中增加如下代码，作用是加入jqGrid的CSS布局

实现效果：当在主页中切换主题时，jqgrid的颜色方案也进行了变更，见如下效果

dwz中jqGrid的主题变更相关推荐

最新文章

热门文章