cookie 全站换肤

2024-08-27

cookie换肤功能

<div class="selectSkin"> <input id="red" class="themeBtn" type="button" value="红色"> <input id="yellow" class="themeBtn" type="button" value="黄色"> &

cookie记忆换肤功能实战Demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery换肤+cookie记忆功能</title> <link rel="stylesheet" href="../css/style.css" media="screen"

jquery.Cookies.js /** * Cookie plugin * * Copyright (c) 2006 ziqiu.zhang * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * 使用举例: //注: 写入时,subName参数请传递空值或null

用js来实现页面的换肤功能(带cookie记忆)

用js来实现页面的换肤功能 js实现换肤功能的实现主要是通过利用js控制CSS来实现的.大致的实现原理是这样的, 1.先定义一个页面基本样式style.css来确定div的宽高等属性,使得整个页面的DIV元素有一个基本的框架结构. 2.再定义一系列的样式color1.css,color2.css……用来确定DIV元素的背景颜色,边框颜色等等. 3.用JS函数来决定调用哪个样式,并把调进来的样式写进cookie,这样就可以达功能. 例如:我们的页面结构如下: <div id="header&

网页换肤,模块换肤,jQuery的Cookie插件使用（转）

具体效果如下: 第一次加载如下图: 然后点击天蓝色按钮换成天蓝色皮肤如下图: 然后关闭网页重新打开或者在打开另一个网页如下图: 因为皮肤用Cookie保存了下来,所以不会重置具体的实现代码如下: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" />

jquery.cookie中的操作之与换肤

jquery.cookie.js的插件,插件的源代码如下: /** * Cookie plugin * * Copyright (c) 2006 Klaus Hartl (stilbuero.de) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * */ /** *

锋利的jQuery-5--网页换肤

网页换肤原理:通过调用不同的样式表文件来实现不同的皮肤,并且将切换好的皮肤计入cookie. 例子:通过点击上边的颜色设置下边显示的背景色. html代码:  <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" /> <ul id

【转】Javascript+css 实现网页换肤功能

来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href. <link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" /> 2.皮肤选择按钮(后台为每个li添

js实现换肤效果

一,js换肤的基本原理基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 那么基本工作流程就出来了:访问网页--JS 读取 Cookie --如果没有,使用默认皮肤--如果有,使用指定皮肤:用户点击换肤选项--JS 控制替换对应的 CSS 样式表--将皮肤选项写进 Co

Android App插件式换肤实现方案

背景目前很多app都具有换肤功能,用户可以根据需要切换不同的皮肤,为使我们的App支持换肤功能,给用户提供更好的体验,在这里对换肤原理进行研究总结,并选择一个合适的换肤解决方案. 换肤介绍 App换肤主要涉及的有页面中文字的颜色.控件的背景颜色.一些图片资源和主题颜色等资源. 为了实现换肤资源不与原项目混淆,尽量降低风险,可以将这些资源封装在一个独立的Apk资源文件中.在App运行时,主程序动态的从Apk皮肤包中读取相应的资源,无需Acitvity重启即可实现皮肤的实时更换,皮肤包与原安装包相

Android动态换肤（二、apk免安装插件方式）

在上一篇文章Android动态换肤(一.应用内置多套皮肤)中,我们了解到,动态换肤无非就是调用view的setBackgroundResource(R.drawable.id)等方法设置控件的背景或者文字等资源,跟踪源码看看这些方法都是怎么根据资源ID找到对应的资源的: View: @RemotableViewMethod public void setBackgroundResource(int resid) { if (resid != 0 && resid == mBackgroun

vue2.0-基于elementui换肤[自定义主题]

0. 直接上预览链接 vue2.0-基于elementui换肤[自定义主题] 1. 项目增加主题组件在项目的src/components下添加skin文件夹 skin文件获取地址 2. 项目增加自定义主题自定义添加主题下载地址 https://elementui.github.io/theme-chalk-preview/#/zh-CN 3. 项目引入和使用选择你想要随主题改变的element元素在src/global/themeArray里面,不希望随主题改变的可以注释掉选择皮肤之后

JS实现网页换肤功能效果

网页换肤的基本原理使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 基本流程如下: 上面是使用流程图来描述下,自从工作以来很小画这样的流程图如果流程图画错了或者画的不够好请大家原谅! 先来看看效果图吧! 我只是做个demo 来实现这样一个效果!假如页面上一进来的时候有这么四个按钮分别代表不同

angular2中一种换肤实现方案

思路:整体思路是准备多套不同主题的css样式.在anguar项目启动时,首先加载的index.html中先引入一套默认的样式.当我们页面有动作时再切换css. 可以通过url传参触发,也可以通过button触发.下面演示的是url传参切换.button同理,只要调用有同的方法触发就行. 首先,index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8

基于js的网页换肤（不需要刷新整个页面，只需替换css文件）

1. [代码][JS]代码 <HTML><HEAD><link ID="skin" rel="stylesheet" type="text/css"><TITLE>换肤技术</TITLE><SCRIPT LANGUAGE=javascript><!--function SetCookie(name,value){ var argv=SetCookie.ar

5.2 《锋利的jQuery》jQuery对表格的操作（选项卡/换肤）

表格隔行变色以及单选/复选表格展开关闭表格筛选字体变大/缩小选项卡网页换肤 tip1: $("tr:odd")和$("tr:even")选择器索引是从0开始的,因此第1行是偶数 1.表格隔行变色以及单选/复选 .even{background-color: #fff38f;} /*偶数行样式*/ .odd{ background-color: #dcdcdc;} /*奇数行样式*/ .selected{ background-color:#ff4136;

有点激动，WPF换肤搞定了！

一如既往没废话! wpf桌面应用开发都是window内引入很多个UserControl. 如果你有通过不同颜色来换肤的需求,那么下面我就将整个过程! 分2个步骤: 1.主窗体背景色替换: 2.同时界面内部部分控件(如:Button)也同步换色: 那么下面开始编码: window窗体背景色切换: 如图,是一个Button群,每个按钮都代表一个颜色对应的代码: <Button Grid.Row="0" Grid.Column="0" Width="20

Android换肤技术总结

原文出处: http://blog.zhaiyifan.cn/2015/09/10/Android%E6%8D%A2%E8%82%A4%E6%8A%80%E6%9C%AF%E6%80%BB%E7%BB%93/ 背景纵观现在各种Android app,其换肤需求可以归为白天/黑夜主题切换(或者别的名字,通常2套),如同花顺/自选股/天天动听等,UI表现为一个switcher. 多种主题切换,通常为会员特权,如QQ/QQ空间. 对于第一种来说,目测应该是直接通过本地theme来做的,即所有图片/

换肤系统（oocss方式）

近期想做一个换肤系统,参考过Bootstrap系统,思前想后,内容不难,但就是理不清楚,主要是换肤系统的css如何设计,怎样设计可重用性最好,后期更方便修改和维护,还有一个最头疼的就是怎么给css进行命名,没有一个系统的,清晰的,一目了然的命名恐怕自己做到最后也都忘了.今天看到咱们博客上的一篇文章,受益良多,面向对象CSS(OOCSS),原谅我才疏学浅,2008年就被提出来了,我现在才第一次见这个名词.虽然还有人没听过这个名词,但其实也许自己已经用过这个概念和方式,它不是针对换肤系统被提出的概念

WPF中使用DynamicResource实现换肤

这篇将介绍使用DynamicResource实现动态的界面切换功能.熟悉WPF的园友应该已经猜到了实现方式,简而言之就是动态替换DataTemplate,ControlTemplate,Style等等UI相关的属性. 那么使用DynamicResource能让UI动态到什么程度呢?可以说,心有多大,就可以做多大,只要你想得到,就可以做出来. 下面以展示层次数据结构为例,实现了运行时切换数据显示界面结构的功能.先来看一下要显示的数据,是一个XML文件. <earth> <country n