dwz中jqGrid的主题变更
2014-11-12 10:13
89 查看
前言:本篇来介绍如何对dwz框架中的jqGrid组件变更主题。
第三步:在dwz.theme.js文件中增加对应内容,作用是当点击主题色调变化时进行对应css样式的变更,这样就会对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的主题变更
- [DZ平台]主题变更
- [DZ平台]主题变更
- DWZ (JUI) 教程 主题切换原理
- 解决dwz的jqgrid请求重复提交
- dwz之jqgrid请求重复提交bug修复
- Windows下Vim主题变更
- Dwz设置默认主题(theme)
- dwz中对jqGrid设置a标签
- 下一个研究主题:需求变更流程
- dwz中对jqGrid设置a标签
- DWZ (JUI) 教程 主题切换原理
- 从需求变更唤醒植物人程序员说开去
- 在主题中使用WordPress 3.8 的 dashicons 图标
- 大道至简——Hexo简洁主题推荐
- 分享50张非常精美的Apple主题桌面壁纸(下篇)
- FFmpeg API 变更记录
- WordPress博客系统外部主题安装
- jqGrid与Struts2的结合应用(一) ------ 显示基本Grid表格 .
- 票据已汇款 风险解除无法变更状态为“结清”