Висловлюючи IT

Завдяки різноманітності Каруселі там багато для Mootools, а також, я все ж вирішив написати свій власний клас Карусель, деякі вагомі причини
1. Потрібні підкачки функцію (щоб мати можливість перейти зокрема слайд / крок в каруселі).
2. Потрібні волі з розміщенням кнопок вліво і вправо / зв'язку, де б я, будь ласка.
3. Більше контролю над Слайд кроки.

Мені вдалося створити нові каруселі, з урахуванням вищезазначених особливостей ... нижче ... Не соромтеся пропонувати будь-які зміни зажадають!

Мій приклад виглядає наступним чином ... [ Переглянути презентацію ]

Переглянути демо | Завантажити Mootools карусель з підкачкою версії 1.0 (Скачано 2001 раз)

1. Карусель пейджинга

Ви можете легко додати підкачки до каруселі, просто встановивши підкачки прапор, який є останнім parater пройшло при створенні екземпляра MooCarousel до істинної (хочу підкачки) або FALSE (виграш бажаючих підкачки).

УАГ carousel1 = новий MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, правда) / / нс = кількість слайдів, SSS = слайд кроку

І звичайно ж ви можете змінити зовнішній вигляд-н-стиль цих підкачки achors як вам буде завгодно, змінюючи їх CSS.

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

. Carousel_paging: наведіть, carousel_paging поточний {фон: # 4D4D9B, колір: # FFFFFF;} ..

Ну! є невелика проблема, хоча, підкачування якоря якщо встановлений, то він отримає породжених завжди після того, як карусель компонентів. Я хотів зробити його динамічним, як добре, але потім просто зберегти сценарій для видува пропорції, я вирішив пропустити його.
Але ви знаєте, трохи Javascript, ви можете легко змінити код підкачки покоління в MooCarousel класу порадувати своїх потреб.

2. Налаштування лівий і правий іконки

Ви можете змінити розміщення, зображення або будь-якого displat власності ліва і права кнопки просто граючи з CSS. щоб бути в змозі змінити розміщень лівої і правої buttoms була дійсна причина для мене, щоб права наших моя карусель класу.
Так як це MooCarousel класу, приймає ідентифікатори з цих кнопок, ви можете помістити ці кнопки в будь-якому місці сторінки, будь ласка ... це не повинно бути в ієрархії елементів, як у моєму прикладі.

УАГ 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; float: left; курсора: покажчик;}

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

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

3. Налаштування слайд кроки

Що я маю на увазі мій Налаштування КРОКИ SLIDE?
Більшість Каруселі ковзати з повним видимого вікна. Так кажуть у вас було чотири елементи (як в моєму прикладі вище), то буде ковзати всіма чотирма елементами. З цією каруселі компонент, Ви передаєте кількість слайдів і розмір кроку за вашим вибором.

УАГ carousel1 = новий MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, правда);
c_ns = кількість слайдів, c_sss = слайд кроку

Крім того, в моєму example1 я calcuted розмір слайда крок, засновані на логіці, де, я знаю, кількість предметів, шириною по кожному пункту, і поля, які дали після того, як кожен елемент в моєму CSS.

/ * Для гулянки 1 * /

УАГ c1_w = 92; / / гулянки товару Ширина

УАГ c1_n = 10; / / Загальна кількість товарів Порівняння гулянки

УАГ c1_pp = 4 / / Кількість Порівняння perpage гулянки товарів

УАГ c1_marginFactor = 51;

УАГ c1_sss = c1_w * c1_pp / / SSS = слайд кроку

УАГ c1_ns = ParseInt (((* c1_w c1_n) / c1_sss) + 0,5) / / нс = кількість слайдів

c1_sss + = c1_marginFactor / / SSS = слайд кроку, 51 полів

Вимоги: Mootools 1.2

Переглянути демо | Завантажити Mootools карусель з підкачкою версії 1.0 (Скачано 2001 раз)

MooRating простий (крос-браузер, звичайно, як він використовує владу бібліотеки MooTools), легкі і відмінно Mootools заснований рейтинг рішення. Це не називається, як "Зоряний Рейтинг", просто тому, що рейтинг зображення може бути, як ви виберете (я надав Зірки, бари і серця при завантаженні, але ви можете створити свій власний сорт і просто його).

Як це виглядає наступним чином:

	Рейтинг Mootools з різними зображеннями Переглянути демо
	Рейтинг Mootools з Відсоток значень Переглянути демо
	Рейтинг Mootools з дробовими значеннями Переглянути демо

Завантажити Mootols Категорія сценарій (Скачано 722 раз)

