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

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

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

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

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

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 (Свалено 1973 пъти)

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

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

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

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

Рейтинг данни: цяло число, след десетичната запетая или процент
В момента сценария е предназначено да показва данни за кредитен рейтинг като цели стойности (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 (Свалено 714 пъти)

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

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

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

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

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

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