Как да използвате джаджа за автоматично довършване iquery потребителския интерфейс

В този урок ще разгледаме един от новите компоненти на JQuery UI 1.8 - джаджа за автоматично довършване. AutoComplete полетата на формуляра може да бъде много полезна функция за посетителите на сайта си, тъй като тя е по-лесно да въведете информация. Тази функция може да се използва, например, за областта, или при влизане в държава, град, или нещо подобно, което може да бъде избран от общия списък. JQuery UI автоматично довършване, Widget популярен сред разработчиците, тъй като тя е лесна за използване, той е доста мощна и гъвкава.

Едно от свойствата е да се изпрати на Facebook съобщения до приятелите си. Попълване се използва, когато въвеждате името на приятел. В този урок ще използваме JQuery UI автоматично довършване, Widget да се създаде система, подобна на тази, използвана при публикуване на Facebook. Разбира се, няма да бъдат реализирани изпращане на съобщението. Това е, което трябва да се случи в резултат:

Как да използвате джаджа за автоматично довършване iquery потребителския интерфейс

Стъпка 1 Първи стъпки

Трябва да използвате темата по подразбиране (UI Lightness) и се уверете, че избраната версия 1.8 в дясната колона.

Стъпка 2 HTML маркиране

Първо, погледнете

Това е често срещан образец. Външният контейнер

Тя се използва за задаване на стила и елемента , към който е прикрепен Автодовършване, също се намира в клетката

. стил за е настроен така, че да е малко по-скрита, но стилът

Това го прави да изглежда подобно на останалата част от полетата на формата. контейнер даден клас UI-помощник-clearfix. За да използвате този клас от CSS JQuery UI работната среда.

Необходимо е да се установят връзки към празната файл от UI файл, JQuery, както и секцията със стилове страница:

Следните файлове трябва да бъде свързан към крайния участък от .

Етап 3 стилове за форма

Ние използваме една много проста неутрална тема в нашия пример. CSS се съдържа в следния код autocomplete.css файл (всички JQuery UI стилове са разположени в JQuery UI--1.8.custom.css файл):

За оформяне на прекрасните прозрачни границите с заоблени ъгли с помощта на правила CSS3 RGBA на. -moz гранично-радиус. -webkit гранично-радиус и граничен радиус. IE не поддържа някое от тези правила, и въпреки че можете да използвате филтър за прозрачност възпроизвеждане зародиш, заоблени ъгли може да стане само с използването на изображения. Ефективност Прозрачност RGBA не е показано в този пример с пълна сила. Много е вероятно, че този тип форма трябва да се използва като плаваща модален прозорец над съдържанието на страницата.

контейнер

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

. Не препълвайте и не е необходимо да се увеличи височината

Също така, ние си поставихме за стила на името на получателя, за да бъде добавен към

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

Формулярът трябва да изглежда по следния начин:

Етап 4 Прикачване Автодовършване

Сега трябва да се свърже с джаджа за автоматично довършване в

. За да направите това, използвайте следния скрипт:

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

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

В тази функция, ние използваме метод JQuery getJSON () за прехвърляне на термина в PHP файл на сървъра страна. PHP файл използва термина за извличане на подобни имена на контакти от MySQL база данни. Ние използваме JSONP да се върне отново данните на процеса. Функция за обратно повикване, която се предава като втори вариант аргумент източник включва събиране на данни в масива. По този начин необходимостта от създаване на празен масив и да използвате JQuery всеки метод (), за да се справят с всеки елемент JSON масив, който се връща от сървъра. Итерация се извършва на всеки елемент в масива и добавяне на всяко изречение в нов масив. В момента, в нов масив ще бъде построен, ние го премине функция за обратно извикване за да се покаже менюто джаджа.

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

. Просто създайте елемент за текст и линк елемент, който се използва за отстраняване на получателя. След създаването на форматирането на името на получателя, че е поставена непосредствено пред замаскирано .

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

Цялата тази конфигурация, която е необходима за дадено приложение, но има няколко функции, които са необходими, за да се гарантира точността на кода. След метод за автоматично довършване (), за да добавите следния код:

, който е приложен към нашата функцията за автоматично довършване, почти скрита и контейнер

Той има стил, който я прави да изглежда като другите форми на терена. За да завършите измамата добавим кликване събитие манипулатор контейнер

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

Той не се различава от нормалната терена.

Стъпка 5 Допълнителен код и ресурси

За да се съхранява списък на всички имена на получателите, използващи бази данни MySQL. Следващият PHP файл получава данни, изпратени от getJSON () и дърпа съответните имена от базата данни:

За да стартирате пробата нужда от уеб сървър, инсталиран и конфигуриран PHP, MySQL и сървъра и подходяща база данни и таблици. Когато един герой е като в полето "До", той е предаден на srever и се използва за изваждане от базата данни на всяко име, което започва с характер. Подходящи имена след това се предават обратно на страницата и показва менюто предлага:

заключение

Нашата форма е в действителност нищо няма да изпрати. Функционалност се изпълнява лесно с обработка на събитие свързано с бутона "Изпращане".

JQuery UI автоматично довършване, Widget го прави лесен за да се свържете и да е източник на данни и включва богата функционалност, за да се справят събития, които можем да използваме, за да отговори на полето за въвеждане на текст в асоциирано предприятие или селекция от предложения от менюто. Widget стилизиран използване работна среда CSS JQuery UI и може лесно да бъде конфигуриран да се гарантира, че отговарят на темата на сайта. По принцип, описан джаджа е много лесен за използване и осигурява отлична функционалност.

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

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

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

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

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

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

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

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

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