动态改变页面显示风格办法

最新推荐文章于 2016-01-14 17:37:00 发布

gaolong

最新推荐文章于 2016-01-14 17:37:00 发布

阅读量851

点赞数

分类专栏： WEB应用文章标签：页面风格 extjs

本文链接：https://blog.csdn.net/gaolong/article/details/9051443

版权

WEB应用专栏收录该内容

5 篇文章 0 订阅

订阅专栏

（1）普通动态页面显示风格改变可以针对指定的TAG，通过JS修改其显示风格

（2）可以使用基于js document动态删除和删除css文件。

其中ext提供该办法的是直接使用换肤函数：Ext.util.CSS.swapStyleSheet('theme',"../../resources/css/ext-all-gray-rtl.css");

下面是面向Iframe 页面整体换肤的例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Paging Grid Example</title>

<link rel="stylesheet" type="text/css" href="../shared/example.css" />



<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
<script type="text/javascript" src="paging.js"></script>
<style>
.x-grid-cell-topic b {
display: block;
}
.x-grid-cell-topic .x-grid-cell-inner {
white-space: normal;
}
.x-grid-cell-topic a {
color: #385F95;
text-decoration: none;
}
.x-grid-cell-topic a:hover {
text-decoration:underline;
}
.x-grid-cell-topic .x-grid-cell-innerf {
padding: 5px;
}
.x-grid-rowbody {
padding: 0 5px 5px 5px;
}
</style>
<script>
//就能动态改变显示风格，而且无需重新刷页面
function ch()
{
var iframes=document.getElementsByTagName("iframe");

var iframes=document.getElementsByTagName("iframe");

for(var i=0;i<iframes.length;i++)
{
document.getElementById(iframes[i].id).contentWindow.Ext.util.CSS.swapStyleSheet('theme',"../../resources/css/ext-all-gray-rtl.css");
}

Ext.util.CSS.swapStyleSheet('theme',"../../resources/css/ext-all-gray-rtl.css");

}
</script>
</head>
<body>
<div οnclick="ch();">Paging Grid Example换肤 </div>
<p>This example shows how to create a grid with paging. This grid uses a Ext.data.proxy.JsonP proxy
to fetch cross-domain remote data (from the Ext forums).</p>
<p>Note that the js is not minified so it is readable. See <a href="paging.js">paging.js</a>.</p>
<div id="topic-grid"></div>
<iframe id="test" src="1.html"></iframe>
<iframe id="test2" src="2.html"></iframe>
</body>
</html>

gaolong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态改变页面显示风格办法

（1）普通动态页面显示风格改变可以针对指定的TAG，通过JS修改其显示风格（2）可以使用基于js document动态删除和删除css文件。其中ext提供该办法的是直接使用换肤函数：Ext.util.CSS.swapStyleSheet('theme',"../../resources/css/ext-all-gray-rtl.css"); 下面是面向Ifram
复制链接

扫一扫