Оцінка даних: ціле число, десяткове або відсотках
В даний час сценарій призначений для демонстрації в рейтингу дані в цілому значення (1,2,3,4,5), в десяткових (1.24, 3.45 і т.д.) або у відсотках (12%, 55% і т.д.). Вибір для відображення даних в будь-якому із зазначених форматів може бути встановлений тільки шляхом зміни деяких значень прапора в JavaScript (moorating.js)
Є два електронних два прапори, щоб грати, для відображення значень в формат за вашим вибором ...

УАГ inpercent = false; / / Встановити прапор так, якщо вам потрібно процентні значення, яке буде відображатися
УАГ isFractional = False / / Встановити це вірно, якщо ви хочете дробові значення, як 1,24, 1,25, 4,56, а не 1,2 ... 5

І я не думаю, що немає ніякого пояснення, необхідні для цього. Більше того. Сценарій дуже простий. Якщо ви знаєте трохи javascripting, ви можете змінити сценарій, щоб отримати ніякого значення відображаються. Для, наприклад, якщо ви хочете трьох знаків після коми буде відображатися ... просто налаштувати сценарій, як показано нижче ...

якщо (isFractional) {якщо (х <= 5 | | х> = 0) moostartval [я] = InnerHtml FormatNumber (х, 3);.} / / 2 змінюється на 3
ще {moostartval [я] InnerHtml екскурсії, (х).

Оновлення Рейтинг Значення:
Я нету турбувати написання сценаріїв AJAX для поновлення Рейтинги значення, тому що я знаю зі свого досвіду, що не завжди роблять це наміру переглядати або оновлювати РЕЙТИНГ як тільки користувач щось ставок. Ви вільні робити все, що ви хочете з номінального значення, оновлення за допомогою AJAX або запропонувати його або встановити приховане значення поля форми, які будуть представлені з усією формою і т.д.

Функція updateRating (ID, рейтинг) {
/ / Сповіщення (ID + "," + рейтинг);
/ / Зробити щось з РЕЙТИНГ
}

Існує функція в JavaScript під назвою "updateRating". Ця функція була передана ідентифікатор Рейтинг Div, щоб визначити, які рейтинги (якщо є більше однієї оцінки на сторінці) був оновлений і значення рейтингу [updateRating (ID, рейтинг)]. Ви можете вибрати все, що ви хочете з цими цінностями, як я згадував раніше.

Рейтинг фотографії: зірки, серця, бари і все, що завгодно
Зміна рейтингу будь-якого з вищевказаних типів (зірки, серця і т.д.) дуже проста. Просто створіть зображення, схоже на вхідний в комплект поставки і помістіть його дюйма Пам'ятайте, якщо ви зміните ім'я образу, не внести необхідні зміни у файлі CSS, див нижче.

. Moostar {маржа: 0px; оббивка: 0px; переповнення: прихований, ширина: 84px висота: 20px; float: left; фон: URL ('stars.gif) повторите-х;}
. Moostar проміжок {float: left; краю: 0px; оббивка: 0px; дисплей: блок, ширина: 84px висота: 20px; текст-оздоблення: немає; текст-indent:-9000px, г-індекс: 20;}
.. Moostar вал {фон: URL ('stars.gif) залишив 25px;}

Більшість рейтингів віджети використовують зірки і половина зірок зображення за допомогою миші над подіями на кожну зірку. Му Рейтинги використовує простий спрайт зображення в якості фонового зображення для досягнення необхідного візуального ефекту з дуже низькими накладними витратами.

Вимоги: Mootools 1.2
Завантажити Mootols Категорія сценарій (Скачано 722 раз)

Я шукав подвійний покладали слайдер (слайдер з двома ручками, мінімальні та максимальні) з використанням MooTools. Хоча, я знайшов кілька добре зробили подвійний слайдер покладали на форумі MooTools, єдиною проблемою було те, що всі ці повзунки вм'ятина є обраний маркер діапазону. Нарешті! Я вирішив створити свій власний. Ну! Я використовувати вихідний код і змінити його, щоб мати повзунок тло вказує на вибраний діапазон візуально, як у моєму прикладі. СИНІЙ області вказує на діапазон вартості обраної.

Перегляд версії 2.2 Demo | Завантажити Mootools двомісні ВАЖЛИВО Slider версії 2.2 (Скачано 11906 раз)

Ви можете дуже легко змінити зовнішній вигляд і ряд індикаторів (синім кольором в прикладі вище), повзунок регулятора, регулятор треку, змінюючи slider.css в міру необхідності.

Ви напишіть мені коментар, якщо ви знайдете її корисною.