Expressant TI

Amb una varietat de carrusels per aquí, molts de Mootools també, encara em vaig decidir a escriure la meva pròpia classe Carrusel, per algunes bones raons
1. Es busca una funció de localització (per ser capaç de saltar una diapositiva en particular / pas en el carrusel).
2. Volien la llibertat amb la col · locació dels botons ESQUERRA i DRETA / links, allà on em doni la gana.
3. Més control sobre els Passos de diapositives.

Me les vaig arreglar per crear un carrusel de nou, amb les característiques anteriors de la manera ...... Siéntase lliure de suggerir les modificacions que es requereixin!

El meu exemple són aquestes ... [ Veure demostració ]

Veure demo | Descarregar Mootools carrusel Amb la versió 1.0 de paginació (Descarregat 1991 vegades)

1. Carrusel de paginació

Vostè pot afegir fàcilment la paginació al seu carrusel, simplement posant la bandera de paginació, que és Parater última va passar en crear la instància de la MooCarousel a true (vull paginació) o fals (donot desig de paginació).

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = nombre de diapositives, sss = mida de pas de diapositives

I per descomptat es pot canviar el look-n-feel d'aquests achors de paginació al seu gust mitjançant la modificació de la CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging actual, carousel_paging pàgina {outline: none; ample: ... 15px; alçada: 15px; line-height: 15px; text-align: center; display: block; float: left; fons: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging actual {background: # 4D4D9B; color: # ffffff;} ..

Bé! hi ha un petit problema, però, les àncores de paginació si s'estableix, llavors es genera sempre després que el component de Carrusel. Jo volia fer-ho dinàmic també, però a continuació, només per mantenir la seqüència de comandaments per a la bufa de les proporcions, em vaig decidir a saltar.
Però vostè sap una mica de Javascript, que podria modificar fàcilment el codi de generació de paginació en la classe MooCarousel per complaure a les seves necessitats.

2. Personalització de les icones d'esquerra i dreta

Podeu canviar la ubicació, imatges o qualsevol propietat displat dels botons esquerre i dret, simplement per jugar amb el CSS. ser capaç de canviar les ubicacions dels buttoms esquerra i dreta va ser la raó real per a mi, a la nostra dreta, la meva classe de Carrusel.
Atès que aquesta classe MooCarousel, accepta l'ID és un d'aquests botons, vostè pot col · locar aquests botons en qualsevol lloc de la pàgina, si us plau ... no han d'estar en la jerarquia d'elements, com en el meu exemple.

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; Ample: 23px; alçada: 20px; float: left; cursor: pointer;}

. Carousel_container_r {background-position: 0-38px;}

. Carousel_container_l {background-position: 0-58px;}

3. Personalització dels passos de diapositives

Què vull dir MEUS PASSOS Personalització de diapositives?
La majoria dels carrusels passeu el ple de la finestra visible. Així que dir que tenia quatre elements (com en el meu exemple anterior), que es lliscarà cap als quatre elements. Amb aquest component de Carrusel, es passa el nombre de diapositives i la mida de pas de la seva elecció.

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = nombre de diapositives, c_sss = mida de pas de diapositives

A més, en el meu Exemple1 he calcuted la mida de pas de diapositives, basada en la lògica que, ja ho sé nombre d'elements, l'amplada de cada element i els marges que li han donat després de cada element en la meva CSS.

/ * Per orgia 1 * /

var c1_w = 92; l'article / / Ample de gresca

var c1_n = 10; / / nombre total d'articles Comparació de gresca

var c1_pp = 4 / / Nombre de gresca Comparació de productes perpage

var c1_marginFactor = 51;

var = c1_sss c1_w c1_pp * / / sss = mida de pas de diapositives

c1_ns var = parseInt (((* c1_w c1_n) / c1_sss) + 0.5) / / ns = nombre de diapositives

