详解easyui 切换主题皮肤

2024-08-17 16:04:31

jquery cookie下载地址::http://plugins.jquery.com/cookie/

1.需要导入的文件（我这里的easyui是jquery-easyui-1.6.11版本）

主要实现原理就是换导入css文件,这样就可以实现切换主题皮肤

<!-- 引入easyui css样式 只需引入easyui.css  其中就包含了其他的内容-->
  <link rel="stylesheet" id="easyuiTheme" href="<%=request.getContextPath()%>/jquery-easyui-1.6.11/themes/default/easyui.css" rel="external nofollow" >
  <!-- 引入小图标 -->
  <link rel="stylesheet" href="<%=request.getContextPath()%>/jquery-easyui-1.6.11/themes/icon.css" rel="external nofollow" >
  <!-- 引入jQuery -->
  <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.11.3.js"></script>
  <script src="js/jquery.cookie.js"></script>
  <!-- 引入easyui -->
  <script src="<%=request.getContextPath()%>/jquery-easyui-1.6.11/jquery.easyui.min.js" ></script>
  <!-- 样式转化为中文 -->
  <script src="<%=request.getContextPath()%>/jquery-easyui-1.6.11/locale/easyui-lang-zh_CN.js"></script>

2.前台页面定义了一个按钮（代码）

<div style="position: absolute;right: 14px;top:42px;">
          <div style="padding:5px;">
            <a href="javascript:void(0);" rel="external nofollow" class="easyui-menubutton" data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a>
          </div>
        </div>
        <div id="layout_north_pfMenu" style=" display: none;">
          <div "changeTheme('default');">default</div>
          <div "changeTheme('black');">black</div>
          <div "changeTheme('bootstrap');">bootstrap</div>
          <div "changeTheme('gray');">gray</div>
          <div "changeTheme('metro');">metro</div>
        </div>

3.前台效果图

4.< script>里边写了这个方法：changeTheme

/**
   * 更换EasyUI主题的方法
   * @param themeName
   * 主题名称
   */
  changeTheme = function(themeName) {
    var $easyuiTheme = $('#easyuiTheme');
    var url = $easyuiTheme.attr('href');
    var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
    $easyuiTheme.attr('href', href);
    var $iframe = $('iframe');
    if ($iframe.length > 0) {
      for ( var i = 0; i < $iframe.length; i++) {
        var ifr = $iframe[i];
        $(ifr).contents().find('#easyuiTheme').attr('href', href);
      }
    }
    $.cookie('easyuiThemeName', themeName, {
      expires : 7
    });
  };

5.效果

切换之后效果，我就不一一展示效果了

以上所述是小编给大家介绍的easyui 切换主题皮肤方法详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

EasyUI的DataGrid每行数据添加操作按钮的实现代码

今天做项目的时候,想在easyui的datagrid每一列数据后边都加上一个操作按钮,一开始想在后台拼接字符串用JSON传回,但是我测试之后发现这个方法不管用,在网上搜索了一下,整理如下: 其实要加一行自定义列很简单,在js声明datagrid的时候加上如下代码 {field:'operate',title:'操作',align:'center',width:$(this).width()*0.1, formatter:function(value, row, index){ var str =
详解EasyUi控件中的Datagrid

最近手头有个web项目需要用到第三方控件(EasyUi),用第三方控件做出来的效果毕竟比原生态的要稍微好看那么一点,该项目中有个需求,需要在数据列表中直接编辑数据保存,行话叫做行内编辑. 在讲行内编辑之前,我们需要先了解如何使用EasyUi创建一个DataGrid,当然方式有很多(1.easyui.js,或者直接html代码加easyui的Style),我采用的是JS的方式: 一.使用Js创建DataGrid 上面是效果图, Html代码如下:在页面定义一个table <!--数据展示 -
jquery-easyui关闭tab自动切换到前一个tab

复制代码代码如下: var lastTabs = new Array(); $(function() { /* * cdh 2010.0630 补充,用于退回上次标签页 */ $('#mainTabs').tabs({ onSelect: function(tt) { //移除 tt lastTabs = $.grep(lastTabs, function(n, i) { return n != tt; }); //重新压入,保证最新的在最上面 lastTabs.push(tt); //更
easyui datagrid 表格中操作栏按钮图标不显示的解决方法

jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染解决办法: 使用解析器 Parser(解析器) $.parser.parse(); // 解析所有页面 $.parser.parse('#cc'); // 解析指定节点以上这篇easyui datagrid 表格中操作栏按钮图标不显示的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
Jquery组件easyUi实现选项卡切换示例

本文实例为大家分享了Jquery easyUi选项卡切换效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" hre
Easyui和zTree两种方式分别实现树形下拉框

最近工作中需要用到树形下拉框,因为项目中树形结构使用的是zTree,然后就百度,结果出来效果不好看,后来就试着用了easyui的comboTree,虽然比较好看,但是跟整体的bootstrap风格有点儿不搭.现在贴出来两种方式及效果,以后备用. 方式一,使用zTree 前端代码: <div class="form-group"> <label>点击事件:</label> <input id="selectActionType"
为JQuery EasyUI 表单组件增加焦点切换功能的方法

1.背景说明在使用 JQuery EasyUI 各表单组件时,实际客户端页面元素是由 JQuery EasyUI 生成的,元素的焦点切换,虽然 Tab 键可以正常用,但顺序控制属性 tabindex 不起作用,因为页面看到的元素,是生成的,没有tabindex 属性,而真实的元素被隐藏了.本文通过一个自定义函数,实现Tab 和回车键的焦点切换功能. 2.函数定义通过捕获窗口按件,对回车和Tab键进行了热点切换处理.先根据当前焦点,获取需要tabindex 属性,加1后为下一焦点无素的属性
EasyUI在Panel上动态添加LinkButton按钮

在最近做的一个将原来的旧系统翻新改造的项目中,为了在个别展示位置与原系统一直,研究了一下Easyui的panel面板,在panel的面板中动态添加Linkbuton按钮的编辑方法,在这里做个记录免得自己以后忘了,也为有需求的人指明一条道,代码比较乱,还请大家多多见谅,能实现就行啦,要求不高哟. 言归正传,需求如下图. 看似简单,往panel的title中循环添加linkbutton标签不就得了,其实还有很多问题需要处理,简单描述一下我的思路和步骤. 1.panel的title属性接收类型为字符串
详解easyui 切换主题皮肤

jquery cookie下载地址::http://plugins.jquery.com/cookie/ 1.需要导入的文件(我这里的easyui是jquery-easyui-1.6.11版本) 主要实现原理就是换导入css文件,这样就可以实现切换主题皮肤  <link rel="stylesheet" id="easyuiTheme" href=&q
jQuery无刷新切换主题皮肤实例讲解

主题皮肤切换功能在很多网站和系统中应用,用户可以根据此功能设置自己喜欢的主题颜色风格,增强了用户体验.本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能. 实现该功能的原理就是通过点击定义的主题样式,改变页面当前引用的主题CSS文件,并且将当前的主题样式写入cookie中或者写入数据库中,以便下次该用户重新访问页面时,调用的就是上次设置好的主题样式. 准备主题皮肤样式首先,我准备了三个样式表CSS文件,分别是三种风格的主题皮肤,将其引入页面,放置在页面的<head>之间. <
详解idea切换git账号的两个方法

两个方法可能都行,可能都不行,可能行一个,每个人遇到的问题不一样,自行排查吧方法一:win10/win7凭据管理器处修改! 1.win10点击Cortana小圆圈,输入凭据管理器,点击凭据管理器 win7:`计算机 > 控制面板 > 用户账户和家庭安全 > 凭据管理器 > 普通凭据` 2.在windows凭据的普通凭据下更改对应的凭据(git账号和密码) 方法二:idea中不记住密码在idea的设置中,搜索password,在Passwords中,选择Do not save选项
mongodb 数据库操作详解--创建,切换,删除

mongodb安装就不说了,请参考:centos yum 安装 mongodb 以及php扩展一,创建,切换,删除数据库 [root@localhost zhangy]# mongo MongoDB shell version: 2.4.6 connecting to: tank > use test //创建 or 切换数据库 switched to db test > db.dropDatabase() //删除数据库 { "dropped" : "test
详解C#切换窗口

最近项目不多忙,于是抽点时间巩固下切换窗口问题,感兴趣的朋友跟着小编一起学习吧! 1.第一个方法比较简单,也比较萌,是我最近无意间发现的~ public MainFrom_Client() { InitializeComponent(); SetMainTreadState(); } //先设定主窗体(也就是MainFrom_Client)的透明度和任务栏状态 private void SetMainTreadState() { //这个其实是障眼法!把主窗体(也就是MainFrom_Clien
图文详解MyEclipse更换背景主题的方法

MyEclipse对于广大Java开发者来说,都是运用比较广泛的一种开发工具,可能很多人不知道IDEA,但是对于 MyEclipse和Eclipse ,Java开发者没有不知道的吧? 但是MyEclipse的默认背景色和字体颜色,看久了很容易眼疲劳,所以换换背景色还是挺不错的,下面给大家推荐一个更换背景主题的方案 1.首先打开http://eclipsecolorthemes.org/ 这里有N种配色方案,只需要选择你喜欢的,下载 2.点击下载主题,保存在本地 3.打开你的MyEclipse,按
详解easyui基于 layui.laydate日期扩展组件

本人后端开发码农一个,公司前端忙的一逼,项目使用的是easyui组件,其自带的datebox组件使用起来非常不爽,主要表现在 1.自定义显示格式很麻烦 2.选择年份和月份用户体验也不好网上有关于和 My97DatePicker 结合的例子,但感觉也用的不是很爽. 发现国内的layDate体验非常满意,所以萌生出想把这两个组件组合起来的想法,具体代码如下,本人非前端,所以只是实现了基本功能,大神勿喷哦. easyUI版本:V1.5.2 layDate版本:V5.0 /* 基于laydate日期扩
mongodb 命令行下及php中insert数据详解

前面说了到数据库连接操作,请参考:mongodb 添加用户及权限设置详解对数据库的操作:请参考:mongodb 数据库操作详解--创建,切换,删除下面说一下,数据库表的插入操作 1,命令行下的insert操作 > use test; #切换到test数据库 switched to db test > document=({"title" : "linux命令", "auther" : "tank" }); #定
详解WordPress开发中get_header()获取头部函数的用法

函数意义详解从当前主题调用header.php文件.是不是很简单?好吧,如果你是新手的话这里要提醒一下,这里的get和get_children().get_category中的get略有不同之处. get_header函数声明(定义) 之前写文章很少会写到函数定义的代码,后来自己翻看的时候发现这个习惯不太好,所以决定,只要篇幅允许,就会把函数主题贴出来,方便自己翻看. get_header 函数,声明(定义)的位置,是在 wp=include/general-template.php 文件的第

详解easyui 切换主题皮肤

相关推荐

随机推荐