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

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

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

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

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

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 (Скачано 1986 раз)

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

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

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

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

Оцінка даних: ціле число, десяткове або відсотках
В даний час сценарій призначений для демонстрації в рейтингу дані в цілому значення (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 Категорія сценарій (Скачано 716 раз)

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

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

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

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

Перш, ніж ми мали справу з CSS для створення макетів сторінок нашого, поєднавши частину вмісту всередині комірки таблиці, здавалося, гра просто дитини. Просто встановіть "align" або "VALIGN" властивість таблиці мають вирівнювання по вашим вибором, шматок пирога!
З макети CSS, хоча у нас є "вертикального вирівнювання" властивості елементів, вона не здається такою простою, як «вирівнювання» або «VALIGN" властивості. Щоб бути більш specifiic "вертикального вирівнювання" ніколи, здається, вирішити будь-які ваші проблеми, особливо якщо будуть писати шматок крос-браузерні CSS.

Без використання таблиць HTML, завдання центрування на об'єкт, будь то зображення або текст, що містить усередині підрозділи, ймовірно, було кожного UI / CSS розробники кошмар якийсь момент. Ця проблема подальшого екстраполює ваші турботи узгодження, якщо об'єкт по центру динамічний характер, тобто, коли його висота змінні (невідомі висоти).

Незважаючи на відсутність відомих прямим рішенням, яке буде працювати по всьому спектру браузерів ми маємо справу з того, що рішення, яке я намагався прийти до дійсно схоже на роботу в декількох браузерах, які я пробував в (IE6, IE 7 , FF).

РІШЕННЯ:
В браузерах Mozilla, Opera і Safari, дивну поведінку "вертикального вирівнювання" майно може бути доведена до його почуттів, просто встановивши "дисплей" майном містять поділ на «клітинки таблиці" (дисплей: осередки таблиці) .

Проблема залишається з 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>

Результат виглядає наступним чином: -

переглянути демонстрацію тут | Завантажити вихідних файлів (Скачано 451 раз)

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 вищевказаних рішень тут (Скачано 451 раз) .. для зрозумілості, CSS не оптимізована

PS: І, до речі, ті ескізи деяких фотографіях я клацнув ...

Не те, що є тільки кілька LightBox про те, що можна знайти, коли ви Google. Проблема з більшістю лайтбокси, що я виявив, що всі вони, здавалося, використання одного чи іншого важкого ваги JAVASCRIPT рамки як JQuery, Prototype, MooTools і любить. Це все здорово і шикарний вигляд. Але якщо ваша вимога "Але я хочу простий і легкий LightBox SCRIPT на моєму сайті", то тут;

Деякі цікаві особливості цього Лайтбокс

1. Дуже легкий
   . 4kb скриптів, якщо вони упаковані (8 кб без упаковки)
   б. 2 Кб CSS
   в. Кілька рядків з HTML в обране контейнер
2. Проста для розуміння і реалізації
3. Може мати кілька лайтбокси на тій же сторінці.
4. Те ж контейнер Лайтбокс використовується, щоб показати, різного змісту (яке окремо включений як прихованої підрозділів на сторінці), залежно від посилання / опція, яка була натиснута.
5. Автоматично центрується, беручи до уваги всі чинники, такі як висота і ширина вікна (роздільна здатність екрану), стр. прокрутки кількість і висоту вмісту Лайтбокс
6. Протестовано в IE 7 і FF

Переглянути демо |
Завантажити Lightbox Джерело Zip (Скачано 1797 раз)

jo.js, jo_pack.js [упаковані версія]: - простий набір об'єктів JavaScript [JO], який містить елемент, вікна і скрипти документ позиціонування. Ви можете відкрити JO.JS, якщо ви хочете, щоб ваші руки брудні з деякими Розширений Javascripting, створення абстрактних функцій, розширення властивостей елемента тощо. Якщо ви не занадто багато в Javascripting, залиште його в спокої.

lightbox.js, lightbox_pack.js [упакованої версії]: - Містять світло сценарії менеджер вікна. Якщо ви розробник сторінки, а також відповідальність з реалізації обраного на сторінці, ви повинні розуміти, LightBoxManager. LightBoxManager в основному містить тільки дві функції showLightBox і closeLightBox.

lightbox.css: - Якщо ви знаєте, CSS, ви можете пограти з lightbox.css налаштувати зовнішній вигляд-н-відчувати lightbox.css

index.html: Приклад реалізації лайтбокс з двома різними зміст

lb_underlay_bkg.png: - Це світло / Сімі прозоре зображення, яке використовується для фону підкладки Лайтбокс [підкладка є шар нижче lighbox, яка дозволяє користувачеві натисканням будь-який інший об'єкт на сторінці, а лайтбокс відкрита]. Ви можете використовувати будь-яке зображення або навіть суцільний колір для цієї мети, в залежності від дизайну і вимог.

icon_lb_close.gif: - зображення для близьких ручки лайтбокс на верхній правій частині вікна світло. Можна використовувати будь-яке зображення як в дизайні

Переглянути демо |
Завантажити Lightbox Джерело Zip (Скачано 1797 раз)

Будь ласка, дайте нам ваші коментарі та відгуки ...