Extjs换肤+cookie皮肤记忆功能
http://www.myext.cn/kaifa/a_102.html Ext之家
<title>无标题页</title>
<link rel="Stylesheet" type="text/css" href="http://www.cnblogs.com/ExtJS/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.cnblogs.com/ExtJS/ext-all.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ExtJS/ext-lang-zh_CN.js"></script>
</head>
function makeCookie()
{
var themes =
[
['default', '默认'],
['gray', '灰色'],
['green', '绿色'],
['olive', '橄榄绿'],
['pink', '粉色'],
['purple', '紫色'],
['slate', '暗蓝色']
];
var cbThemes = new Ext.form.ComboBox
({
id: 'cbThemes',
store: themes,
width: 80,
typeAhead: true,
triggerAction: 'all',
emptyText:'界面主题',
selectOnFocus:true
});
cbThemes.on
({
"select":function(field,newValue,oldValue)
{
var css = newValue.data.value;
//设置cookies
var date=new Date();
date.setTime(date.getTime()+30*24*3066*1000);
document.getElementsByTagName("link")[1].href=
"http://www.cnblogs.com/ExtJS/resources/css/xtheme-"+css+".css";
document.cookie="css="+css+";expires="+date.toGMTString();
}
});
var win = new Ext.Window
({
title:"测试更换皮肤窗口",renderTo:document.body,width:500,height:300,x:300,y:100,
bbar:['更换皮肤','',cbThemes]
});
win.show();
document.body.onload = function()
{
var cookiesArr=document.cookie.split(";");
var css;
for(var i=0;i<cookiesArr.length;i++)
{
var arr=cookiesArr[i].split("=");
if(arr[0]=="css")
{
css=arr[1];
break;
}
}
document.getElementsByTagName("link")[1].href=
"http://www.cnblogs.com/ExtJS/resources/css/xtheme-"+css+".css";
};
}
Ext.onReady(makeCookie);
Extjs换肤+cookie皮肤记忆功能的更多相关文章
- Extjs grid分页多选记忆功能
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候 ...
- cookie记忆换肤功能实战Demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Android App插件式换肤实现方案
背景 目前很多app都具有换肤功能,用户可以根据需要切换不同的皮肤,为使我们的App支持换肤功能,给用户提供更好的体验,在这里对换肤原理进行研究总结,并选择一个合适的换肤解决方案. 换肤介绍 App换 ...
- jquery换肤
<script src="script/jquery-2.1.0.js"></script> <link href="style/ ...
- 用js来实现页面的换肤功能(带cookie记忆)
用js来实现页面的换肤功能 js实现换肤功能的实现主要是通过利用js控制CSS来实现的.大致的实现原理是这样的, 1.先定义一个页面基本样式style.css来确定div的宽高等属性,使得整个页面的D ...
- cookie换肤功能
<div class="selectSkin"> <input id="red" class="themeBtn" typ ...
- 【转】Javascript+css 实现网页换肤功能
来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作 ...
- JS实现网页换肤功能效果
网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...
- jquery.cookie中的操作之与换肤
jquery.cookie.js的插件,插件的源代码如下: /** * Cookie plugin * * Copyright (c) 2006 Klaus Hartl (stilbuero.de) ...
随机推荐
- MJRefresh
automaticallyChangeAlpha 下拉或上拉时,文字颜色逐渐加深
- js动态添加file控件
<html></head><script language="javascript" type="text/ecmascript" ...
- initWithNibName与viewDidLoad的执行关系以及顺序
转载自:http://www.java123.net/v/380331.html 一个ViewController,一般通过init或initWithNibName来加载.二者没有什么不同,init最 ...
- Win7+QTP10.0+IE9无法识别对象的解决方法
在WIN7和IE9环境下使用QTP10,会出现识别不了web对象的情况,具体表现为:添加对象,先打开对象库,再打开IE,点击Add object to local 后,出现白色手指,将其拖拉到百度首页 ...
- Python3基础 list(enumerate()) 将一个列表的每一个元素转换成 带索引值的元组
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
- linux下提示bash:command not found
新安装的linux系统,如果进行精简安装可能会出现bash:command not found 的提示,大家在安装的时候可以选择默认安装basic的组件,一般即可.到时候可以再升级. 如果新装的系 ...
- HDU 4638 (莫队)
题目链接:Problem - 4638 做了两天莫队和分块,留个模板吧. 当插入r的时候,设arr[r]代表r的位置的数字,判断vis[arr[r-1]]和vis[arr[r+1]]是否访问过,如果两 ...
- python赋值和拷贝----一切皆对象,参数皆引用
摘要: 1 python中的一切事物皆为对象,并且规定参数的传递都是对象的引用. 2 python参数传递都是"传对象引用"方式.实际上相当于c++中传值和传引用的结合. 3 如 ...
- PAT (Advanced Level) 1082. Read Number in Chinese (25)
模拟题. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #in ...
- APPIUM安装与搭建Q&A
APPIUM安装与搭建Q&A Q1:在线安装TESTNG插件时,出现安装失败,提示:Cannot complete the install because one or more requir ...