Vyjádření IT

S různými kolotoče venku, mnoho pro Mootools také, pořád se rozhodl napsat vlastní Carousel třídy, pro některé z dobrých důvodů
1. Chtěl stránkovací funkce (mohli skočit konkrétní snímek / krok v karuselu).
2. Chtěli svobodu, umístění na levý a pravý tlačítka či odkazy, kde vůbec se mi zlíbí.
3. Větší kontrolu nad Slide schodů.

Já se podařilo vytvořit nový Carousel, s výše uvedenými funkcemi ... jak je uvedeno níže ... Nebojte se navrhnout nějaké změny byste vyžadovat!

Můj Příklad vypadá takto ... [ View Demo ]

Zobrazit Demo záložky | Stáhnout Mootools Carousel S stránkovacího verze 1.0 (staženo 1992 krát)

1. Kolotoč Paging

Můžete snadno přidat stránkování do kolotoče, jednoduše nastavením stránkovací vlajku, což je poslední parater prošel při vytváření instance MooCarousel na hodnotu true (chcete stránkovací) nebo false (donot chce stránkování).

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright" c_ns, c_sss, true); / / ns = počet snímků, sss = snímek velikost kroku

A samozřejmě můžete změnit vzhled-n-styl těchto vyhledávacích achors, jak je libo úpravou jejich CSS.

. Carousel_paging {text-align: právo; margin: 5px 10px 0 0;}
. Carousel_paging proud, carousel_paging stránku {outline: none; šířka: týden. 15px, výška: 15px; line-height: 15px; text-align: centrum; display: block; float: left; pozadí: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging: hover, carousel_paging proud {background: # 4D4D9B, color: # FFFFFF;}..

No! tam je malý problém když, pokud je nastavena, stránkovací kotvy pak to dostane generován vždy po Carousel komponenty. Chtěl jsem, aby to dynamický také, ale pak už jen, aby scénář k foukání rozměrů, rozhodl jsem se ji přeskočit.
Ale víte, trochu Javascript, můžete snadno upravit stránkovací generace kód v MooCarousel třídě potěšit své potřeby.

2. Přizpůsobení levý a pravý ikony

Můžete změnit umístění, obrázky ani displat majetek z levého a pravého tlačítka jednoduše tím, že hraní si s CSS. mít možnost změnit umístění mezi levým a pravým PŘIVOLÁVAČE byl skutečný důvod, abych na pravou mé naší Carousel třídy.
Vzhledem k tomu, MooCarousel třídy, přijme id je z těchto tlačítek, můžete skutečně umístit tato tlačítka kdekoliv na stránce, prosím ... to nemusí být v hierarchii prvků, jako v mém příkladu.

var carousel1 = new 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; pozice: relativní, šířka: 23px; výška: 20px; float: left; cursor: pointer;}

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

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

3. Přizpůsobení snímků kroky

Co tím myslím MOJE Přizpůsobení snímků kroky?
Většina Kolotoč posuňte plně s z viditelného okna. Takže říct, že měl čtyři položky (jako v mém vzorku výše), bude to klouzat všechny čtyři položky. S tímto Carousel Component, minete několik snímků a velikost kroku dle vašeho výběru.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright" c_ns, c_sss, true);
c_ns = počet snímků, c_sss = snímek velikost kroku

Také v mém example1 jsem calcuted prezentaci velikost kroku, založený na logice kde, vím, že počet položek, šířka na každé položky a marží, které dali za každou položkou v mém CSS.

/ * Pro pitka 1 * /

var c1_w = 92 / / pitka položky Šířka

var c1_n = 10 / / Celkový počet položek porovnávané pitka

var c1_pp = 4 / / Počet porovnávané perpage pitka položky

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = snímek velikost kroku

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5) / / ns = počet snímků

c1_sss + = c1_marginFactor, / / ​​sss = snímek velikost kroku, 51 pro okraje

Požadavky: Mootools 1.2

Zobrazit Demo záložky | Stáhnout Mootools Carousel S stránkovacího verze 1.0 (staženo 1992 krát)

