Реклама
У нашој завршној лекцији о овоме јКуери за почетнике Туториал серије, погледаћемо кратки јКуери УИ - најкоришћенији јКуери додатак за додавање графичких корисничких интерфејса веб апликацијама. Од фантастичних облика и визуелних ефеката, до видљивих видгета, спиннера и дијалошких оквира - јКуери УИ вам даје моћ стварања богатих веб корисничких сучеља.
Ако већ нисте, прочитајте наше претходне чланке у низу:
- Увод: Шта је јКуери и зашто би се требало бринути? Израда Интернета интерактивна: увод у јКуеријКуери је библиотека скрипта на страни клијента коју користи готово свака модерна веб локација - веб странице чине интерактивном. То није једина Јавасцрипт библиотека, али је најразвијенија, највише подржана и најчешће коришћена ... Опширније
- 1: Селектори и основе јКуери Туториал - Први кораци: Основе и изборнициПрошле недеље сам говорио о томе колико је јКуери важан сваком модерном веб програмеру и зашто је то феноменално. Ове недеље мислим да је време да се умажемо руке неким кодом и научимо како ... Опширније
- 2: Методе Увод у јКуери (други део): Методе и функцијеОво је део сталног увода за почетнике у јКуери серију веб програма. Први део је покренуо основе јКуери-а о томе како га укључити у свој пројекат и селекторе. У другом делу, наставићемо са ... Опширније
- 3: Чекање на учитавање странице и анонимне функције Увод у јКуери (део 3): Чекање на страницу за учитавање и анонимне функцијејКуери је засигурно суштинска вештина модерног веб програмера, а у овој краткој мини серији надам се да ћу вам дати знање да је почнете користити у сопственим веб пројектима. Ин ... Опширније
- 4: Догађаји јКуери Туториал (Дио 4) - Слушаоци догађајаДанас ћемо то подићи и заиста показати где јКуери блиста - догађаји. Ако сте пратили прошле туторијале, сада бисте морали да добро разумете основни код ... Опширније
- Отклањање грешака са Цхроме алаткама за програмере Откријте проблеме са веб локацијама помоћу алата за програмере Цхроме или Фиребуг-аАко сте досад пратили моје јКуери туторијале, можда сте већ наишли на неке проблеме са кодом и нисте знали како да их решите. Када се суочите са нефункционалним битним кодом, то је врло ... Опширније
- 5: АЈАКС јКуери Туториал (5. део): АЈАКС Тхем Алл!Како се ближи крај наше мини туториал серије о јКуери-у, време је да детаљније погледамо једну од најчешће коришћених функција јКуери-а. АЈАКС омогућава веб локацији да комуницира са ... Опширније
Шта је јКуери корисничко сучеље и зашто га треба користити?
јКуери УИ даје све компоненте потребне за модерну веб апликацију с ГУИ-јем. Ради бољег описа, то је колекција виџета.
За брзу представу о томе шта можете учинити, само прелистајте МакеУсеОф. Код нас је садржај заправо само одвојен дивс са неуређеном листом која ће деловати као индекс. Покрените функцију јКуери картица на њима и они се магично претварају у картице. Авесоме! Можете чак и учитати садржај картица преко АЈАКС-а ако желите.
Страница са наградама такође користи дијалошки оквир „модални скочни прозор“ за потврду акције корисника и повратне поруке. Да бисте усмерили пажњу корисника, можете да дијалошки оквир затамни остатак садржаја странице док интеракција не буде окончана.
На нашој страници са одговорима користимо једноставно тоолтип функција за давање савета о дугмади.
јКуери корисничко сучеље заиста одликује када су у питању облици, омогућавајући приступ мноштву клизача и бирача. Велики сам обожаватељ датепицкер додатак који сам могао да додате на уобичајени оквир за унос текста где би корисник требао уписати датум.
Изгледа компликовано зар не? Можете ли замислити да кодирате тако нешто у чистом ЈаваСцрипт-у? Овако то радите са јКуери корисничким сучељем:
$ ("# датеФиелд"). датумски изборник ();
Нећу више трошити време да објашњавам колико је то феноменално јер званични демо презентације јКуери УИ дају добар преглед свих функција које су доступне, као и једноставне узорке кода. Иди прочитај.
Додавање корисничког сучеља јКуери
Најједноставнији начин да започнете с јКуери корисничким сучељем је да додате следеће редове у заглавље - али направите сигурни су да су додани НАКОН главне референце јКуери-а, јер јКуери корисничко сучеље захтева да се јКуери претходно учита. Потребна вам је и референца на скрипту додатака и стилехеет који садржи визуелни опис тих УИ елемената.