02.關於easyui經過combox實現主題切換功能

js部分javascript

/**
 * 更換EasyUI主題的方法
 * @param themeName
 * 主題名稱
 */
function fun(){
    themeName = $(this).val();
    var $easyuiTheme = $('#theme');
    var url = $easyuiTheme.attr('href');
    //console.log(url);
    //替換掉thems後面的爲0的一個主題
    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('#theme').attr('href', href);
        }
    }
    $.cookie('easyuiThemeName', themeName, {
        expires : 7
    });
}

htmlcss

主題更換:<br>
        <select  class="easyui-combobox" data-options="onClick:fun,panelHeight:'auto'" style="width:120px">
            <option value="black">black</option>
            <option value="bootstrap">bootstrap</option>
            <option value="default">default</option>
            <option value="gray">gray</option>
            <option value="material">material</option>
            <option value="material-teal">material-teal</option>
            <option value="metro">metro</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>
相關文章
相關標籤/搜索