MooRating je jednoduchý (cross prohlížeč, samozřejmě, protože využívá síly knihovny Mootools), lehké a vynikající Mootools podle hodnocení řešení. To není pojmenován jako "hvězdiček", prostě proto, že by hodnocení obrázek, jak si vybrat (já jsem za předpokladu, hvězdičky, bary a srdce ke stažení, ale můžete vytvořit vlastní paletu a nech ho).

Jak to vypadá takto:

	Mootools hodnocení s různými obrázky Zobrazit ukázku
	Mootools hodnocení s procentuální hodnoty Zobrazit ukázku
	Mootools hodnocení s hodnotami nepatrné Zobrazit ukázku

Stáhnout Mootols é Script (Staženo 718 krát)

Hodnocení údaje: celé číslo, desetinné nebo procento
V současné době skript je navržen tak, aby ratingové zobrazit data jako celek hodnot (1,2,3,4,5), v desetinná místa (1,24, 3,45 atd.), nebo v procentech (12%, 55% atd.). Volba pro zobrazení dat v jednom z uvedených formátů lze nastavit jednoduše tím, že se mění některé vlajky hodnot v JavaScriptu (moorating.js)
V zásadě existují dva e dvě vlajky na hraní, pro zobrazení hodnoty ve formátu dle vašeho výběru ...

var inpercent = false; / / Nastavení tohoto příznaku na hodnotu true, pokud potřebujete procentuální hodnoty, které se zobrazí
var isFractional = false / / Nastavte na hodnotu true, pokud chcete nepatrné hodnoty, jako jsou 1,24, 1,25 a 4,56, spíše než 1,2 ... 5

I dont myslím, že je zapotřebí nějaké vysvětlení pro to. Kromě toho. Skript je velmi jednoduchý. Pokud víte, trochu javascripting, můžete upravit skript dostat jakoukoli hodnotu zobrazenou. Pro např. pokud byste chtěli tři desetinná místa mají být zobrazeny, ... prostě poupravit skript níže ...

if (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] = innerHTML FormatNumber (x, 3);.} / / 2 se mění na 3
else {moostartval [i] = innerHTML Math.round (x).;

Aktualizace Hodnocení hodnota:
I havent obtěžoval psát nějaké AJAX skripty pro aktualizaci ratingů hodnotu, protože vím z vlastní zkušenosti, že ne vždy se to v úmyslu aktualizovat RATING jakmile uživatel sazeb něco. Můžete si dělat, co chcete s jmenovitou hodnotou, aktualizovat jej pomocí AJAX nebo jej nastavit nebo skryté pole formuláře hodnotu, která má být předložena s celou formou atd.

Funkce updateRating (id, hodnocení) {
/ / Alert (id + "," + hodnocení);
/ / Dělej si, co s hodnocením
}

K dispozici je funkce v javascriptu názvem "updateRating". Tato funkce se usnesl na identifikátor Hodnocení Div, zjistit, jaké hodnocení (pokud existuje více než jedna hodnocení na stránce) byl aktualizován a hodnota ratingu [updateRating (id, hodnocení)]. Dalo by se rozhodnout, co chcete s těmito hodnotami, jak jsem již zmínil.

Hodnocení Obrázek: hvězdy, srdce, bary nebo něco prosím
Změna hodnocení na některou z výše uvedených typů (hvězdy, srdce atd.) je velmi jednoduché. Stačí vytvořit obraz podobný tomu, pokud jeden a umístěte jej dovnitř Pamatujte, že pokud změníte název obrazu, se provést nezbytné změny v souboru CSS, viz níže.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; šířka: 84px; výška: 20px; float: left; background: url ("stars.gif") repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; šířka: 84px; výška: 20px; text-decoration: none; text-indent:-9000px, z-index: 20;}
.. Moostar akt. {background: url ("stars.gif") odešel 25px;}

Většina hodnocení widgety používat hvězdu a půl hvězdičkami obrazy s myší nad událostmi na každé hvězdy. Moo hodnocení používá jednoduchý skřítka obrázek jako obrázek na pozadí, aby bylo dosaženo požadované vizuální efekty s velmi nízkou zátěží.

