Изразяване на ИТ

С разнообразието на въртележката там, много и за MooTools, аз все още реших да напиша моя клас тип "въртележка", за няколко добри причини
1. Исках функцията за виртуална памет (за да бъдем в състояние да скочи даден слайд / стъпка в тип "въртележка").
2. Искаха свобода с поставянето на левия и десния бутони / връзки, където и да се моля.
3. Повече контрол през слайдове стъпки.

Успяха да се създаде нов тип "въртележка", с посочените по-горе функции ..., както по-долу ... Чувствайте се свободни да предлагаме някакви промени, ще изискват!!!

Примера ми прилича на ... [ Виж Demo ]

Преглед на Демо | Download MooTools Въртележката С Пейджинг версия 1.0 (Свалено 1994 пъти)

1. Въртележката Пейджинг

Можете лесно да добавяте за виртуална памет на вашия тип "въртележка", просто чрез създаването на виртуалната памет, под чийто флаг плава корабът, който е миналата parater премина, докато създаването на копие на MooCarousel да е истина (искам виртуална памет) или невярно (, donot желанието за виртуална памет).

за Var carousel1 = за нов MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, вярно); / / NS = броя на кадрите, SSS = размер слайд стъпка

И разбира се можете да промените външния вид на N-усещане на тези пейджинг achors както ти е угодно, чрез модифициране на техните CSS.

Carousel_paging {текст-align: право; поле: 5px 10px 0 0;}
Carousel_paging ток, carousel_paging страница {контур: няма; ширина:.. 15px; височина: 15px; линия-височина: 15px; текст-align: център; дисплей: блок; поплавъка: ляво; фон: # D8D8EB; марж: 0 1px 0 0; текстови декорация: няма;}

Carousel_paging едно: hover, carousel_paging текущата {фон: # 4D4D9B; цвят: # FFFFFF;}.

Е! има малък проблем обаче, пейджинг котви ако е зададено, след това ще се генерира винаги след Carousel компонент. Исках да направя това динамично, както и, но след това само за да поддържат сценария за духа на пропорциите, реших да го пропуснете.
Но знаете ли малко Javascript, можете лесно биха могли да променят кода на поколение пейджинг в MooCarousel клас да се моля на вашите нужди.

2. Персонализиране на левия и десния икони

Можете да промените разположение, изображения или всеки displat собственост на левия и десен бутон просто играя наоколо с CSS. да бъде в състояние да променят разположенията на левия и десния buttoms е действителната причина за мен да ми право Въртележката нашия клас.
Тъй този MooCarousel клас, приема ID е от тези бутони, може действително да постави тези бутони навсякъде по страницата, ако обичате ... не трябва да бъде в йерархията елемента, тъй като в моя пример.

Var carousel1 = за нов MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, вярно);

CSS
Carousel_container_l, carousel_container_r {поле: 50px 0 0 0; позиция: относителна; ширина: 23px; височина: 20px; поплавъка: ляво; курсора: показалка;}

Carousel_container_r {фон-позиция: 0-38px;}

Carousel_container_l {фон-позиция: 0-58px;}

3. Стъпки Персонализиране слайдове

Какво имам предвид МОИТЕ Персонализиране слайдове СТЪПКИ?
Повечето въртележки плъзна в пълна с видимата прозорец. Да предположим, че сте имали четири елемента (като в моя проба-горе), тя ще се плъзне всичките четири позиции. С този тип "въртележка" компонент, се преминава броя на кадрите и размера стъпка по ваш избор.

Var carousel1 = за нов MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, вярно);
c_ns = броя на кадрите, c_sss = размер слайд стъпка

Също така, в моя example1 аз calcuted размера пързалка стъпка, на базата на логиката, където, знам, че броя на елементите, ширината на всеки елемент и маржовете, които са дали след всеки елемент в моя CSS.

/ * За пиршество 1 * /

VAR c1_w = 92; / / пиршество Позиция Ширина

VAR c1_n = 10; / / общ брой на Сравнение пиршество позиции

Var c1_pp = 4 / / Брой на елементите пиршество perpage Сравнение

