主题样式切换代码：jQuery Theme Switcher

最新推荐文章于 2023-02-10 00:26:48 发布
最新推荐文章于 2023-02-10 00:26:48 发布
阅读量1.2k 收藏
点赞数
分类专栏： 编程设计 文章标签： 主题样式 切换 代码 jquery theme

是不是经常看到有些网站带有切的主题的功能？该功能可以方便用户切换自己喜欢的样式，让用户可以选择自己喜欢的主题，是一个不错的用户体验。

今天我们为大家分享一个能实现这个切换样式特效的插件：jQuery Theme Switcher，使用它你就能方便的为你的网站定制多种不同的主题啦！

插件名称：jQuery Theme Switcher
网站地址：http://archin-modi.github.io/Jquery-Theme-Switcher/

演示：

使用方法

STEP 1: 载入 jQuery 库和 jQuery Theme Switcher 插件代码

<link href=”Jquery.Theme.Switcher.css” rel=”stylesheet” />
<script src=”Jquery.Theme.Switcher.js”></script>

STEP 2:  html代码

把要改变样式的代码放在 id=“Layout_Skin” 下

<body>
  <div id=”Layout_Skin”>
    /*这里添加你的代码…*/
  </div>
</body>

STEP 3:  添加对应 Class 名称，分别有改变背景和文字颜色的 Class，根据需求添加到你的HTML 标签上。

class="Switcher" 为改变背景颜色；
class="Switcher-text" 为改变文字颜色；

STEP 4: 添加 JS 代码，设置你对应的样式

$(document).ready(function () {
  $(‘body’).Archin({
    backgroundColor: “Enter Your Color”,
    TextColor: ‘Enter Your Color’,
    ButtonbackgroundColor: ‘Enter Your Color’,
    BoxBGimages: ‘image Path’
  });
});

下载代码或具体使用方法请参考 jQuery Theme Switcher 的官方网站。


原文地址：

http://it.lindukj.cn/archives/1358