Požadavky: Mootools 1.2
Stáhnout Mootols é Script (Staženo 718 krát)

Jsem hledal dvojí připnutý Posuvník (jezdec se dvěma knoflíky, minimální a maximální) pomocí Mootools. I když, našel jsem pár dobře odvedenou dvojitý jezdec připnutý na fóru Mootools, jediný problém byl, že všechny tyto posuvníky dint se vybrané dosahu. Konečně! Jsem se rozhodl vytvořit svůj vlastní. No! Jsem použít původní kód a upravit ji mít jezdec pozadí, které je uvedeno rozmezí vybrané vizuálně, jako v mém příkladu. Modré oblasti udává rozsah hodnot zvolili.

Zobrazit Demo verze 2.2 | Download Mootools Double Čepové a kolíkové Slider verze 2.2 (staženo 11768 krát)

Můžete velmi snadno změnit vzhled a dojem z řady ukazatele (modře ve výše uvedeném příkladu), slider knoflík, posuvník trať změnou slider.css podle potřeby.

Líbí se napište mi komentář, pokud vám to užitečné.

Než jsme se museli vypořádat s CSS vytvořit naše rozložení stránky, zarovnání nějaký obsah uvnitř buňky tabulky zdálo Prostě hračkou. Stačí zadat "sladit" nebo "valign" vlastnost tabulky mají zarovnání podle vašeho výběru, kousek dortu!
S rozvržení CSS, když máme "vertical-align" vlastnost prvků, se nezdá být tak jednoduché, jak "sladit" nebo "valign" vlastností. Chcete být více konkrétni "vertical-align" nikdy se zdá k řešení některý z vašich problémů, zejména pokud jsou napsat kus cross-browser CSS.

Bez použití HTML tabulek, problém se soustředit na objektu, ať už je to nějaký obrázek nebo text v obsahující divize, byl pravděpodobně každý UI / CSS vývojáři noční můra, na nějakém místě. Tento problém dále extrapoluje své starosti v přizpůsobení, je-li objekt, který se uprostřed je dynamický charakter, tj. když jeho výška je proměnlivá (neznámé výška).

Ačkoli neexistuje žádná známá přímočaré řešení, které bude pracovat v celé řadě prohlížečů, které musíme řešit, řešení, které jsem se snažil přijít k se zdá pracovat v několika prohlížečích, které jsem se snažil ho (IE6, IE 7 , FF).

ŘEŠENÍ:
V prohlížečích, jako je Mozilla, Opera a Safari divně chová "vertical-align" majetek může být podána k rozumu, jednoduše nastavením "display" vlastnost obsahující divize "stolní buňky" (display: table-cell) .

Problémem stále zůstává s IE rodiny prohlížečů, který, ale nezdá se, že pochopili, co mají s "table-cell" majetku a nevědomým, jak jsou, prostě ignorovat. Řešení uvedeny níže, byť jednoduchý, inzeráty několika více DOM elementy do HTML dělat věci se stávají.

CSS a HTML vypadá takto
.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/> zobrazení: 3456 </ div>
</ Div>
</ Div>

Výsledek vypadá takto: -

Podívejte se na demo zde záložky | ke stažení Zdrojové soubory (staženo 452 krát)

TOP Zarovnání 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/> zobrazení: 1234 </ div>
</ Div>
</ Div>

Výsledek vypadá takto: -

SPODNÍ Zarovnání 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/> zobrazení: 1234 </ div>
</ Div>
</ Div>

Výsledek vypadá takto: -

Podívejte se na demo zde | Ke stažení zde

Vypadá to, že stárne, protože jsem se snažil najít rozumné řešení tohoto problému zarovnání. Ale teď s tímto řešením, se cítím trochu klidu.

S nadějí, že jednoho dne

