2008 25 декабря 2008

Загрузка JavaScripts Динамически

Иногда, чтобы сохранить pageweight вниз ... мы разбили наши сценарии на фрагменты ... Эти фрагменты JavaScript может быть загружен как и в случае необходимости (по событию или по нажатию на ссылку или кнопку и т.д.).

Загрузка Javascripts динамично прост и довольно прямо вперед, как показано ниже ...

= “text/javascript” > <Сценарий тип = "текст / JavaScript">
Функция loadNewScript (источник) {
Var S = document.createElement ('сценария');
s.setAttribute («типа», «текст / JavaScript");
s.setAttribute («SRC», источник);
document.body.appendChild (ы);
}
</ SCRIPT>

и вы можете по следующей ссылке вызова в любую точку тела, или вы можете иметь этот сценарий "OnLoad" самого документа ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A HREF = "javascript: loadNewScript ('myDynamicScript.js');"> Load Динамический сценарий </ a>

или

<body onload="loadNewScript('myDynamicScript.js');">


2008 17 декабря 2008

Неправильное поведение IE8: CSS Layout поломок (Ориентация версию браузера с помощью метатегов в IE8)

Если вы CSS человека, вы бы знали, боль в получении макеты рабочих крест-браузера. IE8 является еще одним ключом в работе для нас разработчики. Anywaz! если вы попали на этот вопрос, как я сделал вчера, когда ваш прекрасно работает CSS в IE7 (и ранее) и Firefox вдруг начали бросать истерики в IE8, попробуйте это ... Это хорошо, казалось, исправить мои проблемы на данный момент ....

Использование мета декларации, мы можем указать рендеринга мы хотели бы использовать IE8. Таким образом, чтобы заставить IE8 оказывать как IE7 ... вставьте следующий мета-тег в голову документа: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

По умолчанию IE Мета бы: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
которые сделают IE8 сделать страницу с помощью нового режима стандартов.

При необходимости, этот синтаксис может быть использован для размещения на других браузерах, как показано ниже:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />


БОЛЬШЕ О ТИПЫ ДОКУМЕНТОВ:

Если вы еще не знакомы с подобного животного под названием "Doctype" ... вот некоторые быстро читать
Каковы ТИПЫ ДОКУМЕНТОВ? Что такое БРАУЗЕР причуды и строгий режим?
Установка DOCTYPE в XSL

Для более глубокого понимания ТИПЫ ДОКУМЕНТОВ, попробуйте посетить эти ссылки ...
A List Apart: Исправьте ваш сайт с правой DOCTYPE!
A List Apart: Beyond DOCTYPE: веб-стандартов, вперед совместимости и IE8

Примечание: Хотя многие из нас, HTML / CSS люди были без учета важности DOCTYPE decleration в наших документах, Установка правой DOCTYPE, как правило, ответ на самый крест вопросы обозревателя.


2008 9 декабря 2008

Простая карусель с помощью подкачки Mootools

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

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

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

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


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


2008 2 декабря 2008

Простой крест сценарий Рейтинг браузер для Mootools

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 раз)


NDK дома | Выражая IT | Выражая неба | Выражая Penmenship | Выражая трепет | выразить себя