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) ...
随机推荐
- div定位
1.float定位带来的问题<html> <head> <title>div浮动引发的问题</title> </head> <styl ...
- Qt5:窗口各类位置
在Qt程序中获取窗口位置的函数有 geometry() , frameGeometry() , pos() ,x() , y()等 下面来看看这些函数的区别 还有另外两个函数 size() ...
- 进程间通信——FIFO(多个客户进程,一个服务进程)
FIFO简介 FIFO就是Unix的一种复合POSIX标准的进程间通信机制.他又称为命名管道,跟管道的不同点是,每个FIFO都有一个路径名与之关联. FIFO虽然有路径名,但是他这中文件是在内核态(管 ...
- Sping中的IOC四种注解的简单记录
@Component 通用注解,不推荐使用,要用的话,任何类的头上都能使用,但是这个类到底是干嘛用得就不知道了. @Controller 控制层使用,也就是MVC中的C,主要的时候使用的时候注意配合@ ...
- Left/Right/Inner Join用法和区别
left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...
- 修炼dp( 2 )
P1084 数字三角形4 题解:dp+dfs. #include <iostream> #include <cstdio> #include <algorithm> ...
- Linux下VNC配置多个桌面和修改密码 不会当系统重启vnc失效
1:vncserver 2:iptables -I INPUT -p tcp --dport 5901 -j ACCEPT 客户端方式 3:iptables -I INPUT -p tcp --d ...
- 深度学习框架Caffe的编译安装
深度学习框架caffe特点,富有表达性.快速.模块化.下面介绍caffe如何在Ubuntu上编译安装. 1. 前提条件 安装依赖的软件包: CUDA 用来使用GPU模式计算. 建议使用 7.0 以上最 ...
- linux下利用curl监控web应用状态
监控机器列表文件: server.list 建立监控脚本: webstatus.sh #!/bin/sh monitor_dir=/home/admin/monitor/ #Log记 ...
- 关于 HTML5、Jquery、Phonegap 跨域问题的研究
近期研究Phonegap的相关技术,遇到了服务资源访问的跨域.经过尝试使用服务器端的代理,Phonegap打包后不能够访问到相应资源.在搜索引擎的帮助下,找到了Jquery的jsonp的方式,尝试发现 ...