VAR c1_marginFactor = 51;

Var c1_sss = c1_w * c1_pp / / SSS = размер на слайд стъпка

Var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5); / / НЧ = брой на слайдове

c1_sss + = c1_marginFactor; / / SSS = пързалка стъпка, размер, 51 за маржовете

Изисквания: MooTools 1.2

Преглед на Демо | Download MooTools Въртележката С Пейджинг версия 1.0 (Свалено 1994 пъти)

MooRating е прост (кръстосана браузър, разбира се, тъй като използва силата на MooTools библиотеката), лек и отлично MooTools рейтинг решение. Тя не се обозначават като "звезди", просто защото изображението рейтинг може да бъде, колкото сте избрали съм предоставил звезди, Барове и сърцата с изтеглянето, но можете да създадете свой собствен разнообразие и просто да го пуснете.

Как изглежда така:

	Оценка на MooTools с различни изображения видите демонстрация
	Оценка на MooTools с процентни стойности видите демонстрация
	На MooTools Оценка Дробни стойности видите демонстрация

Изтегляне Mootols звезди Script (Свалено 718 пъти)

Рейтинг данни: цяло число, след десетичната запетая или процент
В момента сценария е предназначено да показва данни за кредитен рейтинг като цели стойности (1,2,3,4,5), в знак след десетичната запетая (1,24, 3,45 и т.н.) или в проценти (12%, 55% и т.н.). Изборът да показвате данни в някоя от споменатите формати могат да бъдат настроени просто чрез промяна на някои флага ценности в рамките на JavaScript (moorating.js)
Съществуват две електронни две знамена, за да играе с, за показване на стойности във формат по ваш избор ...

VAR inpercent = False; / / Задаване на знамето да е истина, ако имате нужда от процентни стойности, които да бъдат показани
VAR isFractional = FALSE / / Задайте това да е истина, ако искате част от ценности като 1,24, 1,25, 4,56, а от 1,2 ... 5

И аз не мисля, че има някакво обяснение, необходими за това. Нещо повече. Сценарият е много проста. Ако знаете малко javascripting, бихте могли да модифицирате скрипта, за да получите каквато и да е на показаната стойност. Защото например, ако искаш три знака след десетичната запетая, да се показва ... просто ощипвам скрипта по-долу ...

