详解easyui 切换主题皮肤


Posted in Javascript onApril 04, 2019

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.前台效果图

详解easyui 切换主题皮肤

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 切换主题皮肤

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

Javascript 相关文章推荐
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
jQuery分组选择器简单用法示例
Apr 04 #jQuery
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 #Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 #jQuery
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 #Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 #Javascript
Vue传参一箩筐(页面、组件)
Apr 04 #Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 #Javascript
You might like
PHP类继承 extends使用介绍
2014/01/14 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
PHP类型约束用法示例
2016/09/28 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python中类的继承代码实例
2014/10/28 Python
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
python 实现UTC时间加减的方法
2018/12/31 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
华为的Java面试题
2014/03/07 面试题
英语简历自我评价
2014/01/26 职场文书
毕业生自荐信格式
2014/03/07 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
苏州园林导游词
2015/02/03 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
母亲节感言
2015/08/03 职场文书
小学班主任研修日志
2015/11/13 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
windows安装python超详细图文教程
2021/05/21 Python
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers