Plugin WordPress per la selezione dello stile. Plugin JQuery per selettori di stile. Classi CSS che possono essere utilizzate per progettare una selezione

La struttura sarà standard

In modo che la selezione visualizzi la riga uno utilizzando l'attributo size con valori pari a 1.

Styling per la nostra selezione

Ottrimomo

Giraffa dell'ippopotamo dell'elefante

Nell'applicazione, abbiamo scritto diverse righe dell'aspetto ccs power con i prefissi del fornitore, in modo che power funzioni allo stesso modo in tutti i browser. Leggi di seguito sul potere.

Tutta la piegabilità è dovuta alla sostituzione della freccia standard con quella rettangolare, al posto della quale è stato implementato lo sfondo. Puoi inserire un'immagine in questo modo. È inoltre necessario regolare le dimensioni del riquadro aggiuntivo delle dimensioni dello sfondo

L'aspetto di potenza css3 ha contribuito a implementare il nostro design

Questo potere ti consente di cambiare l'aspetto di un elemento in: pulsante, casella di controllo, radio, campo, icona e molto altro. Nel nostro episodio abbiamo sottolineato un elemento, vikoristuyuchi nessuno e abbiamo aggiunto un'immagine per ulteriore sfondo

Per definire lo stile dell'opzione di selezione è necessario JavaScript

Ci sono connessioni jQuery davanti al codice JavaScript

Al giorno d'oggi, i progettisti hanno iniziato sempre più a disegnare piccoli moduli HTML nello stile di HTML 2.0, questa tendenza sta causando una serie di cambiamenti e, cosa più importante, sono i bellissimi campi di immissione dati e i campi selezionati con bordi arrotondati e ombre. Puoi solo accontentare, e anche tutto è meraviglioso, e CSS3 sta già vincendo in molti modi, permettendoti di dare un bell'aspetto a moduli, campi e selettori. È un peccato, non rendere tutto così roseo.

Indipendentemente dal fatto che tutti i browser moderni supportino HTML5 e CSS3, non tutti li usano e, secondo le statistiche, la metà degli utenti di tutta Internet, come prima, utilizza browser di versioni precedenti e molti di loro non si godono appieno mondo o utilizzare CSS3. Pertanto, lo stile dell'elenco (Seleziona) che appare viene spesso eseguito alla vecchia maniera, utilizzando jQuery (js) e immagini PNG o GIF. Voglio parlarvi di uno di questi metodi.


Di seguito è riportato uno script che ho trovato all'improvviso sui siti RuNet, sfortunatamente non ricordavo l'indirizzo o il nome del suo autore. Ti trasmetto solo grande rispetto.

Revisione del codice JS

Fare clic sullo script per lo styling "Selectu".

Revisione del codice JS

Codice HTML "seleziona", che verrà stilizzato

Revisione del codice HTML

Lo stile sarà stosovano fino alla selezione

Revisione del codice CSS

Sostituendo l'immagine di sfondo, puoi modellare la selezione come preferisci e utilizzare questo esempio nella maggior parte dei browser, come quelli più vecchi).

Utilizzo spesso un principio simile di stilizzazione degli oggetti modulo su grandi siti Web e viceversa, da cui possiamo creare una nuova idea, in modo che, mentre la maggior parte dei webmaster è riluttante a stagnare soluzioni non molto semplici, per il bene di promuovere la cultura con i browser più vecchi.

Buon pomeriggio, habrausers e leggete e basta. Porivnyano ha recentemente chiesto come impostare gli stili sul tag select. Vogliamo tutti che la stilizzazione del modulo corrisponda al design del sito, ma finora non tutto può essere descritto con il puro CSS. In questo articolo esamineremo un semplice esempio di scrittura del tuo elenco di selezione, utilizzando CSS e una libreria di linguaggio JavaScript: jQuery. Penso che soprattutto i principianti trarranno beneficio da questo materiale. Certo, sarebbe meglio scrivere in JS nativo, ma tutti sanno che ci sarebbero più righe di codice, e difficilmente sarebbe più intelligente.

Ad essere sincero, ho provato a trovare una soluzione simile, ma non sapevo altro che dei wrapper div efficaci per il tag select. E ho pensato che sarebbe stato brutto scrivere qualcosa di semplice e necessario. Bene, questo è tutto!

Tre file condividono lo stesso destino con la nostra modellatura in plastilina:

• selectbox.html
• selectbox.css
• selectbox.js

selectbox.html

Mese

• Sichen
• Luzio
• Berezen
• Kviten
• Traven
• Cherven
• Lipen
• Serpente
• Veresen
• Zhovten
• Caduta delle foglie
• Petto

selectbox.css

