Направи проста стилове превключвател

Един от начините за подобряване на взаимодействието на потребителя със сайта си - да им позволи да персонализирате някои аспекти от него. Тя може да бъде всичко - от прости, за да промените размера на шрифта, за да изберете подходящия език или локал. Като разработчик, което виждам в това двойно предизвикателство. Трябва и двете да се даде възможност на потребителя да персонализирате нещо и трябва някъде да се съхранява в резултат на потребителските настройки на следващия запис, той не загуби резултатите от техния труд. В този урок ще ви покажа как да създадете прости стилове ключ, както и за съхраняване на потребителски настройки в местния магазин.

Първото нещо, което ние се нуждаем от HTML страница с малко количество съдържание и стилове. Освен това добавихме падащ списък, където потребителят ще изберете желания стил за нея. Един пример може да изглежда като тази страница, е дадена по-долу:

Реакция на събития

От падащото меню се използва за промяна стилове, добавете слушател събитие на елемент изберете. който ще реагира адекватно всеки път, когато потребителят ще избере нов стил от списъка. Според модела на събитие задвижване на второто ниво на W3C DOM. стандартен начин да се регистрира събитието манипулатор е следната позиция:

Значението на всеки аргумент:

• събитие име - низ, представляващ името или вида на събитието, за който искате да добавите слушател
• обаждане - Функцията за обратно повикване (обаждане), който ще се нарича, когато събитието се задейства
• използване за улавяне - булева стойност, която определя дали обаждане може да бъде ползвана, когато събитието е във фазата на пресичане, тоест, когато събитието се просмуква от корена на документа към целта.

За съжаление, IE8 и неговите предшественици не следват този модел. Вместо това, IE осигурява алтернативен метод за attachEvent () за същата цел. Независимо от това дали сте избрали да подкрепят или не подкрепят по-старите версии на IE, това зависи от вас, или от аудитория, която предоставя ресурса. Трябва да се оценят разходите за поддръжка за по-стари браузъри, както и ползите, които могат да предоставят тази подкрепа. В нашия случай става въпрос за използване на прости функции за обвивки, така че подкрепата IE8 не е твърде трудно. Този пример показва как събитието промяна се обработва, за да изберете елемент крос-браузър.

В случай на switchStyles () функция трябва да се отбележи, че тази променлива се отнася до елемент, който причинява събитието (в този случай - изберете елемент). Следователно this.options ни дава достъп до опциите на изберете елемент. и this.options [this.selectedIndex] дава Достъп текущо избрания обект. От това само за да получите стойността на атрибута стойност на избрания елемент от списъка.

промяна на стилове

Сега нека да добавите някои стилове, които по-късно ще можете да преминете на потребителя. Създайте следната CSS-файл на Вашия проект:

Когато потребителят избере различен стил от списъка на падащото, ние се прилага за тяло елемент, съответстващи на класа, а останалите ще бъдат премахнати:

На този етап имаме пълнофункционален стилове ключ, показани в следния пример:

Ние работим върху нивото на CSS файл

Преминаване класове работили добре за нашата демонстрация. Но ако се работи с широк спектър от стилове, би било много по-удобно да ги държи в отделни файлове. По-късно, можете да превключите на съответните файлове стил, отколкото да се превключва класове. Този код се свързва стилове на страницата:

Не забравяйте, избор на потребителя

На този етап, ние вече имаме ключ стилове. За съжаление, когато рестартирате страницата отново, потребителят ще бъде отпусната по подразбиране. За да се реши този проблем, клиентът ще използва хранилището за да запазите настройките си. На всеки презареждане на страницата, ние ще възстановим тези настройки от хранилището.

Има няколко от технологиите за съхранение на данни от страна на клиента. За този случай ние ще използваме локално хранилище. Локално хранилище вече се поддържа от съвременни браузъри, и осигурява до 5 MB на разположение за съхранение на данни пространство. И, за разлика от бисквитките, информация никога не е изпратена до сървъра от местния магазин. Ако трябва да се подкрепят стари браузъри (как мога да съжалявам за вас), за тези цели, има заобикаляне. Също така имайте предвид, че някои браузъри, като, например, IE8, не подкрепят местното устройство за съхранение на файла: // протокол.

Основния синтаксис работи с локално хранилище:

За да приложите тази на нашата страница, е необходимо стойността, избрана от потребителя, за да поддържа списък позиция всеки път, когато промените изберете елемента:

Необходимо е също така да се провери стойността на този ключ при зареждането на страницата, а ако някой се намират - да се определят от съответния клас на тялото на елемент. Това може да стане, ако първият се опита да получи няколко "ключ / стойност" от магазина:

Ако даден елемент е в магазина, можете да преминете през елементи от списъка и да ги сравните с ценностите, които извади от местния магазин. Ако не се намери един мач - това може да се отбележи, как избрания елемент от списъка:

Следващият пример включва нашите промени:

Сега ние можем да променим стила от падащия списък. В допълнение, когато актуализираме страницата падащия списък се възстановява в предишното му състояние. Но все пак, когато рестартирате нашите стилове не са възстановени, избраният последен път. Защо така?

По принцип, ако софтуерът се промени елементите на списъка, събитието промяна не е излъчван. Нека да го оправи собствения си спусъка функция:

Тази функция, ние можем да преминат от името на събитието, което ние искаме да се обадя, както и като елемент, който ще бъде причинено от събитието. На следващо място, проверките на функция, ако браузъра е отговор на document.createEvent () (всички съвременни браузъри, на следните стандарти, подкрепа на него). Ако е така, тогава функцията използва dispatchEvent (), за да се задейства събитие. В противен случай, функцията използва метод fireEvent ().

Крайният докосване на сценария е да добавите следния код:

След като добавя този ред, нашият последен код изглежда така:

заключение

В този урок ще ви покажа как да се даде възможност на потребителя да промените външния вид на вашия сайт. Можете също така научих как да се спаси потребителски настройки, което подобрява взаимодействието на потребителя с вашия сайт. Когато се използва правилно, тази техника дава мощен инструмент, с който можете да изберете вашия сайт от редица други като него.

5 урока последната колона "JQuery"

Днес бихме искали да ви разкажа за TypeIt библиотека - безплатно JQuery плъгин. Можете да го използвате, за да се симулира пишете. Ако всичко е настроен правилно, то е много реалистичен ефект може да се постигне.

JQuery плъгин за създаване на график.

JQuery плъгин за създаване на диаграма на Гант.

Един пример за това как да се приложи изтегления файл чрез PHP и JQuery Аякс.

Alexander_Muromtsev

До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!

Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!

Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.

Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!