c1_sss + = c1_marginFactor; / / sss slide = mida de pas, de 51 anys per als marges

Requisits: Mootools 01/02

Veure demo | Descarregar Mootools carrusel Amb la versió 1.0 de paginació (Descarregat 1991 vegades)

Mootools és un MooRating (navegadors, per descomptat, ja que utilitza el poder de la biblioteca Mootools) simple, lleuger i excel · lent solució basada en qualificació. No es denomina com "estrelles", simplement perquè la imatge de qualificació podria ser que vostè trii (que he proporcionat estrelles, Bars i cors amb la descàrrega, però vostè pot crear la seva pròpia varietat i simplement deixi caure en).

Com es veu així:

	Valoració de Mootools amb diferents imatges Veure demostració
	Valoració de Mootools, amb valors percentuals Veure demostració
	Valoració de Mootools, amb valors fraccionaris Veure demostració

Descarregar Mootols Grau de l'estrella de seqüència (Descarregat 718 vegades)

Classificació de dades: Número sencer, decimal o Percentatge
Actualment el guió està dissenyat per mostrar les dades de qualificació com a valors sencers (1,2,3,4,5), en decimals (1,24, 3,45, etc) o en percentatges (12%, 55% etc.) L'opció de mostrar les dades en qualsevol dels formats esmentats es pot establir amb només canviar alguns valors dels indicadors dins de la JavaScript (moorating.js)
Bàsicament hi ha dues i dues banderes amb què jugar, per mostrar els valors en el format de la seva elecció ...

var inpercent = false; / / Establir la marca com true, si vostè requereix els valors de percentatge perquè es mostri
var isFractional = false / / Establir aquesta propietat a true per que els valors fraccionaris com 1,24, 1,25, 4,56 en lloc de 1,2 ... 5

I jo no crec que hi hagi cap explicació necessària. D'altra banda. L'script és molt simple. Si vostè coneix una mica de JavaScripting, pot modificar l'script per obtenir qualsevol tipus de valor que es mostra. Per exemple, si vostè vol tres xifres decimals que es mostraran ... només modificar la seqüència de comandaments de la següent manera ...

if (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3);.} / / 2 es canvia a 3
else {moostartval [i] innerHTML = Math.round (x).;

Actualització de valor nominal:
I havent molestat escriure cap script de AJAX per actualitzar el valor de Qualificacions, perquè jo sé per experiència que no sempre es té intenció d'actualitzar la qualificació tan aviat com l'usuari alguna cosa taxes. Sou lliure de fer el que vulguis amb el valor nominal, que s'actualitzarà l'ús d'AJAX, o sotmetre-o establir un valor de camp de formulari ocult, que s'han de presentar amb el formulari complet, etc

funció de updateRating (Identificació, classificació) {
/ / Alert (id + "," + Nota);
/ / Faci el amb la qualificació
}

No és funció de javascript en l'anomenat "updateRating". Aquesta funció s'ha aprovat la identificació de la Divisió de la Classificació, per identificar com perquè les qualificacions (si hi ha més que un qualificacions a la pàgina) s'ha actualitzat i el valor de la qualificació [updateRating (Identificació, classificació)]. Vostè pot optar per el que vulguis amb aquests valors, com he esmentat abans.

Valoració de la imatge: estrelles, cors, bars o qualsevol cosa que vulguis
Canvi de la classificació a qualsevol dels tipus anteriors (estrelles, cors, etc) és molt simple. Només cal crear una imatge similar a la prevista i poseu polz Recordi, si canvia el nom de la imatge, no fer els canvis necessaris al fitxer CSS, vegeu a sota.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; Ample: 84px; alçada: 20px; float: left; background: url ('stars.gif') repeat-x;}
. Moostar gen {float: left; margin: 0px; padding: 0px; display: block; Ample: 84px; alçada: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') a l'esquerra 25px;}