• Vertikální zarovnání CSS majetek bude fungovat podobně jako to dělá uvnitř buňky tabulky, aniž by museli porazit mnohem kolem horké kaše
• Alespoň, nastavení margin-top: auto a margin-bottom: auto, dá stejného výsledku jako u margin-left a margin-right nastaven na automatické
• Válce prohlížečů bude po nějaký den.
• K dispozici bude pouze jeden prohlížeč pro všechny.

Stáhněte si CSS a HTML výše uvedené řešení zde (staženo 452 krát) .. pro srozumitelnosti, je CSS není optimalizována

PS: A mimochodem, to jsou náhledy některých obrázků jsem klikli ...

Ne že by to jsou jen některé LightBox je, že můžete najít, když Google. Problém s většinou lightboxů, že jsem zjistil, bylo, že se vše zdálo se použít jeden nebo jiné těžké váhy rámců JavaScriptu jako jQuery, Prototype Mootools a rád. Všichni jsou cool a elegantní hledáte. Ale Pokud váš požadavek "Ale já chci, jednoduchý a LEHKÝ lightbox SCRIPT svých webových stránek", pak tady je;

Některé pěkné rysy tohoto Oblíbených

1. Velmi lehká
   . 4 KB skriptů při balení (8 kB bez obalu)
   b.. 2 kb CSS
   c.. Pár řádků HTML pro lightboxu kontejneru
2. Jednoduché pochopit a realizovat
3. Může mít více lightboxy na stejné stránce.
4. Stejný Oblíbených kontejner se používá k zobrazení, jiný obsah, který je zahrnut jako samostatně skrytých oddílů na stránce) v závislosti na odkaz / option, který je klepli.
5. Automaticky se centra, přičemž v úvahu všechny faktory, jako jsou okna výšky a šířky (rozlišení monitoru), str. vyhledejte množství a na výšku obsahu Oblíbených
6. Testováno v IE 7 a FF

Zobrazit Demo |
Stáhnout Lightbox Zdroj Zip (Staženo 1804 krát)

jo.js a jo_pack.js [zabalené verze]: - jednoduchý soubor JAVASCRIPTU OBJEKTŮ [JO], který obsahuje prvek, okna a skripty dokumentů polohy. Můžete otevřít JO.JS, pokud chcete, aby vaše špinavé ruce s nějakým pokročilým Javascripting, vytvářet abstraktní funkce, rozšíření prvků vlastnosti a podobně. Pokud nemáte příliš v Javascripting, nechá to být.

lightbox.js, lightbox_pack.js [sbalil verze] - Obsahuje lehké skripty okně Správce. Pokud jste návrhář stránky, rovněž odpovídá s prováděním lightbox na stránce, musíte pochopit LightBoxManager. LightBoxManager podstatě obsahuje jen dvě funkce showLightBox a closeLightBox.

lightbox.css: - Pokud víte, CSS, můžete si pohrát s lightbox.css upravit vzhled-n-cítit lightbox.css

index.html: Ukázka implementace Oblíbených s dvěma různým obsahem

lb_underlay_bkg.png: - To je světlo / simi transparentní obraz, který se používá jako podklad pro podložení lightboxu [podložka se vrstva pod lighbox, která zabraňuje uživateli kliknutím na jakýkoliv jiný subjekt na stránce, zatímco Schránka je otevřena]. Můžete použít libovolný obrázek, nebo dokonce plná barva pro tento účel, v závislosti na vzhled stránky a požadavku.

icon_lb_close.gif: - obrázek pro EL páky na pravé horní části světelného pole. Lze použít jakýkoliv obrázek dle návrhu

Zobrazit Demo |
Stáhnout Lightbox Zdroj Zip (Staženo 1804 krát)

Prosím, dejte nám mají své připomínky a reakce ...

Pokud jste jeden z těch kluků (jako já), kteří často kontrolovat CSS dobře provedené stránky HTML se inspirovat, nebo co, a pak jste si možná všimli, že jsme použili Faux polohy (jak již bylo řečeno v mém dřívějším článku jsme Faux pomocí absolutní polohy: Brilantní CCS Layout )

My jsme některé dobré práce na této šabloně, takže si myslel, že by hezké sdílet .... Stáhněte si toto téma WordPress (staženo 196 krát)