ако (isFractional) {ако (X <= 5 | | х> = 0) moostartval [I] innerHTML = formatNumber (X, 3);} / / 2 се променя до 3
друг {moostartval [I] innerHTML = Math.round (X).

Актуализиране Оценка стойност:
Аз пристанище притеснявана да запише каквото и AJAX скриптове, за актуализиране на Оценки стойност, защото знам от моя опит, че не винаги възнамерява да актуализира Оценката най-скоро нещо като потребител проценти. Вие сте свободни да правите каквото си искате с номинална стойност, актуализирайте го използвате AJAX, или да го представи или скрита стойност за областта форма, да бъде представена с целия формуляр и т.н.

на функция updateRating (ID, рейтинг) {
/ / Предупреждение (ID + "," + рейтинг);
/ / Направете каквото е с рейтинг
}

Има функция в JavaScript, наречена "updateRating". Тази функция е преминал ID на Оценка Div, да се идентифицират по отношение на рейтингите (ако има повече от една рейтинги на страницата) бе актуализиран и стойността на рейтинг [updateRating (ID, рейтинг). Можете да изберете каквото искате с тези стойности, както споменах по-рано.

Рейтинг на снимката: звезди, сърца, барове или каквото ви моля
Промяна на рейтинг на някоя от горепосочените видове (звезди, сърца и т.н.) е много проста. Просто създайте изображение, подобно на един и да го пуснете инча Не забравяйте, ако промените името на изображението, не направи необходимите промени в CSS файла, виж по-долу.

. Moostar {марж: 0px; подложка: 0px; препълване: скрит, широчина: 84px; височина: 20px; поплавъка: ляво; фон: URL ("stars.gif") многократно х;}
Moostar педя {поплавъка: ляво; марж: 0px; подложка: 0px; дисплей: блок; ширина: 84px; височина: 20px; текстови декорация: няма; текст-indent:-9000px; Z-индекс: 20;}
Moostar Curr {фон: URL ("stars.gif"), оставяли 25px;}

Повечето джаджи рейтинги използват звезда и половин-звездни изображения с мишката над събитията на всяка звезда. Moo Оценки използва проста Sprite изображението като фоново изображение, за постигане на необходимите визуални ефекти с много ниски режийни.

Изисквания: MooTools 1.2
Изтегляне Mootols звезди Script (Свалено 718 пъти)

Търси за двойна тушира ​​плъзгач (слайдер с две копчета, минимален и максимален), като се използва MooTools. Въпреки, че открих няколко добре свършената двойно тушира ​​плъзгача в форум MooTools, единственият проблем е, че всички тези плъзгачи удар избрания маркер кръг,. Най-накрая! Реших да създам мой собствен. Е! Направих се използва оригиналния код и да го промените, за да има слайдер фон, че диапазона избра визуално, като в моя пример по-долу. Сините области показва, избран от порядъка на стойността.

Вижте Версия 2.2 Демо | Изтегли MooTools Двойна Важна Slider Версия 2.2 (Свалено 11809 пъти)

Можете много лесно да промените външния вид и усещането на обхвата индикатор (в синьо в горния пример), плъзгача на копчето, плъзгача на пистата, като модифициране на slider.css, както се изисква.

Да ме оставиш коментар, ако откриете, че е полезно.

Преди трябваше да се справим с CSS да се създаде нашата страница оформления, привеждане на част от съдържанието вътре в клетката на таблицата изглежда просто детето игра. Просто настройте "Подравняване" или "valign", собственост на масата, за да има привеждане в съответствие на вашия избор, парче от тортата!
С оформления на СГО, че имаме "вертикална-align" имот за елементите, тя не изглежда да е толкова просто като "Подравняване" или "valign" свойства. За да бъде по-specifiic "вертикална-align" никога не изглежда да решат вашите проблеми, особено ако се напише парче от кръста браузър CSS.

Без използването на HTML таблици, проблемът центриране на обекта, да бъде изображение или някакъв текст в рамките на съдържащи дивизия, вероятно е всеки UI / CSS разработчици кошмар в някакъв момент. Този проблем допълнително екстраполира вашите притеснения на изравняване, ако е динамичен обект, за да бъдат центрирани в природата, т.е. когато височината му е променлива (неизвестно височина).

Въпреки че има известни никакви правилно решение, че ще работи в целия диапазон от браузъри, ние трябва да се справят с решение, че съм опитал да стигне до прави изглежда да работят в няколко браузъри, които са опитвали в (IE6, IE 7 , FF).

РЕШЕНИЕ:
В браузъри като Mozilla, Opera и Safari, странно поведение "вертикална-align" собственост може да бъде доведен до сетивата си, просто чрез създаване собственост на "Дисплей", съдържащи разделение "Таблица клетка" (показване на маса клетка) .

Проблемът все още остава с IE семейството на браузъри, които все още не изглежда да се разбере какво трябва да с "маса клетка", собственост и невежи, тъй като те са, те просто го игнорирайте. Решението, дадени по-долу, макар и прости, реклами няколко повече от DOM елементи в HTML, за да направим нещата да се случват.

CSS и HTML изглежда така
.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/> За показвания: 3456 </ div>
</ Div>
</ Div>

Резултатът изглежда така: -

Вижте демото тук | Изтегли изходни файлове (Свалено 452 пъти)

TOP Подравняване 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/> За на показвания: 1234 </ div>
</ Div>
</ Div>

Резултатът изглежда така: -

ДОЛНО Подравняване 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/> За на показвания: 1234 </ div>
</ Div>
</ Div>

Резултатът изглежда така: -

Вижте демото тук | свалите от тук

Изглежда възраст, тъй като аз се опитвах да се намери разумно решение на проблема с това привеждане в съответствие. Но сега с това решение, аз се чувствам малко спокойствие.

С надеждата, че някой ден

• вертикално подравняване имот в CSS ще работи като го прави вътре в клетката на таблицата, без да бие много заобикалки
• Най-малко, определяне на марж върха: авто и марж-отдолу: Автоматично, ще даде същия резултат, както с марж ляв и марж-надясно автоматично
• Браузър войните ще бъде над един ден.
• Ще има само един браузър за всички.

Изтегляне на CSS и HTML от горния разтвор тук (Свалено 452 пъти) ... за разбираемост, CSS не се е оптимизиран

PS: И между другото, това са миниатюри на някои картини, които са кликнали върху ...

Не че има само няколко Лайтбокс че можете да намерите, когато ви Google. Проблемът с повечето от които намерих лайтбокса беше, че всички те като че ли да се използва едно или други тежки рамки тегло JavaScript като JQuery, прототип, MooTools и харесва. Те всички са готини и ефектен търсите. Но ако вашите изисквания е "НО ИСКАМ прост и лек Lightbox скрипт за моя сайт", след това тук е;

Някои хубави черти на този Lightbox

1. Много лек
   а. 4KB на скриптове, когато опаковани 8 KB разопакован)
   б. 2 KB на CSS
   в. Няколко реда HTML за Лайтбокс контейнер
2. Лесна за разбиране и прилагане на
3. Може да има множество лайтбокса на същата страница.
4. Лайтбокс се използва един и същ контейнер, за да покаже, различно съдържание (която е отделно включена като скрити разделения в страницата), в зависимост от връзката / опция, която е щракване.
5. Автоматично се центрове, като се вземат предвид всички фактори, като например, височина и ширина на прозореца (разделителна способност на екрана), превъртане размер на страница и от височината на съдържанието на Лайтбокс
6. Изпробван в IE 7 и FF

Вижте Demo |
Изтегляне Zip на Lightbox Източник (Свалено 1806 пъти)

jo.js, jo_pack.js [опаковани версия]: - прост набор от JavaScript ОБЕКТИ [JO], който съдържа елемент, прозорец и скриптове за позициониране на документи. Можете да отворите JO.JS, ако искате да си цапат ръцете с някои на Advanced Javascripting, създавайки абстрактни функции, разширяване на елементите имоти и такива. Ако не е твърде много в Javascripting, го остави на мира.

lightbox.js, lightbox_pack.js [опаковани версията]: -, съдържа леки скриптове, мениджър кутия. Ако сте дизайнер на страница, отговаря и с прилагането на Лайтбокс на страницата, трябва да разберат LightBoxManager. LightBoxManager основно съдържа само две функции showLightBox и closeLightBox.

lightbox.css: - Ако знаете, CSS, можете да си поиграете с lightbox.css, за да персонализирате външния вид на N-чувстват lightbox.css

index.html: изпълнение на пробата на Лайтбокс с две различно съдържание

lb_underlay_bkg.png: - Това е светлина / Сими прозрачен образ, който се използва фон за подложка Лайтбокс [подложка е слой под lighbox, която не позволява на потребителя да щракнете върху всеки друг субект на страницата,,, Лайтбокс е отворена. Можете да използвате всяко изображение или дори плътен цвят за тази цел, в зависимост от дизайна на страницата и изискването.

icon_lb_close.gif: - изображението за тясно Лайтбокс дръжка в горния десен ъгъл на светлината кутия. Може да използвате всяко изображение по проект

Вижте Demo |
Изтегляне Zip на Lightbox Източник (Свалено 1806 пъти)

Моля, нека вашите коментари и обратна връзка ...

Ако сте едно от онези момчета (като мен), които често проверка на CSS и HTML страница, за да се вдъхновяват или каквото и да, тогава може би сте забелязали, че сме използвали Faux позициониране (както вече беше споменато в предишната ми статия Ние сме Faux абсолютно позициониране: брилянтен оформление на УСВ )

Направихме няколко добрата работа на този шаблон, така че мислех, че ще хубаво да го споделите ... Изтегляне на WordPress тази тема (изтеглени 196 пъти)