Выражая IT

Благодаря разнообразию Карусели там много для Mootools, а также, я все же решил написать свой собственный класс Карусель, некоторые веские причины
1. Требуются подкачки функцию (чтобы иметь возможность перейти частности слайд / шаг в карусели).
2. Требуются свободы с размещением кнопок ВЛЕВО и ВПРАВО / связи, где бы я, пожалуйста.
3. Больше контроля над Слайд шаги.

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

Мой пример выглядит следующим образом ... [ Посмотреть презентацию ]

Посмотреть демо | Скачать Mootools карусель с подкачкой версии 1.0 (Скачано 1995 раз)

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

Вы можете легко добавить подкачки к карусели, просто установив подкачки флаг, который является последним parater прошло при создании экземпляра MooCarousel к истинной (хочу подкачки) или ЛОЖЬ (выигрыш желающих подкачки).

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

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

Как это выглядит следующим образом:

	Рейтинг Mootools с различными изображениями Посмотреть демо
	Рейтинг Mootools с Процент значений Посмотреть демо
	Рейтинг Mootools с дробными значениями Посмотреть демо

Скачать Mootols Категория сценарий (Скачано 718 раз)

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

Я искал двойной возлагали слайдер (слайдер с двумя ручками, минимальные и максимальные) с использованием MooTools. Хотя, я нашел несколько хорошо сделали двойной слайдер возлагали на форуме MooTools, единственной проблемой было то, что все эти ползунки вмятина есть выбранный маркер диапазона. Наконец-то! Я решил создать свой собственный. Ну! Я использовать исходный код и изменить его, чтобы иметь ползунок фон указывает на выбранный диапазон визуально, как в моем примере. СИНИЙ области указывает на диапазон стоимости выбранной.

Просмотр версии 2.2 Demo | Скачать Mootools двухместные ВАЖНО Slider версии 2.2 (Скачано 11819 раз)

Вы можете очень легко изменить внешний вид и ряд индикаторов (синим цветом в примере выше), ползунок регулятора, регулятор трека, изменяя 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>

Результат выглядит следующим образом: -

просмотреть демонстрацию здесь | Скачать исходных файлов (Скачано 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: И, кстати, те эскизы некоторых фотографиях я щелкнул ...

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

Некоторые интересные особенности этого Лайтбокс

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

Посмотреть демо |
Скачать Lightbox Источник Zip (Скачано 1806 раз)

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

Пожалуйста, дайте нам ваши комментарии и отзывы ...

Если вы один из тех парней (вроде меня), которые часто проверять CSS хорошо сделанный HTML страницу, чтобы получить вдохновение или любой другой, то вы могли заметить, что мы использовали искусственную позиционирования (как уже было сказано в моей предыдущей статье мы использование искусственного Абсолютное позиционирование: Блестящие Макет CCS )

Мы действительно хорошую работу на этом шаблоне, поэтому думал, что это приятно поделиться .... Скачать Эта тема WordPress (скачан 196 раз)