La majoria dels widgets de qualificacions utilitzen imatges de les estrelles estrella i mitja amb el ratolí sobre els esdeveniments de cada estel. Valoracions Moo utilitza un sprite simple com una imatge de fons per aconseguir els efectes requerits visuals amb una sobrecàrrega molt baixa.

Requisits: Mootools 01/02
Descarregar Mootols Grau de l'estrella de seqüència (Descarregat 718 vegades)

Jo havia estat buscant un control lliscant de doble clavat (slider amb dos perillós, mínim i màxim) utilitzant Mootools. Encara que, vaig trobar uns quants lliscant ben fet doble clavat al fòrum de Mootools, L'únic problema era que tots aquests reguladors de força té el marcador de rang seleccionat. Per fi! Em vaig decidir a crear la meva pròpia. Bé! Vaig fer ús del codi original i modificar-lo per tenir un fons lliscant que indica el rang seleccionat visualment, com en el meu exemple a continuació. Les àrees blava indica el rang de valor triat.

Veure la Versió 2.2 de demostració | Descarregar Mootools doble Pinned Versió 2.2 lliscant (Descarregat 11729 vegades)

Vostè pot fàcilment canviar l'aspecte i la sensació que l'indicador abast (en blau en l'exemple anterior), comandament de control lliscant, la guia de desplaçament mitjançant la modificació del slider.css segons sigui necessari.

No deixar-me un comentari si és que els sigui útil.

Abans que va haver de lidiar amb CSS per crear els nostres dissenys de pàgina, l'alineació d'alguns continguts dins d'una cel · la de la taula semblava jugar sol nen. Només cal establir la "alineació" o "valign" propietat de la taula per tenir l'alineació de la seva elecció, tros de la coca!
Amb dissenys de CSS, encara que tenim "vertical-align" de propietat dels elements, no sembla ser tan simple com la "alineació" o "valign" propietats. Per ser més specifiic la "vertical-align" no sembla resoldre cap dels teus problemes, especialment si s'escriu un tros de CSS cross-browser.

Sense l'ús de taules HTML, El problema de centrar en l'objecte, ja sigui una imatge o un text dins d'una divisió que conté, probablement ha estat un malson tota la interfície d'usuari / CSS desenvolupadors en algun moment. Aquest problema addicional s'extrapola les seves preocupacions de l'alineació, si l'objecte a ser centrat és de naturalesa dinàmica, és a dir, quan la seva altura és variable (alçada desconegut).

Encara que no existeix una solució coneguda senzill que funcioni en tota la gamma de navegadors que hem de tractar, la solució que he tractat d'arribar a sembla a treballar en els pocs navegadors que he provat en (IE6, IE7 , FF).

SOLUCIÓ:
En els navegadors com Mozilla, Opera i Safari, L'estrany comportament "vertical-align" la propietat pot ser portat als seus sentits, simplement mitjançant l'establiment de la "pantalla" de propietat de la divisió que conté a "table-cell" (display: table-cell) .

El problema segueix sent amb la família de navegadors Internet Explorer, que, no obstant, no semblen entendre el que amb el "table-cell" de propietat i ignorants com són, que simplement ho ignoren. La solució donada a continuació, encara que simples, els anuncis d'alguns elements més al seu DOM HTML per fer que les coses succeeixin.

El CSS i HTML es veu així
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> vistes: 3456 </ div>
</ Div>
</ Div>

El resultat és el següent: -

veure la demo aquí | Descarregar arxius d'origen (Descarregat 452 vegades)

TOP Alinear CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> punts de vista: 1234 </ div>
</ Div>
</ Div>

El resultat és el següent: -

FONS Alinear CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> punts de vista: 1234 </ div>
</ Div>
</ Div>

El resultat és el següent: -

veure la demo aquí | Descarregueu aquí

Sembla que les edats, ja que jo estava tractant de trobar una solució raonable a aquest problema d'alineació. Però ara, amb aquesta solució, em sento en pau petita.

Amb l'esperança que algun dia

• l'alineació vertical de la propietat en CSS funciona com ho fa dins d'una cel · la de la taula, SENSE haver de vèncer tant per les branques
• Si més no, l'establiment de margin-top: auto i margin-bottom: auto, donarà com a resultat el mateix que amb el marge esquerre i el conjunt margin-right per auto
• Les guerres del navegador serà de més d'un dia.
• Hi haurà un sol navegador per a TOTS.

Descarrega el CSS i HTML de la solució per sobre d'aquí (Descarregat 452 vegades) .. per a la comprensió, la CSS no s'ha optimitzat

PD: I per cert, aquestes són les miniatures d'algunes fotos que han fet clic ...

No és que no són només uns pocs lightbox que vostè pot trobar quan busques a google. El problema amb la major part de la caixa de llum que vaig trobar va ser que tots semblaven utilitzar un o els altres marcs pesats JAVASCRIPT pes, com jQuery, Prototype, Mootools i els gustos. Tots ells són fresc i elegant cerca. Però si el seu requeriment és "però vull un SCRIPT lightbox simple i lleugera per al meu lloc", llavors aquí és;

Algunes característiques interessants d'aquesta caixa de llum

1. Molt clar
   una. 4KB de seqüència quan s'envasa (8 kb sense embalatge)
   b. 2 kb de CSS
   c. Poques línies d'HTML per al contenidor de la col · lecció
2. Fàcil d'entendre i aplicar
3. Pot tenir diverses caixes de llum a la mateixa pàgina.
4. El contenidor de la col · lecció s'utilitza la mateixa per mostrar, als diferents continguts (que s'inclouen per separat en divisions ocultes a la pàgina), en funció de la relació / opció que es fa clic.
5. Se centra automàticament, tenint en compte tots els factors com ara, l'alçada i l'amplada de finestra (resolució de la pantalla), la quantitat de desplaçament de pàgines i l'alçada dels continguts de la caixa de llum
6. Provat en IE 7 i FF