clschen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Style Switcher 使用jQuery 切换网页风格
05-12
内容索引:脚本资源,jQuery,样式切换,风格选择　　Style Switcher 是一款使用jQuery 进行网页风格切换的例子，可能看上去不太直观，实例仅给出了使得jQuery控制不同的CSS片段，最后控制网页中某段文字的显示方式，以及字体大小等属性，本实例是面向Ajax初学者的，相对简单。
无涯教程-jQuery - 主题切换
最新发布
无涯教程
07-22 51
jQuery具有两个不同的样式主题，分别为A和B，每个按钮，条形图，内容块等都有不同的颜色。J查询主题化的语法如下所示-<divdata-role"page"data-theme"a|b"一个简单的A主题Example，如下所示-<html><head><metaname"viewport"content<linkrelhref<scriptsrc</script><scriptsrc</script>
jquery的Theme和Theme Switcher使用总结
月之神
07-16 2891
一、引入jquery主题theme 在head中引用jquery主题的CSS链接http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/base/jquery-ui.css还有许多其他不同的主题：base, black-t
几种实现主题切换的方式
qq_42880714的博客
02-10 2618
几种实现主题切换的方式
vue 一键换肤（切换主题样式）
朝阳39的博客
01-04 9567
目录 方法一：动态修改全局CSS变量 方法二：切换主题CSS文件 方法三：切换顶级CSS类名 方法一：动态修改全局CSS变量 1. 在全局css文件或 app.vue中定义全局CSS变量 <style> :root{ --theme_bg_color:red } </style> 2. 使用全局CSS变量定义元素样式 <style scoped> .myTitle{ background: var(--theme..
jquery-switcher:jQuery 切换器插件
06-18
#jQuery 开关插件###预设列表使用包裹默认为真地位默认 0 左标签默认开启右标签默认关闭打开回调，状态变为 1 时调用开关回调，状态变为0时调用###默认调用 $ ( '#switch' ) . switcher ( ) ; ###With 自定义文本...
GC jQuery UI theme switcher:jQuery插件提供了一个jQuery UI对话框来更改UI主题CSS-开源
04-25
jQuery UI CSS框架的主题切换器工具。 使用jQuery UI对话框更改css样式表，您可以使用按钮或html页面中的链接调用该对话框。 在您的网站空间中完全实现。
jquery的Theme和Theme Switcher使用小结
10-28
jquery的Theme和Theme Switcher使用总结，学习jquery Theme的朋友可以参考下。
Jquery switcher样式表切换插件css样式表切换实现
10-31
Jquery switcher样式表切换插件css样式表切换实现 Jquery switcher样式表切换插件css样式表切换实现
theme-toggle:CSS Theme Switcher教程的源代码-Switch source code
03-24
盖茨比的默认启动器 使用此默认样板启动您的项目。 该入门工具随附了主要的Gatsby配置文件，您可能需要使用React的快速应用生成器来快速启动和运行。... 打开源代码并开始编辑！ 您的站点现在在http://localhost:8000
jQuery页面主题颜色自由切换
12-10
本例可实现页面的主题颜色自由切换的效果。
jQuery实现无刷新切换主题皮肤功能
03-21
NULL 博文链接：https://aguang520.iteye.com/blog/936191
Theme主题应用工具ThemeSwitcher1.0汉化版.zip
09-04
软件介绍: 一款一键应用theme文件系统主题的小工具，功能比较单一，点击“应用主题_浏览*.theme文件”，选择要应用的主题文件，再点击确定即可。
jquery 主题颜色切换+窗体移动+上下文菜单
06-01
jquery 主题颜色切换+窗体移动+上下文菜单
vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解（纯干huo）
热门推荐
qq_42753705的博客
12-26 1万+
方式1：定义全局的CSS变量 App.vue： <style> /* 定义全局的css变量 */ :root { /* 背景色 */ --theme_bg_color: red; /* 按钮颜色 */ --theme_button_color: yellowgreen; } </style> demo.vue（css）： <style scoped> /* 使用全局的css变量设置颜色 */ .myButton { background: va.
theme-switcher:在一个主题和另一个主题之间切换。 非常适合像Solarized这样的深色主题
05-02
原子主题切换器 当您按下某个键或访问其菜单项时，在一组语法和UI主题之间切换，而在另一组语法和UI主题之间切换。 非常适合诸如Solarized之类的主题，该主题提供您可能希望在不同照明条件下切换到的明暗版本。 您需要选择一个与语法主题搭配看起来不错的UI主题。 默认值还不错。 您可以在程序包设置中覆盖默认设置。 使用语法和UI主题的程序包名称（例如： unity-ui ）。 默认情况下，将其映射到F12 。
animated_theme_switcher:颤振动画主题切换器
05-01
animation_theme_switcher 动画主题切换器。 该库从stackoverflow问题开始，入门在您的pubspec.yaml依赖项中添加animation_theme_switcher：“ ^ 2.0.1”。 dependencies : animated_theme_switcher : " ^2.0.1 ...
Java抽象工厂模式手机主题切换代码
03-26
抽象工厂模式是一种创建型设计模式，用于创建一组相关或依赖对象。在手机主题切换场景中，我们可以使用抽象工厂模式来创建不同风格的主题。 首先，我们需要定义一个抽象工厂类 `ThemeFactory`，它定义了创建不同类型主题的抽象方法： ``` public abstract class ThemeFactory { public abstract Wallpaper createWallpaper(); public abstract IconPack createIconPack(); } ``` 然后，我们需要定义具体的工厂类 `LightThemeFactory` 和 `DarkThemeFactory`，它们分别创建浅色和深色主题： ``` public class LightThemeFactory extends ThemeFactory { @Override public Wallpaper createWallpaper() { return new LightWallpaper(); } @Override public IconPack createIconPack() { return new LightIconPack(); } } public class DarkThemeFactory extends ThemeFactory { @Override public Wallpaper createWallpaper() { return new DarkWallpaper(); } @Override public IconPack createIconPack() { return new DarkIconPack(); } } ``` 接下来，我们需要定义主题元素的抽象类和具体实现类。例如，我们可以定义 `Wallpaper` 和 `IconPack` 抽象类，以及它们的具体实现类 `LightWallpaper`、`DarkWallpaper`、`LightIconPack` 和 `DarkIconPack`： ``` public abstract class Wallpaper { public abstract String getStyle(); } public class LightWallpaper extends Wallpaper { @Override public String getStyle() { return "Light"; } } public class DarkWallpaper extends Wallpaper { @Override public String getStyle() { return "Dark"; } } public abstract class IconPack { public abstract String getStyle(); } public class LightIconPack extends IconPack { @Override public String getStyle() { return "Light"; } } public class DarkIconPack extends IconPack { @Override public String getStyle() { return "Dark"; } } ``` 最后，我们可以使用抽象工厂模式来切换手机主题。例如，我们可以创建一个 `ThemeSwitcher` 类，它接受一个 `ThemeFactory` 参数，根据工厂创建不同的主题元素： ``` public class ThemeSwitcher { private Wallpaper wallpaper; private IconPack iconPack; public ThemeSwitcher(ThemeFactory factory) { wallpaper = factory.createWallpaper(); iconPack = factory.createIconPack(); } public String getWallpaperStyle() { return wallpaper.getStyle(); } public String getIconPackStyle() { return iconPack.getStyle(); } } ``` 使用示例： ``` ThemeFactory lightFactory = new LightThemeFactory(); ThemeFactory darkFactory = new DarkThemeFactory(); ThemeSwitcher lightTheme = new ThemeSwitcher(lightFactory); System.out.println(lightTheme.getWallpaperStyle()); // 输出 "Light" System.out.println(lightTheme.getIconPackStyle()); // 输出 "Light" ThemeSwitcher darkTheme = new ThemeSwitcher(darkFactory); System.out.println(darkTheme.getWallpaperStyle()); // 输出 "Dark" System.out.println(darkTheme.getIconPackStyle()); // 输出 "Dark" ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值