详解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 相关文章推荐
浅谈javascript中的作用域
Apr 07 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 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 date函数参数详解
2006/11/27 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
jquery和ajax的关系详细介绍
2013/11/29 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python处理“
2019/06/10 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
元旦寄语大全
2014/04/10 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
经理助理岗位职责
2015/02/02 职场文书
毕业赠语大全
2015/06/23 职场文书
运动会通讯稿50字
2015/07/20 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
党组织结对共建协议书
2016/03/23 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
HAM-2000摩机图
2021/04/22 无线电