ThinkPHP3.2.3---更换easyui主题（theme）

  在ThinkPHP更换easyui的theme很简单，这里做个备忘。

效果

ui-sunny

ui-pepper-grinder

ui-dark-hive

ui-cupertino

实现

下载主题包

  下载地址：http://download.csdn.net/detail/freeape/9254227

代码

在要实现切换主题的html页面加入easyui的css和js文件

<script type="text/javascript" src="__PUBLIC__/Common/JS/Easyui/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/Common/JS/Easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Common/CSS/Easyui/icon.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Common/CSS/Easyui/color.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Common/CSS/Easyui/demo/demo.css">
<!-- 下面这句话是跟切换主题有关，涉及到控制器 -->
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Common/CSS/Easyui/themes/{$easyui_theme}/easyui.css">

html页面添加切换下拉选项菜单

    <div style="float:left;clear:both;">
        <label style="margin-left:4px;font-size:10px;padding-top:3px;">更换主题：</label>    
        <select class="easyui-combobox" id="theme_select" style="width:150px;">         
            <option value="{$easyui_theme}" selected>{$easyui_theme}</option>
            <option value="metro-blue">metro-blue</option>
            <option value="metro-gray">metro-gray</option>
            <option value="metro-green">metro-green</option>
            <option value="metro-orange">metro-orange</option>
            <option value="ui-cupertino">ui-cupertino</option>
            <option value="ui-dark-hive">ui-dark-hive</option>
            <option value="ui-pepper-grinder">ui-pepper-grinder</option>
            <option value="ui-sunny">ui-sunny</option>          
        </select>   
    </div>  

下拉select的onchange函数，通过ajax来切换主题名字

$(document).ready(function(){  
    //更改easyui theme
    $('#theme_select').combobox({
        onChange: function(newValue,oldValue){
            //alert(newValue);
            $.ajax({
                url: localhostPaht + '/Home/Cashier/changeTheme/',
                type: 'POST',
                dataType: 'text',
                data:{
                    themeName:newValue
                },
                success: function(data){
                    data = eval(data);
                    console.log(data);
                    if(data == 1){
                        window.location.href = "/Home/Cashier/index";
                    }
                    else{
                        alert('更改主题失败！');
                    }
                },
                error: function(){
                    alert("更改主题错误");
                }
            });         
        }
    });
}); 

在相应的控制器中添加主题名字切换代码

        //需更换主题的操作的代码
        $easyui_theme = cookie('easyui_theme');
        if($easyui_theme == ''){
            $easyui_theme = 'default';
        }
        $this->assign('easyui_theme',$easyui_theme);
        //更换主题的ajax返回函数
        //更改主题
        public function changeTheme(){
            if(IS_POST){
                $themeName = $_POST['themeName'];
                cookie('easyui_theme', $themeName,168*3600);
                $this->ajaxReturn('1');
            }   
            $this->ajaxReturn('0');        
        }