div#selectBox ( larghezza: 250px; posizione: relativa; altezza: 50px; raggio bordo: 3px; bordo: solido 1px grigio chiaro; colore sfondo: #fff; colore: #333; cursore: puntatore; overflow: nascosto; transizione: .3s; ) div#selectBox p.valueTag ( riempimento: 15px; cursore: puntatore; transizione: .2s; altezza: 40px; ) div#selectBox > img.arrow ( posizione: assoluta; destra: 0; larghezza: 50px; riempimento : 15px; ) /* per gli utenti di Safari, Chrome e Opera, un bonus di benvenuto: una barra di scorrimento stilizzata. */ ::-webkit-scrollbar-track ( sfondo: trasparente; larghezza: 0.5em; posizione: assoluta; ) ::-webkit-scrollbar-track ( sfondo: trasparente; posizione: assoluta; z-index: -2; ) :: -webkit-scrollbar-thumb ( raggio bordo: 100px; sfondo: #888; ) ul#selectMenuBox ( sfondo: #fff; transizione: .3s; larghezza: 100%; altezza: 200px; overflow-y: automatico; overflow- x: nascosto !importante; posizione: assoluta; margine superiore: 00px; display: blocco; ) ul#selectMenuBox > li ( display: blocco; li.option ( colore: grigio; riempimento: 10px; ) ul#selectMenuBox > li. opzione:passaggio del mouse (colore: #333; sfondo: #e1e1e1; transizione: .2s;)

E ora il gusto! Diamo un'occhiata al codice di output del plugin casella di selezione() per jQuery, file selectbox.js:

selectbox.js