Veure demostració |
Descarregueu la taula de llum Postal Font (Descarregat 1804 vegades)

jo.js i jo_pack.js [versió]: - ple d'un simple conjunt d'objectes JavaScript [JO], que conté els elements, finestres i guions de documents de posicionament. Podeu obrir JO.JS si voleu embrutar-se les mans amb una mica de Javascripting avançada, la creació de funcions abstractes, que s'estén propietats dels elements i tal. Si no massa Javascripting, no el toqueu.

lightbox.js, lightbox_pack.js [versió plena de]: - Conté seqüències d'ordres d'administrador de la caixa de llum. Si vostè és dissenyador de la pàgina, també és responsable d'implementar la taula de llum a la pàgina, heu d'entendre la LightBoxManager. LightBoxManager conté bàsicament showLightBox només dues funcions i closeLightBox.

lightbox.css: - Si coneixes CSS, es pot jugar amb lightbox.css per personalitzar l'aspecte-n-feel lightbox.css

index.html: aplicació de mostra de la caixa de llum amb dos continguts diferents

lb_underlay_bkg.png: - Aquesta és la llum / Simi imatge transparent que s'utilitza el fons per a la capa base la col · lecció [calc subjacent és la capa sota de la lighbox, que evita que l'usuari faci clic a qualsevol altra entitat a la pàgina, mentre que la col · lecció està oberta]. Es pot utilitzar qualsevol imatge o fins i tot un color sòlid per a aquest propòsit, depenent del disseny de la pàgina i l'exigència.

icon_lb_close.gif: - La imatge de la col.lecció de mànec prop de la part superior dreta de la caixa de llum. Podeu utilitzar qualsevol imatge com pel disseny

Veure demostració |
Descarregueu la taula de llum Postal Font (Descarregat 1804 vegades)

Si us plau, faci'ns arribar els seus comentaris i suggeriments ...