Latest web development tutorials

tema di design jQuery UI

Struttura del file

Il tema è un modo specifico per aumentare la loro facilità d'uso. Tipicamente, la struttura di directory file è il seguente:

  • themename/ - l'argomento deve essere completamente contenuto in un nome argomento a parte il nome della cartella.
  • themename/themename.css - Si tratta di un file di base di CSS. Indipendentemente da quale plug-in, il file deve essere riferimento in ciascuna delle pagine utilizzando temi. Il file dovrebbe essere leggero, comprende solo i punti principali.
  • themename/themename.pluginname.css - ciascun widget si richiede il supporto di un file CSS. Nome del plugin dovrebbe essere direttamente incluso nel nome del file. Ad esempio, se si tematizzazione di schede (tab) plug-in, ci sono: themename.tabs.js .
  • themename/img.png - Il tema può contenere immagini. Essi possono essere denominati in base alle proprie preferenze, non vi è alcuna convenzione di denominazione specifica.

Per sapere come la struttura del file tema è completato casi, visitare il tema di base jQuery UI .

stile personalizzato

Scrivere lo stile tema è molto semplice, è perché il tema della flessibilità.

Tutti gli argomenti devono avere una classe CSS di base. La classe argomento principale permette all'utente di attivare disabilitato. Il formato di classe radice dovrebbe essere .ui-themename . E utilizzarlo in un file HTML come segue: 

<html>
<head>
    <title>My Site</title>
    <link rel="stylesheet" href="themename/themename.css" />
    <link rel="stylesheet" href="othertheme/othertheme.css" />
    <link rel="stylesheet" href="othertheme/othertheme.dialog.css" />
</head>
<body class="ui-themename">
    <div class="ui-othertheme">
        <div class="ui-dialog">This is a modal dialog.</div>
    </div>
</body>
</html>

Nell'esempio di cui sopra, alcune cose importanti accadute:

  • Abbiamo anche caricare due temi al documento.
  • Tutte le macchine intero contenuto della pagina, è effettuata in conformità con il tema della THEMENAME stili.
  • Tuttavia, con classe ui-othertheme di <div> e ogni elemento (tra cui le finestre di dialogo modale) vengono effettuati in conformità con il tema degli stili othertheme.

Se apriamo themename.css file per la visualizzazione, possiamo vedere il seguente codice: 

body.ui-themename { background:#111; color:snow; }
.ui-themename a, a.ui-themename { color:#68D; outline:none; }
.ui-themename a:visited, a.ui-themename:visited { color:#D66; }
.ui-themename a:hover, a.ui-themename:hover { color:#FFF; }

Si prega di notare, themename.css file include solo le informazioni di stile globale universale, informazioni di stile per un particolare widget non è qui per essere definito. Qui lo stile di tutti gli argomenti sono applicabili. Non preoccupatevi di un argomento occuperà più file - questi saranno semplificate nel processo di creazione e il download.