注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

IOS & JAVA KEY

(iMilo)

 
 
 

日志

 
 
关于我

All the splendor in the world is not worth a good friend!! Hello my friend!!

网易考拉推荐

EasyUI 更换主题小结  

2014-05-25 17:23:20|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

EasyUI 更换主题小结 

 

思路:

将用户的主题偏好设置信息存放在Cookie中,如果没有使用默认主题,如果有则使用用户的主题偏好设置。

 

步骤:

     页面初始化时获取Cookie数据设置用户默认主题;

     用户进行主题设置时,更改用户主题所对应的主题CSS样式文件,同时将用户主题设置放置在cookie中。

 

代码:

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

       <title>EASYUI跟换主题</title>

       <meta http-equiv="content-type" content="text/html; charset=GBK">

       <script type="text/javascript" charset="GBK"

           src="resources/jquery-easyui/jquery.min.js">

       </script>

       <!-- jquery-easyui引入文件压缩版 -->

       <script type="text/javascript" charset="GBK"

           src="resources/jquery-easyui/jquery.easyui.min.js">

       </script>

       <%

           String themeName = "default";

           Cookie cookies[] = request.getCookies();

           if(cookies != null && cookies.length > 0){

              for(int i = 0; i < cookies.length; i++){

                  if("themeName".equals(cookies[i].getName())){

                     themeName = cookies[i].getValue();

                     break;

                  }

              }

           }

        %>

        <!-- easyui样式 -->

       <link id="uiTheme" rel="stylesheet"

           href="resources/jquery-easyui/themes/<%=themeName %>/easyui.css"

           type="text/css" />

       <!-- easyui icon样式 -->

       <link rel="stylesheet" href="resources/jquery-easyui/themes/icon.css"

           type="text/css" />

       <!-- 国际化 -->

       <script type="text/javascript" charset="GBK"

           src="resources/jquery-easyui/locale/easyui-lang-zh_CN.js">

       </script>

       <!-- cookie支持 -->

       <script type="text/javascript" charset="GBK"

           src="resources/jquery.cookie.js">

       </script>

       <script type="text/javascript" charset="GBK">

           $(function(){

              $('#ith').combobox({

                  panelHeight:100,

                  onChange:function(newVal, oldVal){

                     var oldHref = $('#uiTheme').attr('href');

                     var newHref = oldHref.substring(0,oldHref.indexOf('themes')) + 'themes/' + newVal + '/easyui.css';

                     console.log(newHref);

                     $('#uiTheme').attr('href', newHref);

                     //设置cookie值,并设置7天有效时间

                     $.cookie('themeName', newVal, {

                         expires : 7

                     })

                  }

              });

           });

       </script>

    </head>

    <body class="easyui-layout">

       <div data-options="region:'north',title:'North Title',split:true"

           style="height: 100px;">

           更换主题

           <select id="ith" class="easyui-combobox" name="theme">

              <option value="default">default</option>

              <option value="black">black</option>

              <option value="gray">bray</option>

              <option value="bootstrap">bootstrap</option>

              <option value="metro">metro</option>

           </select>

       </div>

       <div data-options="region:'south',title:'South Title',split:true"

           style="height: 100px;"></div>

       <div

           data-options="region:'east',iconCls:'icon-reload',title:'East',split:true"

           style="width: 100px;"></div>

       <div id="west" data-options="region:'west',title:'West',split:true"

           style="width: 100px;"></div>

       <div data-options="region:'center',title:'center title'"

           style="padding: 5px; background:#eee;"></div>

    </body>

</html>

说明:

     由于使用easyuicombobox组建来包装select标签,如果再通过$(‘select’).change(function(){});则无效,需要使用comboboxchange属性来实现;

     [jquery.cookie.js]jQuery插件,方便在JS 中设置cookie信息。

  评论这张
 
阅读(9230)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017