Tabs de interface do usuário jQuery Mudança de estilo grande

Question

Estou usando as guias da interface do usuário do jQuery e preciso mudar principalmente o estilo. Eu preciso remuir a imagem de fundo, as fronteiras, quase tudo. Eu preciso que pareça mínimo e não seja o seu independência.

Qual é a melhor forma de fazer isso? No entanto, preciso usar o estilo de interface do usuário padrão para o widget do calendário, que está na mesma página. Eu fiz muitas pesquisas e todos parecem apontar para o roller temático. No entanto, não quero apenas alterar as cores e os raios de borda. Eu preciso excluir uma porcaria. O tema-rolo parece ser apenas mudar coisas como cores (não é realmente útil para o mundo real). Como adapto o CSS para as guias sem alterar os estilos dos outros widgets da interface do usuário na mesma página (quero que o calendário fique como está)?

Vale a pena usar a interface do usuário jQuery para minhas guias?

Answer 1

Você deve conferir o post detalhado de Keith Wood em guias de interface do usuário jQuery de estilo.

A resposta para sua pergunta específica

Eu preciso remuir a imagem de fundo, as fronteiras, quase tudo. Eu preciso que pareça mínimo

está nesta seção "Remova a maior parte da formatação"Do post de Keith Wood.

Além disso, há mais 10 alterações de estilo, completas com o CSS necessário para alcançar o efeito desejado.

JQuery Ui Tabs Styling - Keith Wood Blog Post

Answer 2

Eu escolhi escrever minha própria funcionalidade de guias simples quando, percebi que não precisava da maioria de seus recursos internos, como carregar conteúdo de Ajax e adição/remoção dinâmica de guias. Se eu precisasse desses recursos, seria fácil implementá -los. O que me empurrou para abandonar as guias da interface do usuário do jQuery é que eu tive que estruturar meus elementos DOM de maneira diferente. Eu também precisava estilizar minhas guias para parecer mínimo, e pensei que o prédio do zero seria menos esforço do que tentar se afastar muito.

O recurso que eu mais sinto falta é como as guias da interface do usuário do jQuery selecionam automaticamente a guia indicada pelo # no URL (eu sei que posso apenas copiá -lo - apenas ainda não cheguei a ele).

---

ATUALIZAÇÃO: Mas, sim, se você estiver seguindo, pode substituir o CSS usando qualquer IDS que possui:

#my-tabs .ui-state-default {
    background-image: none; /* remove default bg image */
}

e assim por diante..

Answer 3

Experimente o seguinte em seu CSS assumindo que sua classe é .MyTabs para o CSS primordial. Deve começar você a começar

.mytabs li {
        background :  white !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important; 

    }
    .mytabs li.ui-state-active {
        background :  white !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important; 
        margin: 0;


    }

.mytabs li a 
    {
        color:          Black !important;
        font-size:      1.4em !important;
        font-weight:    bolder;
        padding:        4px 1.5ex 3px !important;
    }

Answer 4

É fácil com alguns CSs que você pode substituir facilmente o CSS padrão entregue com a interface do usuário do jQuery. Você pode não precisar! Importante se o seu CSS modificado aparecer após o JQuery UI CSS.

Você também pode remover/adicionar classes a cada elemento com jQuery na carga, mas isso parece um pouco desnecessário.

Answer 5

Deve ser bastante direto com o CSS. Seus elementos têm IDs e aulas e você pode tocá -los com CSS. Themeroller é apenas uma coisa rápida.

Se bem me lembro, você também pode ajustar as guias JS e ajustar as linhas que adicionam imagens (se este for o mesmo plug -in) ou apenas remover essa linha ao seu gosto.

Answer 6

Gostaria de saber se os atributos importantes devem estar nos modelos de interface do usuário do jQuery padrão em primeiro lugar. Por exemplo, se você alterar as guias para estar no lado esquerdo ou direito em vez de superior, o 'fundo da borda' não deve ter um! IMPORTANTE, pois isso geralmente é substituído.

Answer 7

Quase tudo está coberto aqui, mas eu estava olhando em volta e encontrei uma maneira de jogar coisas que você realmente não precisa facilmente com uma única classe, enquanto editava os atributos restantes.

*[class*="ui-"] {
     border-radius:0;
     background-image: none;
     .
     .
     .
}

Dessa forma, você seleciona todas as classes que começam com "Ui-" e remova o que quiser remover da interface do usuário do jQuery.

Answer 8

 #my-tabs * {
    background-image: transparent;
}