詳解easyui 切換主題皮膚

更新時間：2019年04月04日 14:41:33 作者：不是吧！

這篇文章主要介紹了easyui 切換主題皮膚方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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

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

主要實現(xiàn)原理就是換導入css文件,這樣就可以實現(xiàn)切換主題皮膚

<!-- 引入easyui css樣式 只需引入easyui.css  其中就包含了其他的內(nèi)容-->
  <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 切換主題皮膚方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

jQuery 幻燈片插件(帶縮略圖功能)
非常不錯的一款帶縮略圖功能的基于jquery的幻燈片插件，需要的朋友可以參考下。
2011-01-01
分享一些常用的jQuery動畫事件和動畫函數(shù)
在jquery中，jquery動畫事件和動畫函數(shù)經(jīng)常用的到，今天小編抽時間給大家整理了些關于常用的jquery動畫事件和動畫函數(shù)，對jquery動畫函數(shù)和動畫事件相關知識感興趣的朋友一起學習吧
2015-11-11
PHP+jquery+ajax實現(xiàn)分頁
這篇文章主要為大家詳細介紹了PHPjquery+ajax實現(xiàn)分頁的代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
jQuery實現(xiàn)轉動隨機數(shù)抽獎效果的方法
這篇文章主要介紹了jQuery實現(xiàn)轉動隨機數(shù)抽獎效果的方法,涉及jQuery操作隨機數(shù)及頁面元素的相關技巧,需要的朋友可以參考下
2015-05-05
jquery 1.3.2 IE8中的一點點的小問題解決方法
最近的項目中開始使用了新版本的jquery，就是1.3.2版，發(fā)現(xiàn)在這個在版本對就radio類型的input在IE8中的支持不太好
2009-07-07
jquery 學習之二屬性相關
jquery 學習之二屬性相關資料，學習jquery的朋友可以參考下。
2010-11-11
jquery實現(xiàn)metro效果示例代碼
metro效果想必大家并不陌生吧，下面為大家講解下在jquery中時如何實現(xiàn)的，新手朋友們可不要錯過了
2013-09-09
jQuery側邊欄實現(xiàn)代碼
本文給大家介紹jquery側邊欄實現(xiàn)代碼，這些側邊欄菜單可以用在不同風格的網(wǎng)頁上,如果你覺得不錯,可以參考下本文實現(xiàn)代碼
2016-05-05
ASP.NET中使用后端代碼注冊腳本生成JQUERY-EASYUI的界面錯位的解決方法
上一篇解決了用了JQUERY-EASYUI時后端注冊腳本重復執(zhí)行的問題．今天又發(fā)現(xiàn)，通過后端代碼　生成的界面有錯位現(xiàn)象．
2010-06-06
jQuery實現(xiàn)判斷控件是否顯示的方法
這篇文章主要介紹了jQuery實現(xiàn)判斷控件是否顯示的方法,涉及jQuery針對頁面元素屬性相關操作技巧,需要的朋友可以參考下
2017-01-01