jquery UI 禁用主题样式答案

【问题标题】：jquery UI disable theme stylingjquery UI 禁用主题样式
【发布时间】：2012-05-21 10:09:00
【问题描述】：

我想知道，如何让 jquery UI 在初始化 $.tabs() 时不添加任何类？

这是我的html结构

<link href="smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
...
<link href="estilos_scoreboard.css" rel="stylesheet" type="text/css" />
...

<div id="tab_container">
    <ul class="ui-tabs-nav">
        <li><a href="#tab_equipos"><span>Equipos</span></a></li>
        <li><a href="#tab_jugadores"><span>Jugadores</span></a></li>
        <li><a href="#tab_partidos"><span>Partidos</span></a></li>
        <li><a href="#tab_directos"><span>Directos</span></a></li>
    </ul>

    <div id="tab_equipos">... cargando ...</div>
    <div id="tab_jugadores">... cargando ...</div>
    <div id="tab_partidos">... cargando ...</div>
    <div id="tab_directos">... cargando ...</div>       
</div>

javascript代码：

$(document).ready(function(){
    $('div#tab_container').tabs();
    $('div#tab_equipos').load('lv_equipos.php');
});

在 estilos_scoreboard.css 我有我的 css 样式，如果我不加载 smoothness/jquery-ui-1.8.20.custom.css 效果很好

所以我想知道，有没有办法告诉$.tabs() 不要应用任何样式？

//注意：我问这个是因为我不是这样编码的人，而是应用快速修复的人，我需要 smoothness/jquery-ui-1.8.20.custom.css 来获得 jquery UI 自动完成和其他功能

【问题讨论】：

标签： jquery html css jquery-ui jquery-ui-tabs

【解决方案1】：

据我所知，这不能通过默认代码/选项来完成。但是，您可以在应用选项卡后删除所有 jQuery 类。

jQuery 库为所有类使用前缀 ui-，因此您可以在应用选项卡/插件后立即删除所有这些类。

这应该可行：

removeByClassPrefix(document.getElementById("element"), "ui-");

function removeClassByPrefix(el, prefix) {
    var regx = new RegExp('\\b' + prefix + '.*?\\b', 'g');
    el.className = el.className.replace(regx, '');
    return el;
}

或者：

$("#element").className = $("#element").className.replace(/\bui-.*?\b/g, '');

以上功能感谢Prestaul 的回答：Remove all classes that begin with a certain string

【讨论】：

试试这个：$("#element").attr("class", $("#element").attr("class").replace(/\bui-\S+\ b/g, ''));

【解决方案2】：

好吧，我决定只用一个简单的 if：

<?php if($_ADM['mod'] == 'scoreboard') {  ?>
    <link href="estilos_scoreboard.css" rel="stylesheet" type="text/css" />
<?php } else { ?>
    <link href="<?=BASE_URL;?>assets/css/smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
<?php } ?>

【讨论】：

也有可能，但您仍然在代码中保留ui-*。