(function($) ( $.fn.selectbox = function() ( // parametri cob // imposta l'altezza standard del div "a. var selectDefaultHeight = $("#selectBox").height(); // ruota l'immagine su div"e var rotateDefault = "rotate(0deg)"; // dopo aver premuto il pulsante, viene utilizzata una funzione speciale, che // calcola l'altezza di output del nostro div"a. // è facile allinearlo con parametri di input (quelli specificati nello script) $("#selectBox > p.valueTag").click(function() ( // calcolo dell'altezza di un oggetto utilizzando il metodo Height() var currentHeight = $("# selectBox").height(); // controlla la fuga/non fuga mentale dall'altezza della testa data, // per capire cosa fare dopo se (currentHeight< 100 || currentHeight == selectDefaultHeight) { // если высота блока не менялась и равна высоте, заданной по умолчанию, // тогда мы открываем список и выбираем нужный элемент. $("#selectBox").height("250px"); // «точка остановки анимации» // здесь стилизуем нашу стрелку и делаем анимацию средствами CSS3 $("img.arrow").css({borderRadius: "1000px", transition: ".2s", transform: "rotate(180deg)"}); } // иначе если список развернут (высота больше или равна 250 пикселям), // то при нажатии на абзац с классом valueTag, сворачиваем наш список и // и присваиваем блоку первоначальную высоту + поворот стрелки в начальное положение if (currentHeight >= 250) ( $("#selectBox").height(selectDefaultHeight); $("img.arrow").css((transform: rotateDefault)); ) )); // ecco come viene bruciata la lista stessa quando si seleziona l'elemento richiesto // e si cambia il testo del paragrafo nel testo dell'elemento nella lista $("li.option").click(function() ( $( "#selectBox").height(selectDefaultHeight); $ ("img.arrow").css((transform: rotateDefault)); $("p.valueTag").text($(this).text()); )); ); )) (jQuery);

$("selettore").selectbox();
Innanzitutto, abilita la chiamata nel metodo ready() dell'oggetto documento, in modo che il plugin venga caricato dopo che il documento è stato completamente caricato. Puoi scoprire cos'è questo plugin jQuery.

Chiunque sia seriamente coinvolto nell'impaginazione sa che le possibilità di selezione dello stile nei CSS sono notevolmente migliorate. Anche se una selezione standard spesso non si adatta al design, devi lavorare con lo stile di selezione tramite JavaScript. In effetti, questo articolo ti consente di creare la tua selezione utilizzando JavaScript.

Esistono molti plugin già pronti, incluso jQuery, che ti permettono di fare tutto. Se non hai bisogno di una struttura complessa, è più semplice creare tutto da zero utilizzando JavaScript puro.

Prima di tutto creiamo la struttura HTML della nostra nuova select :

Elemento 1
Elemento 2
Elemento 3

Elemento 1

Elemento 2

Elemento 3

Come sai, qui non c'è quasi nessun tag di selezione. Ora possiamo facilmente modellare la nostra selezione con CSS aggiuntivi:

Selezionare(
colore di sfondo: #0ee;
raggio del bordo: 10px;
imbottitura: 10px 0;
larghezza: 200px;
}
.seleziona p(
cursore: puntatore;
margine: 0;
imbottitura: 5px 20px;
}
.seleziona p.attivo (
colore di sfondo: #ee0;
}

Follemente, puoi guadagnare tutto ciò che vuoi. E, se decidi, devi cambiare l'aspetto della funzionalità select , in modo da selezionare ed evidenziare meno di un elemento dalle decalcomanie e allo stesso tempo dalla gestione del modulo. Per chi stiamo accelerando JavaScript:

Selezione funzione(elemento) (
valore var = element.getAttribute("valore-dati"); // Legge il valore dell'elemento selezionato
var nodes = element.parentNode.childNodes; // Rimuove tutti gli altri elementi
per (var i = 0; i< nodes.length; i++) {
/* Testo e input di elementi di terze parti filtrabili */
if (istanza nodi[i] di HTMLParagraphElement) (
/* Aggiunge attivo all'elemento selezionato, cancellando questa classe da tutti gli altri */
if (valore == nodes[i].getAttribute("valore-dati")) nodes[i].className = "attivo";
else nodes[i].className = "";
}
}
document.getElementById("my_select").valore = valore; // Imposta il valore del campo nascosto
}

Il punto chiave nell'implementazione della funzionalità di selezione è il campo nascosto in cui viene registrato il valore della nostra selezione. Le stesse informazioni verranno inviate al momento dell'invio del modulo.

L'asse in modo così semplice è assolutamente timido, che si tratti della stilizzazione del JavaScript selezionato. Se usi jQuery, il codice sarà ancora più semplice.

Follemente, la selezione standard ha più funzionalità. Ad esempio, risponde alla tabulazione, quindi puoi spostarti tra gli elementi anche utilizzando i tasti freccia sulla tastiera. Ma tutto questo può essere implementato anche in JavaScript, se necessario.

Prima raccomandazione. Il codice ha un tag noscript e non è chiaro. Non tutti hanno JavaScript abilitato e affinché il modulo funzioni per tali utenti è necessario inserire una selezione standard. E tutti coloro che hanno JavaScript abilitato, utilizzano il nostro strumento di selezione.

Rispetto! Ulteriore sviluppo e supporto del plugin in relazione a ciò che ora è in parte.

Uno dei discorsi più inaccettabili (e intendo ingordi) nello sviluppo web è l'insieme dei form HTML. Sfortunatamente, non esiste uno standard uniforme per la visualizzazione degli elementi del modulo, indipendentemente dal browser o dal sistema operativo, così come la capacità di progettare adeguatamente azioni da questi elementi, vikoryst e fogli di stile a cascata.

I seguenti elementi del modulo HTML non possono essere ulteriormente stilizzati:

• elenco delle cose da aprire;
• guardiamarina;
• peremikach.
• campo per caricare il file.

Come puoi già vedere dal titolo del post, c'è altro da dire sulla selettività.

Esistono molte soluzioni già pronte sotto forma di plug-in jQuery per stilizzare elenchi che si aprono. Tuttavia, io (tramite quelli che provengono dai plugin, senza tenere conto di questi e altri motivi) ho scelto la via per l'uscita della mia ruota e ho scritto un plugin di potenza, che condivido in questo articolo.

Ci tengo a precisare che questo plugin non è adatto a tutte le possibili situazioni di stagnazione della selezione (leggine alcune).

Puoi vedere l'esempio dello stile del selettore utilizzando un plugin aggiuntivo. Ho creato questo disegno senza utilizzare un vikoristan per rappresentarlo.

• Quando JavaScript è abilitato, vengono visualizzate le selettive standard.
• Lo script è di piccole dimensioni, circa 4 kilobyte.
• Funziona con IE6+ e con tutti i browser desktop attuali.
• Da presentare internamente.
• Facilmente personalizzabile tramite CSS.
• Consente di impostare l'altezza massima per l'elenco (CSS power max-height).
• Regola automaticamente la larghezza se non è specificata.
• Supporta lo scorrimento della rotellina del mouse.
• Può avere un “posizionamento ragionevole”, cioè. Quando apri l'elenco, non andare oltre la parte visibile della pagina.
• Puoi “catturare” la pressione del tasto Tab e spostare le frecce sulla tastiera.
• Supporta l'attributo "disabilitato".
• Funziona con selettori che vengono aggiunti/modificati dinamicamente.

• Quindi non supporta l'attributo multiplo. non consente la selezione di più elementi (selezione multipla).
• Non supporta il raggruppamento di elementi di elenco (tag).
• Non è consigliabile spostare le frecce della tastiera se è aperta la lista dei clic del mouse.

Il plugin non è disponibile perché Il VIN non è attuale.

Versione: 1.0.1 | Zavantazhen: 11103 | Dimensione: 7KB | Ultimo aggiornamento: 10/07/2012

Se jQuery non è ancora abilitato sul sito, aggiungi una riga iniziale prima del tag:

Subito dopo jQuery, collega il file con lo script:

(funzione($) ( $(funzione() ( $("seleziona").selectbox(); )) ))(jQuery)

Questo codice dovrebbe essere posizionato prima del tag dopo i file specificati.

Quando si modificano dinamicamente i selettori, è necessario avviare il trigger di aggiornamento, ad esempio:

(funzione($) ( $(funzione() ( $("pulsante").click(funzione() ( $("seleziona").find("opzione:nth-child(5))).attr("selezionato ", true); $("seleziona").trigger("aggiorna"); )) )) ))(jQuery)

La sua struttura è simile a questa:

-- Selezionare --

• -- Selezionare --
• Paragrafo 1
• Punto 2
• Punto 3

Per creare selettività per CSS aggiuntivi, utilizzare le seguenti classi:

La creazione di uno script del genere è sufficiente per tenerti occupato, mentre devi affrontare molte cose diverse. Sono sicuro che non ci saranno bug più gravi. Ciao, fammi sapere nei commenti.